Related
Im trying to do the layout below with flexible widgets so when the screen size changes the layout stays about the same but when I put a flexible widget around a column anything that I put in the column in not visible. What am I doing wrong?
Wanted Outcome
What I have
My code
class _HomeScreenState extends State<HomeScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
backgroundColor: Colors.black,
),
body: SafeArea(
child: Column(
children: [
Flexible(
flex: 9,
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.grey,
),
),
),
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Container(),
),
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Container(),
),
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Container(),
),
],
),
),
Flexible(
flex: 1,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.white),
),
)
],
),
),
);
}
}
Finish your work, you will get the thing you have asked
Provide child on container
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.grey,
),
child: SizedBox(
height: 50,
width: double.infinity,
),
),
),
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I am creating a container that should take up all available Space in width thats possible. However, I need to position an element on it that clips out of it, so I am using a Stack for it.
Using an Expanded on the lower stacked element causes an exception and also using a stack just with the positioned Item also causes an exception because the stacked widget has nowhere to anchor to.
Any Ideas how to solve this?
double.maxFinite as width does not work either
Using an expanded around the Containers looks like this:
Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Stack(
overflow: Overflow.visible,
children: [
Container(
height: 100,
width: 100,
padding: EdgeInsets.only(bottom: 10, right: 5),
child: Container(
decoration: BoxDecoration(color: Colors.blue, borderRadius: BorderRadius.all(Radius.circular(10))),
padding: EdgeInsets.all(10), // Padding for content to Container Border
child: Text("Fruit"),
),
),
Positioned(
top: -8,
left: 10,
child: Container(
//padding: EdgeInsets.only(bottom: 10, right: 5),
child: Container(
decoration: BoxDecoration(color: Colors.green, borderRadius: BorderRadius.all(Radius.circular(10))),
padding: EdgeInsets.all(5), // Padding for content to Container Border
child: Text("Fruit"),
),
),
),
],
),
Stack(
overflow: Overflow.visible,
children: [
Expanded(
child: Container(
height: 100,
//width: MediaQuery.of(context).size.width/2,
padding: EdgeInsets.only(bottom: 10, right: 5),
child: Container(
decoration: BoxDecoration(color: Colors.blue, borderRadius: BorderRadius.all(Radius.circular(10))),
padding: EdgeInsets.all(10), // Padding for content to Container Border
child: Text("Fruit"),
),
),
),
Positioned(
top: -8,
left: 10,
child: Container(
//padding: EdgeInsets.only(bottom: 10, right: 5),
child: Container(
decoration: BoxDecoration(color: Colors.green, borderRadius: BorderRadius.all(Radius.circular(10))),
padding: EdgeInsets.all(5), // Padding for content to Container Border
child: Text("Fruit"),
),
),
),
],
),
],
);
Try fit: StackFit.expand,
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
body: SafeArea(
child: MyHomePage(),
),
),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Container(
height: 100,
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(child: _card()),
Expanded(child: _card()),
],
),
);
}
Widget _card() {
return Stack(
fit: StackFit.expand,
overflow: Overflow.visible,
children: [
Container(
padding: EdgeInsets.only(bottom: 10, right: 5),
child: Container(
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(10)),
),
padding: EdgeInsets.all(10),
child: Text("Fruit"),
),
),
Positioned(
top: -8,
left: 10,
child: Container(
//padding: EdgeInsets.only(bottom: 10, right: 5),
child: Container(
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.all(Radius.circular(10)),
),
padding: EdgeInsets.all(5),
child: Text("Fruit"),
),
),
),
],
);
}
}
I have been trying to replicate these two designs in Flutter using Stack, Positioned, Row, and similar related widgets, however, I've been getting stuck in the same stages again and again. I either can't center the text or cannot position the back button correctly. Also, I am trying not to use fixed sizes/positions as this is supposed to be somewhat adaptable to different screen sizes.
Could someone point me in the right direction, of how to create this or similar layouts, which would be reused in other screens?
Example 1:
Example 2:
For your example numero 1, I came with this solution:
class DetailScreen extends StatefulWidget {
#override
_DetailScreenState createState() => _DetailScreenState();
}
class _DetailScreenState extends State<DetailScreen> {
#override
Widget build(BuildContext context) {
return Material(
color: Colors.white,
child: SafeArea(
child: Stack(
fit: StackFit.expand,
children: [
Container(
margin: const EdgeInsets.all(5),
decoration: BoxDecoration(
color: Color(0xFF0B2746),
borderRadius: BorderRadius.circular(15),
),
child: Container(
margin: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(vertical: 18),
child: Text(
'Glossary',
style: TextStyle(
fontWeight: FontWeight.w800,
fontSize: 20,
),
),
)
],
),
),
),
Padding(
padding: const EdgeInsets.only(top: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Card(
margin: const EdgeInsets.only(left: 0),
child: Padding(
padding: const EdgeInsets.all(12),
child: Icon(Icons.arrow_back_ios),
),
elevation: 6,
),
],
),
)
],
),
),
);
}
}
and the result is the following:
For your second example, I had to add extra logic:
class DetailScreen extends StatefulWidget {
#override
_DetailScreenState createState() => _DetailScreenState();
}
class _DetailScreenState extends State<DetailScreen> {
#override
Widget build(BuildContext context) {
return Material(
color: Colors.white,
child: SafeArea(
child: Stack(
fit: StackFit.expand,
children: [
Container(
margin: const EdgeInsets.all(5),
decoration: BoxDecoration(
color: Color(0xFF0B2746),
borderRadius: BorderRadius.circular(15),
),
child: Column(
children: [
Container(
height: 64.0,
width: double.infinity,
margin: const EdgeInsets.only(left: 54, right: 8, top: 8),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
),
child: Row(
children: <Widget>[
SizedBox(width: 20),
Icon(Icons.train, size: 35),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 18),
child: Text(
'Metro',
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.w800,
fontSize: 20,
),
),
),
),
Icon(Icons.arrow_drop_down, size: 35),
SizedBox(width: 20),
],
),
),
Expanded(
child: Container(
margin: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
)),
)
],
),
),
Padding(
padding: const EdgeInsets.only(top: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Card(
margin: const EdgeInsets.only(left: 0),
child: Padding(
padding: const EdgeInsets.all(12),
child: Icon(Icons.arrow_back_ios),
),
elevation: 6,
),
],
),
)
],
),
),
);
}
}
and the result for this one is the follwing:
I'm trying to create a basic chat application in Flutter and I want to display the conversation in simple containers which will adapt its length to the text inside. Everything works fine until the text does not fit the length of the container, when I get an overflow error.
The code that I'm using is this one
Widget _buildMessage(Message message) {
return Row(children: <Widget>[
message.author == username ? Expanded(child: Container()) : Container(),
Container(
padding: EdgeInsets.all(8.0),
margin: EdgeInsets.all(4.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(8.0))),
child: Row(
children: <Widget>[
Text(
message.text,
),
SizedBox(
width: 8.0,
),
Padding(
padding: EdgeInsets.only(top: 6.0),
child: Text(
message.time,
style: TextStyle(fontSize: 10.0, color: Colors.grey),
),
),
SizedBox(
width: 8.0,
),
Padding(
padding: EdgeInsets.only(top: 6.0),
child: Text(
message.author,
style: TextStyle(fontSize: 10.0, color: Colors.grey),
),
),
],
)),
message.author != username ? Expanded(child: Container()) : Container(),
]);
}
I'm using a Row within a Row so that I can get this alignment to the right or to the left depending on the author.
If I type something with a multiline in my input, the text is rendered properly, with the container expanding vertically as needed. The problem is when I just type beyond the width of the container.
I can fix this by wrapping the Text with a Container and a fixed with, but I don't want that as I want the width to be dynamic and adapt to the text.
I've seen other questions where people suggests using Flexible or Expanded, but I can't figure out how to do it.
Any ideas would be appreciated.
I tried to edit your code and here is what I've made:
return Row(
mainAxisAlignment: message.author == username ? MainAxisAlignment.end : MainAxisAlignment.start,
//this will determine if the message should be displayed left or right
children: [
Flexible(
//Wrapping the container with flexible widget
child: Container(
padding: EdgeInsets.all(8.0),
margin: EdgeInsets.all(4.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(8.0))),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Flexible(
//We only want to wrap the text message with flexible widget
child: Container(
child: Text(
message.text,
)
)
),
SizedBox(
width: 8.0,
),
Padding(
padding: EdgeInsets.only(top: 6.0),
child: Text(
message.time,
style: TextStyle(fontSize: 10.0, color: Colors.grey),
),
),
SizedBox(
width: 8.0,
),
Padding(
padding: EdgeInsets.only(top: 6.0),
child: Text(
message.author,
style: TextStyle(fontSize: 10.0, color: Colors.grey),
),
),
],
)),
)
]
);
Here is the full version of my dummy code:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<String> username = ['foo', 'bar', 'foo', 'bar', 'foo'];
List<String> messages = ['aaaaaaaaaaaaaaaaaaaaaaaaaaaaa', 'bb', 'cccccccccccccccccccccccccccccc', 'dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd', 'ee'];
List<String> time = ['131', '6454', '54564', '54546', '88888'];
List<String> author = ['Jesus', 'Joseph', 'Mary', 'John', 'Cardo'];
#override
Widget build(BuildContext context){
return Scaffold(
body: Container(
color: Colors.blue[200],
child: ListView.builder(
itemCount: 5,
itemBuilder: (_, int index){
return Row(
mainAxisAlignment: username[index] == "foo" ? MainAxisAlignment.end : MainAxisAlignment.start,
children: [
Flexible(
child: Container(
padding: EdgeInsets.all(8.0),
margin: EdgeInsets.all(4.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(8.0))),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Flexible(
child: Container(
child: Text(
messages[index],
),
)
),
SizedBox(
width: 8.0,
),
Padding(
padding: EdgeInsets.only(top: 6.0),
child: Text(
time[index],
style: TextStyle(fontSize: 10.0, color: Colors.grey),
),
),
SizedBox(
width: 8.0,
),
Padding(
padding: EdgeInsets.only(top: 6.0),
child: Text(
author[index],
style: TextStyle(fontSize: 10.0, color: Colors.grey),
),
),
],
)),
)
]
);
}
)
)
);
}
}
I have a next markup:
The red block is ListView with a horizontal orientation.
The purple block is just Container for all content.
The white is Container as well but with paddings.
I want to expand the width of the red block on full width. How can I do it? It should look like this:
Code of the markup:
class FifaApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Directionality(
textDirection: TextDirection.ltr,
child: Container(
padding: EdgeInsets.symmetric(
vertical: 60.0,
horizontal: 30.0,
),
color: Color(0xFFffffff),
alignment: Alignment.topLeft,
child: Container(
color: Colors.purple,
margin: EdgeInsets.symmetric(vertical: 10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Math Reports"),
Container(
color: Colors.red,
padding: EdgeInsets.symmetric(vertical: 10.0),
height: 170.0,
child: ListView(
scrollDirection: Axis.horizontal,
// children: renderItems(), // the example of code without green blocks
),
),
],
),
),
),
);
}
}
You can use Stack as below
class FifaApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Directionality(
textDirection: TextDirection.ltr,
child: Container(
padding: EdgeInsets.symmetric(
vertical: 60.0,
),
color: Color(0xFFffffff),
alignment: Alignment.topLeft,
child: Stack(
children: <Widget>[
Container(
color: Colors.purple,
margin: EdgeInsets.symmetric(horizontal: 30),
),
Padding(
padding: const EdgeInsets.only(left: 30.0),
child: Text(
"Math Reports",
style: TextStyle(color: Colors.white),
),
),
Container(
height: 170,
color: Colors.red,
margin: EdgeInsets.only(top: 30),
child: ListView(
scrollDirection: Axis.horizontal,
),
)
],
),
),
);
}
}