Flutter Container Widget

Flutter Container Widget: Complete Guide with Examples (2026)

Last Updated: October 2026 | Author: Deep Singh

The Container widget is one of the most used widgets in Flutter. It's a simple box that can hold a child, apply padding, margins, background colours, borders, gradients, shadows, and transforms — all in one place. If you're building any kind of UI, you'll reach for a Container almost immediately.

In this tutorial, you'll see how the Container behaves in different scenarios: with no child, with a child, with a fixed size, with a gradient, with an image, and more. Every example includes the source code and the output it produces.

What We'll Cover

1. Container Basics
2. Empty Container
3. Background Colour
4. Container with a Child
5. Full Width Container
6. Aligning the Container
7. Fixed Size Container
8. Transform (Rotation)
9. Linear Gradient
10. Radial Gradient
11. Background Colour via BoxDecoration
12. Image via BoxDecoration
13. Image with BoxFit
14. Shadow and Image Filter
15. Border Radius with Shadow
16. Shape and Border Colour
17. Wrapping Up

Container Basics

A Container is a convenience widget that combines several common painting, positioning, and sizing widgets into one. It can:

• Contain a single child widget
• Apply padding and margin
• Set width and height
• Apply a background colour or decoration
• Apply a transform (rotate, scale, translate)

If the Container has no child, it expands to fill the area given by its parent. If it has a child, it wraps the child's size (unless you give it explicit dimensions).

The Container can only have one child. If you need to lay out multiple children, put a Row, Column, or Stack inside it and give that widget the children.

Empty Container

An empty Container just fills the space available to it. In this example, it fills the whole body of the Scaffold — which looks like a blank white screen.

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    debugShowCheckedModeBanner: false,
    title: 'My App',
    home: ContainerWidget(),
    // theme: ThemeData(primarySwatch: Colors.pink),
  ));
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Container Widget Tutorial'),
      ),
      body: Container(),
    );
  }
}

Output:

An empty Container fills the entire screen

Background Colour

To give the Container a background colour, just set the color property.

body: Container(
  color: Colors.pinkAccent,
),

Output:

Container with a pink background

Note: You can't use both color and decoration with a colour inside it — Flutter will throw an error. Use one or the other.

Container with a Child

When you add a child to the Container, the Container wraps the child's size by default.

body: Container(
  color: Colors.pinkAccent,
  child: ElevatedButton(
    child: const Text('Click Me'),
    onPressed: () {},
  ),
),

Output:

Container wraps the button's size

Full Width Container

To make the Container span the full screen width, use MediaQuery.of(context).size.width.

body: Container(
  color: Colors.pinkAccent,
  width: MediaQuery.of(context).size.width,
  child: ElevatedButton(
    child: const Text('Click Me'),
    onPressed: () {},
  ),
),

Output:

Container spanning full width

Aligning the Container

Wrap the Container in an Align widget to position it anywhere on the screen. Here it's pinned to the bottom.

body: Align(
  alignment: Alignment.bottomCenter,
  child: Container(
    color: Colors.pinkAccent,
    width: MediaQuery.of(context).size.width,
    child: ElevatedButton(
      child: const Text('Click Me'),
      onPressed: () {},
    ),
  ),
),

Output:

Container aligned to the bottom

Fixed Size Container

Give the Container explicit width and height to lock its size.

body: Align(
  alignment: Alignment.bottomCenter,
  child: Container(
    color: Colors.pinkAccent,
    width: 200,
    child: ElevatedButton(
      child: const Text('Click Me'),
      onPressed: () {},
    ),
  ),
),

Output:

Container with a fixed 200px width

Transform (Rotation)

The transform property applies a matrix transformation. Here we rotate the Container 0.5 radians around the Z axis.

body: Align(
  alignment: Alignment.bottomCenter,
  child: Container(
    color: Colors.pinkAccent,
    width: 200,
    transform: Matrix4.rotationZ(0.5),
    child: ElevatedButton(
      child: const Text('Click Me'),
      onPressed: () {},
    ),
  ),
),

Output:

Container rotated with a Matrix4 transform

Linear Gradient

To use a gradient, you need to use decoration instead of color. A LinearGradient blends colours along a straight line.

body: Align(
  alignment: Alignment.bottomCenter,
  child: Container(
    width: 200,
    decoration: const BoxDecoration(
      gradient: LinearGradient(
        colors: [Colors.green, Colors.red, Colors.yellowAccent],
      ),
    ),
    child: ElevatedButton(
      child: const Text('Click Me'),
      onPressed: () {},
    ),
  ),
),

Output:

Linear gradient on a Container

Important: You cannot set both color and decoration. Pick one.

Radial Gradient

