Flutter container inside a container

Question

I'm practicing with flutter Container these days, and this example I came up with is simply astonishing

I put a Container of size 50x50 inside a Container of size 200x200. Strange is that the inner Container expand to 200x200 even though it has a tight constraint of 50x50.

Here's the code

Container(   width: 200.0,   height: 200.0,   color: Colors.orange,   child: Container(     width: 50.0,     height: 50.0,     color: Colors.blue,   ), ) 

I expect a small blue box inside a bigger orange box.

Could someone explain why?

Answer 1

You need to specify where in the orange box you would like the blue box displayed, otherwise the blue box will grow to the size of its parent.

  Container(     width: 200.0,     height: 200.0,     color: Colors.orange,     alignment: Alignment.center, // where to position the child     child: Container(       width: 50.0,       height: 50.0,       color: Colors.blue,     ),   ),