Flutter - Expanded doesn't take all available space when a sibling is Flexible

Question

Image of the problem, shown as colored rectangles

I want the first child of Column to be Flexible and the second to take up the entire remaining space. Apparently, this does not work.

I'm now aware that this is the expected behavior. I would appreciate a workaround.

I've tried using FittedBox on the first child instead of Flexible, but it didn't work as the content of the first child has unbounded width.

SizedBox(
  height: 300,
  width: 50,
  child: Container(
    color: Colors.black,
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Flexible(
          child: Container(
            height: 100,
            color: Colors.red,
          ),
        ),
        Expanded(
          child: Container(
            color: Colors.blue,
          ),
        ),
      ],
    ),
  ),
);

I want to make the first child (i.e. A TextField) Flexible so that if the height gets too small, there are no ugly yellow-black overflow bars.

Update:

Below image shows what I really want to do, but it has the overflow issue because the first child isn't flexible.

shows what happens when I do use Flexible.

I'm using AnimatedContainer to change the height. I prefer not to use SizeTransition if possible.

you should remove the height parameter from the first container (the red one ) and put the — kaarimtareek, Aug 21 '19 at 23:38
@karimtarek thank you for the suggestion. The code I provided was a simple illustration of my problem. I have updated the question with appropriate examples of what I really want to achieve. — Hussain, Aug 22 '19 at 01:36
I think you just need to set the height and width of your parent `Container`. `Expanded` always take remaining space on any `Column` or `Row` (if you don't change flex property of course) — Rodolfo Franco, Aug 22 '19 at 03:04
@RodolfoFranco that didn't work either. I found this same issue reported on GitHub over [here](https://github.com/flutter/flutter/issues/20575). So far there is nothing else on the subject. This behavior is not unexpected, as it can be understood by the rémi-rousselet's answer on [this question.](https://stackoverflow.com/questions/52645944/flutter-expanded-vs-flexible). — Hussain, Aug 22 '19 at 15:38

score 0 · Answer 1 · answered Aug 30 '20 at 19:03

Just replace your code with the next one (flexes ratio can be adjusted to the right one):

SizedBox(
  height: 300,
  width: 50,
  child: Container(
    color: Colors.black,
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Flexible(
          flex:1
          child: Container(
            height: 100,
            color: Colors.red,
          ),
        ),
        Flexible(
          flex:10
          child: Container(
            color: Colors.blue,
          ),
        ),
      ],
    ),
  ),
);

Flutter - Expanded doesn't take all available space when a sibling is Flexible

1 Answers1