A RadialGradient radiates outward from the centre.

body: Align(
  alignment: Alignment.bottomCenter,
  child: Container(
    width: 200,
    decoration: const BoxDecoration(
      gradient: RadialGradient(
        colors: [Colors.green, Colors.red, Colors.yellowAccent],
      ),
    ),
    child: ElevatedButton(
      child: const Text('Click Me'),
      onPressed: () {},
    ),
  ),
),

Output:

Radial gradient on a Container

Background Colour via BoxDecoration

You can also set the background colour inside BoxDecoration. This is useful when you need other decoration properties alongside the colour.

body: Align(
  alignment: Alignment.bottomCenter,
  child: Container(
    width: 200,
    decoration: const BoxDecoration(
      color: Colors.green,
    ),
    child: ElevatedButton(
      child: const Text('Click Me'),
      onPressed: () {},
    ),
  ),
),

Output:

Background colour set inside BoxDecoration

Image via BoxDecoration

You can set a background image using DecorationImage inside BoxDecoration.

body: Align(
  alignment: Alignment.center,
  child: Container(
    width: 200,
    height: 200,
    decoration: BoxDecoration(
      color: Colors.green,
      image: DecorationImage(
        image: NetworkImage('https://www.drivespark.com/images..'),
      ),
    ),
  ),
),

Output:

Container with a background image

Image with BoxFit

By default, the image is centred at its natural size. Use fit: BoxFit.cover to make it fill the Container, cropping as needed.

body: Align(
  alignment: Alignment.center,
  child: Container(
    width: 200,
    height: 200,
    decoration: BoxDecoration(
      color: Colors.green,
      image: DecorationImage(
        image: NetworkImage('https://www.drivespark.com/images..'),
        fit: BoxFit.cover,
      ),
    ),
  ),
),

Output:

Image scaled with BoxFit.cover

Shadow and Image Filter

Use boxShadow to add a drop shadow, and colorFilter on the image to tint it.

body: Align(
  alignment: Alignment.center,
  child: Container(
    width: 200,
    height: 200,
    decoration: BoxDecoration(
      color: Colors.green,
      image: DecorationImage(
        image: NetworkImage('https://www.drivespark.com/images..'),
        fit: BoxFit.cover,
        colorFilter: ColorFilter.linearToSrgbGamma(),
      ),
      boxShadow: const [
        BoxShadow(color: Colors.grey, offset: Offset(6.0, 6.0)),
      ],
    ),
  ),
),

Output:

Shadow and colour filter applied

Border Radius with Shadow

Add borderRadius to round the corners of the Container.

body: Align(
  alignment: Alignment.center,
  child: Container(
    width: 200,
    height: 200,
    decoration: BoxDecoration(
      color: Colors.green,
      image: DecorationImage(
        image: NetworkImage('https://www.drivespark.com/images..'),
        fit: BoxFit.cover,
        colorFilter: ColorFilter.linearToSrgbGamma(),
      ),
      boxShadow: const [
        BoxShadow(color: Colors.grey, offset: Offset(6.0, 6.0)),
      ],
      borderRadius: BorderRadius.circular(8),
    ),
  ),
),

Output:

Rounded corners with a shadow

Shape and Border Colour

Use shape: BoxShape.circle to make the Container circular, and Border.all() to add a border. Note that when using a circle shape, you can't also use borderRadius — pick one.

body: Align(
  alignment: Alignment.center,
  child: Container(
    width: 200,
    height: 200,
    decoration: BoxDecoration(
      color: Colors.green,
      image: DecorationImage(
        image: NetworkImage('https://www.drivespark.com/images..'),
        fit: BoxFit.cover,
        colorFilter: ColorFilter.linearToSrgbGamma(),
      ),
      boxShadow: const [
        BoxShadow(color: Colors.grey, offset: Offset(6.0, 6.0)),
      ],
      border: Border.all(color: Colors.yellowAccent, width: 4),
      shape: BoxShape.circle,
    ),
  ),
),

Output:

Circular Container with a yellow border

Wrapping Up

The Container widget is one of the most versatile in Flutter. It combines sizing, alignment, colour, decoration, and transforms into a single widget. Once you're comfortable with it, you'll use it in almost every screen you build.

A few things to remember:

• Don't use both color and decoration. Flutter throws an assertion error if you do. Pick one.
• Don't use both borderRadius and shape: BoxShape.circle. Same reason — the two are mutually exclusive.
• Container can only hold one child. For multiple children, use a Row, Column, or Stack inside the Container.
• Empty Container fills its parent. If you want it to size to zero, give it explicit dimensions or a child.
• Use const where possible. Every example above uses const for the decoration and child widgets to help Flutter skip unnecessary rebuilds.