CODEWITHSUNDEEP
flutter
osamu
osamu

Reputation: 1112

Flutter container inside a container

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?

Upvotes: 45

Views: 23393

Answers (2)

maryam hashemi
maryam hashemi

Reputation: 21

In the code below we created a container that has a child called text and tried to style them a bit to make them look better.

Container(
  width: double.infinity,
  decoration: BoxDecoration(
    color: Colors.amber,
    borderRadius: BorderRadius.circular(15)
  ),
  padding: const EdgeInsets.all(10),
  margin: const EdgeInsets.all(10),
  child: const Text('orange juice is very delicious',
     textAlign: TextAlign.center,
     style: TextStyle(
       color: Colors.white,
       fontSize: 22,
       fontWeight: FontWeight.bold
     ),
  ),
),

Upvotes: 0

Richard Heap
Richard Heap

Reputation: 51682

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

Upvotes: 110

Related Questions