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,
),
),
],
),
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(
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: