I have the following code:
return Scaffold(
body: SafeArea(
child: ListView(children: [
Container(
child: Center(
child: Row(children: [
Flexible(
child: Container(
margin: const EdgeInsets.fromLTRB(10, 15, 5, 15),
decoration: BoxDecoration(color: Colors.white),
child: Row(children: [
Container(
height: 20,
width: 20,
decoration: BoxDecoration(color: Colors.black38),
),
Expanded( // <- does nothing. container still 0x0px
child: Container(
decoration: BoxDecoration(color: Colors.black38),
)),
]),
))
])))
]),
));
I am trying to expand the third container to the remaining size of the Row it's in, but somehow it always stays 0x0 pixel in size, until I define a manual size by using height: or/and width:.
Thanks for any help!
I could be wrong, but I think it's actually not 0 x 0 but [remaining width] x 0. You will see that just putting a height will make it visible. Also when putting a 3rd widget in the row you will see it will be pushed all the way to the right.
The thing is that, as far as I understand it, a Row expects it's children to provide a height. Because otherwise it doesn't know how high it needs to be. What height do you expect the Expanded to be? 20 like the other container? full height of the screen? If a widget inside a Row doesn't provide a height it will be made as small as possible, so in this case, invisible.
What probably helps is to wrap the row in an IntrinsicHeight like this:
return Scaffold(
body: SafeArea(
child: ListView(children: [
Container(
child: Center(
child: Row(children: [
Flexible(
child: Container(
margin: const EdgeInsets.fromLTRB(10, 15, 5, 15),
decoration: BoxDecoration(color: Colors.white),
child: IntrinsicHeight(child: Row(children: [
Container(
height: 20,
width: 20,
decoration: BoxDecoration(color: Colors.black38),
),
Expanded( // <- does nothing. container still 0x0px
child: Container(
decoration: BoxDecoration(color: Colors.black38),
)),
]),
)))
])))
]),
));
try this
Container(
child: Center(
child: Row(children: [
Flexible(
child: Container(
margin: const EdgeInsets.fromLTRB(10, 15, 5, 15),
decoration: BoxDecoration(color: Colors.white),
child: Row(children: [
Container(
height: 20,
width: 20,
decoration: BoxDecoration(color: Colors.black38),
),
Expanded(
child: Container(
height: 20,
decoration: BoxDecoration(color: Colors.pink),
),
),
]),
))
]))),
Related
Is there any way to set the max size of the Expanded or Flex widget in Flutter?
Containers constraints are not working at all.
Row(
children: [
Container(
decoration: BoxDecoration(
color: Colors.red,
),
child: SizedBox(
height: 30,
width: 50,
),
),
Flexible(
child: Container(
constraints:
const BoxConstraints(minWidth: 50, maxWidth: 100),
decoration: BoxDecoration(
color: Colors.blue,
),
child: SizedBox(
height: 30,
),
),
),
Container(
decoration: BoxDecoration(
color: Colors.green,
),
child: SizedBox(
height: 30,
width: 50,
),
),
],
),
What I want: Max Width
I tryed Everythig. Really.
Limit max width of Container in Flutter
This didn't help me.
The Expanded widget is supposed to take all the space available in a Row or a Column so you can't just limit its size by using SizedBox or any other method but you can do either of two things whichever suits your needs to limit its size:
Using the flex property of the Expanded Widget:
Row(
children: [
Expanded( //wrap all the widgets in your row with expanded
flex:1, //and provide a flex property (higher number equals more space taken)
child: Container(
decoration: BoxDecoration(
color: Colors.red,
),
child: SizedBox(
height: 30,
width: 50,
),
),
),
Expanded(
flex:2, // which means flex:2 will take twice the amount
child: Container(
constraints:
const BoxConstraints(minWidth: 50, maxWidth: 100),
decoration: BoxDecoration(
color: Colors.blue,
),
child: SizedBox(
height: 30,
),
),
),
Expanded(
flex:1, //same for this one
child: Container(
decoration: BoxDecoration(
color: Colors.green,
),
child: SizedBox(
height: 30,
width: 50,
),
),
),
],
),
Result:
Limiting the width of the Row itself:
SizedBox( //wrap your Row with a SizedBox and give it some width
width: 200,
child: Row(
children: [
Container(
Result:
Edit: As you want to have an adaptable container you just need to change some things:
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, //add mainAxisAlignment to give spaceBetween the containers
children: [
Container(
decoration: BoxDecoration(
color: Colors.red,
),
child: SizedBox(
height: 30,
width: 50,
),
),
Container(
height: 30, //give you container some height instead of a child SizedBox
constraints:
BoxConstraints(minWidth: MediaQuery.of(context).size.width/10, maxWidth: MediaQuery.of(context).size.width/5), // add responsive constraints which change values according to your screen size
decoration: BoxDecoration(
color: Colors.blue,
),
child: Expanded(child: Container(),) //give it an Expanded widget to take in all the maxWidth
),
Container(
decoration: BoxDecoration(
color: Colors.green,
),
child: SizedBox(
height: 30,
width: 50,
),
),
],
),
And then you'll get this:
Shrinked:
Unshrinked:
I am having problems positioning the text inside my stack of widgets.
I just want to position two text widgets one below another. But one of them is initially at the bottom already , it moves up the whole widget.
You can see in this attachment the result I would like to achieve (red lines) and the current result:
Widget build(BuildContext context) {
return Stack(
children: [
Card(
elevation: 6,
margin: const EdgeInsets.all(8),
child: Padding(
padding: const EdgeInsets.only(
bottom: 60, right: 5, left: 5, top: 5), //bordes interiores
child: Stack(children: [
Container(
width: double.infinity,
height: 200,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(image as String), //varImg.url
fit: BoxFit.cover)),
//child:
),
]),
)),
Container(
//alignment: Alignment.centerLeft,
padding: const EdgeInsets.all(10),
child: Column(
children: [
Row(
children: [
IconTheme(
data: IconThemeData(
color: gender == 'Male' ? Colors.blue : Colors.pink),
child: Icon(gender == 'Male'
? Icons.male_rounded
: Icons.female_rounded)),
Positioned(
bottom: 10,
child: Text(
title,
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.grey),
),
),
],
),
],
),
),
],
);
}
}
You could use a Column with mainAxisAlignment set to MainAxisAlignment.end and set the two widgets as its children.
I'm trying to create this design: https://www.uplabs.com/posts/public-transport-app-design?utm_source=extension&utm_medium=click&utm_campaign=muzli (the top of the first one)
But i'm having this issue: renderflex children have non-zero flex but incoming height constraints are unbounded
This is my code:
Scaffold(
body: Container(
width: double.infinity,
height: double.infinity,
child: Stack(
children: [
Positioned(
left: 0,
right: 0,
child: Container(
width: double.maxFinite,
height: MediaQuery.of(context).size.height / 1.5,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/abstract2.jpg"),
fit: BoxFit.cover)),
)),
Positioned(
left: 0,
top: 5,
child: SizedBox(
height: 20.0,
child: Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
Expanded(child: TextField()),
Icon(Icons.person)
],
),
),
)),
The thing is when I remove replace the TextField() with Text(), the error disapear. I don't know what i'm doing wrong.
Can you help me please ? Thanks
try this.
Stack(
children: [
/// this is usefull cause it says that the stack will cover all of the screen
SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
),
///place your image here
Container(
height: MediaQuery.of(context).size.height*0.5,
decoration: const BoxDecoration(color: Colors.red),
// decoration: const BoxDecoration(
// image: DecorationImage(
// image: AssetImage("assets/images/abstract2.jpg"),
// fit: BoxFit.cover)),
),
///text field ned a width or to be flexible to work.
Positioned(
width: MediaQuery.of(context).size.width,
top: MediaQuery.of(context).size.height *0.3,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(
child: TextFormField(
maxLines: 1,
keyboardType: TextInputType.multiline,
textInputAction: TextInputAction.next,
decoration: InputDecoration(
fillColor: StyleConstants.whiteColor,
filled: true,
border: StyleConstants.defaultBorder,
focusedBorder: StyleConstants.focusedBorder,
enabledBorder: StyleConstants.defaultBorder,
contentPadding: const EdgeInsets.symmetric(
vertical: 20.0, horizontal: 20.0),
),
),
), Icon(Icons.person)],
),
)
],
)
Try this buddy, I think the problem is caused by using expanded in sizedbox. I usually get this error when I use a TextField in a Row. In such cases, you need to wrap the TextField in a SizedBox or Container and define its width and height, or wrap it in a Flexible Widget. Then it is resolved.
child: SizedBox(
height: 20.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
Expanded(child: TextField()),
Icon(Icons.person)
],
),
How to create Row with two containers with centered image and text above image also centered.
Like in image attached.
enter image description here
Is this what you are trying to do:
class ExampleDesign extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Center(
child: Container(
height: 180,
padding: EdgeInsets.symmetric(
horizontal: 5,
),
child: Row(
children: <Widget>[
Expanded(
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
width: 3,
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
height: 60,
width: 120,
padding: EdgeInsets.only(left: 10),
decoration: BoxDecoration(
border: Border.all(
width: 3,
color: Colors.black,
),
),
child: Align(
alignment: Alignment.centerLeft,
child: Text('Image'),
),
),
Text('Some text centered'),
],
),
),
),
SizedBox(
width: 20,
),
Expanded(
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
width: 3,
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
height: 60,
width: 120,
padding: EdgeInsets.only(left: 10),
decoration: BoxDecoration(
border: Border.all(
width: 3,
color: Colors.black,
),
),
child: Align(
alignment: Alignment.centerLeft,
child: Text('Image'),
),
),
Text('Some text centered'),
],
),
),
),
],
),
),
);
}
}
OUTPUT:
I hope this answers your question.
Create a widget using this post How to to display text over the images in Flutter? which returns an image above and a text below, Wrap two of these widgets using a Row. That should work.
I want to display a list of elements in a row. The problem is that it is not scaled correctly. If I have six elements, it looks nice, but if the list contains only four elements, it doesn't look good. Can someone tell me what I'm doing wrong?
Code:
Container(
height: 100,
margin: marginMediumHorizontal,
decoration: decorationLight,
alignment: Alignment.center,
child: Row(
children: <Widget>[
...model.gridListItems.map(
(element) => Expanded(
child: Container(
margin: EdgeInsets.symmetric(horizontal: 5, vertical: 5),
decoration: decorationDark,
padding: EdgeInsets.all(5),
child: Image(
color: lightGrayLimeGreen,
image: AssetImage(element['icon']),
fit: BoxFit.contain,
),
),
),
),
],
),
),
Thanks a lot for your help.
Use Flexible widget instead of Expanded and give each widget as flex : 1 It'll do the trick itself.
Container(
height: 100,
margin: marginMediumHorizontal,
decoration: decorationLight,
alignment: Alignment.center,
child: Row(
children: <Widget>[
...model.gridListItems.map(
(element) => Flexible(
flex : 1,
child: Container(
margin: EdgeInsets.symmetric(horizontal: 5, vertical: 5),
decoration: decorationDark,
padding: EdgeInsets.all(5),
child: Image(
color: lightGrayLimeGreen,
image: AssetImage(element['icon']),
fit: BoxFit.contain,
),
),
),
),
],
),
),