Flutter Container inside a Container and Text widget

Question

Container(
          color: Colors.green,
          width: 300,
          height: 300,
          child: Container(
            color: Colors.purple,
            width: 200,
            height: 200,
          ),
        ),

when I do this why the child container size is the same as parent container size? but when i pass alignment: Alignment.center inside the parent container, this give a expected output?

Output

Answer 1

Because the parent widget forces the child widget to be the same exact size.

From the docs:

If a child wants a different size from its parent and the parent doesn't have enough information to align it, then the child's size might be ignored. Be specific when defining alignment.

You could also wrap the inner Container in a Center widget and it would also work.

See the examples here https://docs.flutter.dev/development/ui/layout/constraints