How to Use Container in Flutter App

When developing mobile applications with Flutter, one of the most commonly used widgets is the Container. This widget is extremely flexible and allows you to design layouts, apply styling, manage alignment, add margins and paddings, and even create custom designs with borders and shadows. In this guide, we will explore everything about how to use Container in Flutter app with step-by-step examples and full code snippets that you can run immediately.

What is a Container in Flutter?

The Container widget in Flutter is a box model widget that combines several common painting, positioning, and sizing widgets. It can be used for layout purposes, styling, or even as a parent wrapper for other widgets. Think of it as a “div” in web development that can hold children and apply styles.

Basic Syntax of Container

Container(
  width: 200,
  height: 100,
  color: Colors.blue,
  child: Center(
    child: Text("Hello Container"),
  ),
)

In the example above, we created a blue rectangle with text aligned in the center. The width and height define its size, while color defines the background color.

Container Properties

Some important properties of Container include:

• width & height: To define the size of the container.
• color: Background color of the container.
• margin: Empty space outside the container.
• padding: Empty space inside the container, around the child widget.
• alignment: Positioning of the child inside the container.
• decoration: Advanced styling like border, border radius, gradient, and shadows.

Example 1: Container with Padding and Margin

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Flutter Container Example")),
        body: Center(
          child: Container(
            width: 200,
            height: 100,
            padding: EdgeInsets.all(20),
            margin: EdgeInsets.all(30),
            color: Colors.green,
            child: Text(
              "Container with Padding and Margin",
              style: TextStyle(color: Colors.white),
              textAlign: TextAlign.center,
            ),
          ),
        ),
      ),
    );
  }
}

In this case, the container has extra spacing outside (margin) and inside (padding) which helps improve layout design.

Example 2: Container with Border and BorderRadius

Container(
  width: 200,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.orange,
    border: Border.all(color: Colors.black, width: 2),
    borderRadius: BorderRadius.circular(15),
  ),
  child: Center(
    child: Text("Rounded Container"),
  ),
)

Using BoxDecoration, you can create a rounded container with borders. This is useful for creating cards, buttons, or styled sections in your app.

Example 3: Container with Gradient Background

Container(
  width: 250,
  height: 120,
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [Colors.blue, Colors.purple],
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
    ),
    borderRadius: BorderRadius.circular(20),
  ),
  child: Center(
    child: Text(
      "Gradient Container",
      style: TextStyle(color: Colors.white, fontSize: 18),
    ),
  ),
)

Gradients are often used to create more attractive backgrounds. Flutter makes it simple with LinearGradient or RadialGradient.

Example 4: Container with Shadow

Container(
  width: 200,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.white,
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 5,
        blurRadius: 7,
        offset: Offset(0, 3),
      ),
    ],
  ),
  child: Center(
    child: Text("Container with Shadow"),
  ),
)

This design can be used to make cards or elevate UI components with Material Design-like shadows.

Use Cases of Container

The Container widget is useful in many real-world scenarios:

1. Card design: Create cards with rounded corners and shadows.
2. Buttons: Custom styled buttons.
3. Banners: Gradient banners with centered text.
4. Layouts: Align and wrap child widgets with spacing.

Comparison: Container vs Other Widgets

While Container is versatile, sometimes other widgets are more efficient. Let’s compare:

Final Thoughts

Knowing how to use Container in Flutter app is essential for any Flutter developer. It provides flexibility to create visually appealing designs, control spacing, and improve user interfaces. Whether you are building simple apps or complex designs, mastering the Container widget will save you time and effort.

For more official documentation, you can check Flutter Container Docs.