Fixed (Flexible) and Stretched (Expanded) elements in a Flex in Flutter

Question

In the Flutter layout system, I thought placing a Flexible and and Expanded in a Column would make the Flexible be the size of its children and the Expanded take up the whole remaining space. However, the Expanded does not fill up all of the remaining space and leaves some empty space that follows it.

Here is what I want to do:

+-----------------------------+
| Flexible, decides own size. |
+-----------------------------+
| Expanded, fills up the rest |
|                             |
|                             |
|                             |
|                             |
|                             |
|                             |
|                             |
|                             |
|                             |
+-----------------------------+

However, this is what happens instead:

+-----------------------------+
| Flexible, decides own size. |
+-----------------------------+
| Expanded, takes up only     |
| some of the remaining space |
| looks like about 50% of     |
| the whole parent            |
|                             |
|                             |
+-----------------------------+
| LOL here's unused space     |
| for no good reason          |
|                             |
+-----------------------------+

I was doubting myself, then I saw the same thing reported as a bug for a row: https://github.com/flutter/flutter/issues/20575

I guess my question is, how can I have a fixed-size widget (whose size is determined by its children), followed by a widget that takes up the rest of the parent?

Answer 1

Ok, the answer is just to omit the Flexible in the first one and just put its contents there. Then, the Expanded fills up the rest of the space just fine.

So the solution is this:

+------------------------------+
| Just put your self-sized     |
| widget here without Flexible |
+------------------------------+
| Expanded, fills up the rest  |
|                              |
|                              |
|                              |
|                              |
|                              |
|                              |
|                              |
|                              |
|                              |
+------------------------------+