Container widget in Flutter

Introduction

A Container widget helps you group and style parts of your app's screen. It can add space, color, borders, and size to its child widget.

When you want to add padding or margin around a button or text.

When you want to give a background color to a part of your app.

When you want to set a fixed width or height for a widget.

When you want to add a border or rounded corners around something.

When you want to position a widget with some space around it.

Syntax

Flutter

Container(
  width: double?,
  height: double?,
  padding: EdgeInsets?,
  margin: EdgeInsets?,
  decoration: BoxDecoration?,
  child: Widget?
)

width and height set the size of the container.

padding adds space inside the container around the child.

Examples

A simple container with blue background and a text inside.

Flutter

Container(
  color: Colors.blue,
  child: Text('Hello')
)

A red square container with rounded corners, margin outside, and a white star icon inside.

Flutter

Container(
  width: 100,
  height: 100,
  margin: EdgeInsets.all(10),
  decoration: BoxDecoration(
    color: Colors.red,
    borderRadius: BorderRadius.circular(8),
  ),
  child: Icon(Icons.star, color: Colors.white),
)

Sample App

This app shows a green square container with rounded corners and a black border. Inside, there is white text centered with padding around it. The container also has margin space outside it.

Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Container Example')),
        body: Center(
          child: Container(
            width: 150,
            height: 150,
            padding: const EdgeInsets.all(20),
            margin: const EdgeInsets.all(30),
            decoration: BoxDecoration(
              color: Colors.green,
              borderRadius: BorderRadius.circular(15),
              border: Border.all(color: Colors.black, width: 3),
            ),
            child: const Center(
              child: Text(
                'Hi Flutter!',
                style: TextStyle(color: Colors.white, fontSize: 18),
                textAlign: TextAlign.center,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Important Notes

If you only set color on Container, it applies directly. But if you use decoration, set color inside BoxDecoration.

Container tries to be as big as possible if no size is set. Use width and height to control size.

Use padding to add space inside the container, and margin to add space outside it.

Summary

Container is a box that holds and styles one child widget.

You can control size, color, padding, margin, and borders with Container.

It helps organize and decorate your app's layout easily.

Practice

1. What is the primary purpose of the Container widget in Flutter?

easy

A. To manage app navigation between screens

B. To handle user input events like taps and swipes

C. To fetch data from the internet

D. To hold and style a single child widget with size, color, and padding

Solution

1. Step 1: Understand Container's role

   The Container widget is designed to hold one child widget and apply styling like size, color, padding, and margin.

2. Step 2: Compare with other options

   Navigation, data fetching, and input handling are done by other widgets or classes, not Container.

3. Final Answer:

   To hold and style a single child widget with size, color, and padding -> Option D

4. Quick Check:

   Container = styling box for one child [OK]

Hint: Container styles one child widget visually [OK]

Common Mistakes:

• Confusing Container with navigation widgets
• Thinking Container handles user input
• Assuming Container manages data fetching

2. Which of the following is the correct way to set a fixed width and height of 100 pixels for a Container?

easy

A. Container(constraints: BoxConstraints(width: 100, height: 100))

B. Container(size: Size(100, 100))

C. Container(width: 100.0, height: 100.0)

D. Container(dimensions: {width: 100, height: 100})

Solution

1. Step 1: Recall Container size properties

   Container uses width and height properties inside a BoxConstraints via constraints or directly in width and height parameters.

2. Step 2: Check syntax correctness

   Width and height expect double values, so 100.0 is correct. Other options use invalid syntax: no size property, constraints: BoxConstraints(width: 100, height: 100) is wrong as BoxConstraints uses minWidth/maxWidth, no dimensions.

3. Final Answer:

   Container(width: 100.0, height: 100.0) -> Option C

4. Quick Check:

   Width and height use double values [OK]

Hint: Use width and height as doubles for Container size [OK]

Common Mistakes:

• Using non-existent 'size' or 'dimensions' properties
• Using BoxConstraints with invalid 'width'/'height' parameters
• Confusing Container size with padding

3. What will be the background color of this Container?

Container(
  width: 100.0,
  height: 100.0,
  color: Colors.blue,
  child: Container(
    color: Colors.red,
    width: 50,
    height: 50,
  ),
)

medium

A. Blue background with a smaller red box inside

B. Red background with a smaller blue box inside

C. Only blue background visible, red ignored

D. Only red background visible, blue ignored

Solution

1. Step 1: Understand nested Containers

   The outer Container has a blue color and contains a smaller inner Container colored red with fixed size 50x50.

2. Step 2: Visualize layering

   The outer Container's blue color fills its area. The inner Container is smaller and red, so it appears as a red box inside the blue background.

3. Final Answer:

   Blue background with a smaller red box inside -> Option A

4. Quick Check:

   Outer color shows behind inner smaller Container [OK]

Hint: Inner Container overlays outer Container color [OK]

Common Mistakes:

• Thinking inner Container replaces outer color
• Assuming colors blend automatically
• Ignoring size difference between Containers

4. Identify the error in this Container code:

Container(
  padding: EdgeInsets.all(10),
  margin: EdgeInsets.symmetric(horizontal: 20),
  color: Colors.green,
  child: Text('Hello'),
  width: 100,
  height: 50,
  decoration: BoxDecoration(borderRadius: BorderRadius.circular(8)),
)

medium

A. EdgeInsets.symmetric requires vertical parameter

B. Cannot use both color and decoration properties together

C. Text widget cannot be child of Container

D. width and height must be inside decoration

Solution

1. Step 1: Check Container property rules

   Container's color and decoration cannot be used together because color should be inside BoxDecoration if decoration is used.

2. Step 2: Verify other properties

   EdgeInsets.symmetric with only horizontal is valid, Text can be child, width and height are direct Container properties, not inside decoration.

3. Final Answer:

   Cannot use both color and decoration properties together -> Option B

4. Quick Check:

   color and decoration are mutually exclusive [OK]

Hint: Use color inside decoration or alone, not both [OK]

Common Mistakes:

• Using color and decoration simultaneously
• Misunderstanding EdgeInsets.symmetric usage
• Placing width/height inside decoration

5. You want to create a Container with a red border of 3 pixels, rounded corners of 12 pixels, padding of 16 pixels inside, and a fixed size of 150x150. Which code snippet correctly achieves this?

hard

A. Container(
width: 150,
height: 150,
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 3),
borderRadius: BorderRadius.circular(12),
),
child: Text('Styled Box'),
)

B. Container(
width: 150,
height: 150,
margin: EdgeInsets.all(16),
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 3),
borderRadius: BorderRadius.circular(12),
),
child: Text('Styled Box'),
)

