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.