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

Question

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.

Can you share some images of what you are getting right now and what do you want to get? — Risheek Mittal, Dec 22 '22 at 07:22
Constraints go down, sizes go up. So your container constraints have no effect on the flexible. Any constraints on the flexible need to be above it, which means above the row. — GrahamD, Dec 22 '22 at 07:35

Risheek Mittal · Accepted Answer · 2022-12-22T10:02:58.340

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:

Thanks, but this isn't what I want. I uploaded a new picture of what I want ( https://i.stack.imgur.com/dXScz.png ) — DoggieDoggy, Dec 22 '22 at 09:32
All. The blue one is Expanded, but has max width. Even if the horizontal size of the screen increases endlessly, the blue one only extends to the maximum size. — DoggieDoggy, Dec 22 '22 at 09:42
Then it is even easier to do wait lemme add some code for you — Risheek Mittal, Dec 22 '22 at 09:48
It works! Thank you so much! I can sleep comfortably today XD — DoggieDoggy, Dec 22 '22 at 10:13
Oh, now I marked it! And I also upvoted it, but I need at least 15 reputation to cast a vote, so it won't be visible. — DoggieDoggy, Dec 22 '22 at 11:16

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

1 Answers1