Container fills the screen even when I specify `width` and `height`

Issue

I am working on a flutter project, and I would like to display a Container inside another one with specific sizes. However, when I specify the size of the Containers, it doesn’t take it into consideration.

Here is a code sample:

import 'package:flutter/material.dart';

void main() {
  runApp(MyWidget());
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200.0,
      height: 200.0,
      color: Colors.blue,
      child: Container(
        width: 20.0,
        height: 20.0,
        color: Colors.red,
      ),
    );
  }
}

Here is what I get, I cannot see the blue Container.

What is happening, and what should I do?

Solution

as I mentioned in comment you need to specify where the second box would be

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200.0,
      height: 200.0,
      color: Colors.blue,
      alignment: Alignment.center,
      child: Container(
        width: 20.0,
        height: 20.0,
        color: Colors.red,
      ),
    );
  }
}

Answered By – Nagual

Answer Checked By – Marilyn (FlutterFixes Volunteer)