Home > database >  Is there any way to set the max size of the Expanded or Flex widget in Flutter?
Is there any way to set the max size of the Expanded or Flex widget in Flutter?

Time:12-22

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: enter image description here

  1. 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: enter image description here

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: enter image description here

Unshrinked:enter image description here

  • Related