C. Container(
width: 150,
height: 150,
padding: EdgeInsets.all(16),
color: Colors.red,
borderRadius: BorderRadius.circular(12),
child: Text('Styled Box'),
)

D. Container(
width: 150,
height: 150,
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
border: Border.all(color: Colors.red),
borderRadius: BorderRadius.circular(12),
),
child: Text('Styled Box'),
)

Solution

1. Step 1: Set fixed size and padding

   Width and height are set directly on Container. Padding is set with EdgeInsets.all(16) to add space inside the border.

2. Step 2: Define border and rounded corners in decoration

   Use BoxDecoration with border: Border.all(color: Colors.red, width: 3) for red border 3 pixels thick, and borderRadius.circular(12) for rounded corners.

3. Step 3: Check other options

   Container( width: 150, height: 150, margin: EdgeInsets.all(16), decoration: BoxDecoration( border: Border.all(color: Colors.red, width: 3), borderRadius: BorderRadius.circular(12), ), child: Text('Styled Box'), ) uses margin instead of padding, which adds space outside border. Container( width: 150, height: 150, padding: EdgeInsets.all(16), color: Colors.red, borderRadius: BorderRadius.circular(12), child: Text('Styled Box'), ) incorrectly uses color and borderRadius outside decoration. Container( width: 150, height: 150, padding: EdgeInsets.all(16), decoration: BoxDecoration( border: Border.all(color: Colors.red), borderRadius: BorderRadius.circular(12), ), child: Text('Styled Box'), ) misses border width, default is 1 pixel.

4. Final Answer:

   Container with width, height, padding, and BoxDecoration with red border 3px and 12px radius -> Option A

5. Quick Check:

   Border and radius go inside decoration; padding adds inner space [OK]

Hint: Put border and radius inside decoration, padding outside [OK]

Common Mistakes:

• Using margin instead of padding for inner space
• Setting color and borderRadius outside decoration
• Forgetting border width in Border.all