Search code examples
flutterflutter-layout

Why does container fill up the entire space?

I'm having a hard time understanding the following example from the official Flutter docs:

enter image description here

Following the famous "Constraints go down. Sizes go up. Parent sets position" rule and assuming the screen size is 1024x800 shouldn't the conversation between the widgets look like this:

Parent: "You must be from 0 to 1024 pixels wide and 0 to 800 pixels tall".

Child (the red container): "Ok. I want to be 100 pixels wide and 100 pixels tall".

According to the docs, however, the parent is forcing the child to occupy the entire screen.

So why does it do this instead of letting the child be 100x100?

Solution

  • as per my knowledge, when we are talk about constrains, there are 2 mandatory fields.

    • Size
    • Position

    and also its has mentioned on documentation. there are some limitations

    • widget usually can’t have any size it wants.
    • widget can’t know and doesn’t decide its own position in the screen

    in Example 2, as you mentioned, the container only has Size , but doesn't know where it is on the screen. that's why the Container fills the screen.

    by adding Aligment will set the position of the container. thats why in example 3 , when its wraped with Center the size = 100x100

    because now the container has 2 mandatory fields:

    • Size : 100x100
    • Position : in the center of the screen ( Alignment.center )