Flutter container inside a container

user_653157 0
Viewed 13299

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?

flutter
1 Answers

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,
    ),
  ),
user_95977060
Related