5

Sometimes I want to force a widget to take a specific size, which I usually do by using a SizedBox/ConstrainedBox/Container

But I've realized that in some situations, the widget merely ignores it and takes a different size. Why is that?

Example:

Expected behavior:

enter image description here

Actual behavior:

enter image description here

Rémi Rousselet
  • 256,336
  • 79
  • 519
  • 432

1 Answers1

30

This situation happens when the parent and its child wants two different sizes; but the parent has no idea how it should align its child within its boundaries.

The following code doesn't give enough information to tell how to align the red box within the blue box:

Container(
  color: Colors.blue,
  width: 42,
  height: 42,
  child: Container(
    color: Colors.red,
    width: 24,
    height: 24,
  ),
),

So while it could be centered as such:

enter image description here

it would also be perfectly reasonable to expect the following alignment instead:

enter image description here

In that situation, since Flutter doesn't know how to align the red box, it will go with an easier solution:

Don't align the red box, and force it to take all the available space; which leads to:

enter image description here

To solve this issue, the solution is to explicitly tell Flutter how to align the child within its parent boundaries.

The most common solution is by wrapping the child into an Align widget:

Container(
  color: Colors.blue,
  width: 42,
  height: 42,
  child: Align(
    alignment: Alignment.center,
    child: Container(
      color: Colors.red,
      width: 24,
      height: 24,
    ),
  ),
),

Some widgets such as Container or Stack will also offer an alignment property to achieve similar behavior.

Rémi Rousselet
  • 256,336
  • 79
  • 519
  • 432
  • It's a feature. This allows some pretty big optimizations, make things customizable and involves no "dark magic" – Rémi Rousselet Dec 29 '18 at 20:36
  • i feel a lot of sarcasm and irony here, but may be wrong ;-) btw as you said its better to use `Container#alignment` property as it adds `Align` widget during [build()](https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/widgets/container.dart#L362) – pskink Dec 29 '18 at 20:38
  • 1
    There's no sarcasm at all! That's one aspect I truly enjoy with Flutter. It makes the layout very predictable once you know how it works. I've answered dozens of SO questions about layout, without running any code at all. Which is something impossible with any other technology – Rémi Rousselet Dec 29 '18 at 22:21
  • 1
    Nice catch but, Flutter should give a warning at least if flutter chooses a certain non obvious for many to scale things bigger than it is originally set by the developer code, it can say for ex." not enough constraints" or so!. – Saed Nabil Dec 29 '18 at 23:04
  • @SaedNabil a warning doesn't make sense. There are many situations where this behavior comes in handy, such as https://stackoverflow.com/questions/49691052/flutter-how-to-make-a-button-expand-to-the-size-of-its-parent – Rémi Rousselet Dec 29 '18 at 23:24
  • I see your point but ,conceptually being handy is different from being unexpected, some bugs when sometimes handy and have certain desired behavior ,what we do? we call it features :) ,my point is when there is such unexpected behavior it should be documented well as a feature or piping up as a warning. – Saed Nabil Dec 30 '18 at 00:51
  • This is not unexpected at all. That is the most basic rules of constraints: Children must respect their parent constraints. – Rémi Rousselet Dec 30 '18 at 01:16
  • Yes, that is exactly a perfect statement unless children have it is own hight and widths, take for ex. constraint layout in android when you want a child layout to match parent constraints the editor will automatically change the width and hight to be match-constraint or 0dp for the exact same logic I am concerned about . -and sorry for the unintended answer I deleted if you have a way to delete it it will be great :) – Saed Nabil Dec 30 '18 at 05:20
  • I don't get where you're going. That behavior is intended by design – Rémi Rousselet Dec 30 '18 at 10:25
  • 1
    you saved me a minor headache – vanlooverenkoen Jul 20 '19 at 19:41
  • 1
    Surely this should have been in the Flutter documentation? – user48956 Nov 17 '20 at 18:33