Flutter Container

The versatile box widget for styling and layout

📦 What is Container?

Container is Flutter's most versatile widget for styling and positioning. It combines painting, positioning, and sizing widgets into one convenient box, perfect for creating styled layouts with colors, borders, and shadows. 


// Simple Container example
Container(
  width: 100,
  height: 100,
  color: Colors.blue,
)

Output:

Key Container Properties

🎨

Color & Decoration

Add colors and backgrounds 

Container(
  color: Colors.blue,
  // or
  decoration: BoxDecoration(
    color: Colors.red,
  ),
)
📐

Width & Height

Set container dimensions 

Container(
  width: 200,
  height: 150,
  color: Colors.green,
)
🔲

Padding & Margin

Add spacing inside and outside 

Container(
  padding: EdgeInsets.all(20),
  margin: EdgeInsets.all(10),
  child: Text('Hello'),
)
✨

Decoration

Borders, shadows, and gradients 

Container(
  decoration: BoxDecoration(
    border: Border.all(),
    borderRadius: 
      BorderRadius.circular(10),
  ),
)

🔹 Basic Container with Color

Create a simple colored box: 

Container(
  width: 150,
  height: 150,
  color: Colors.purple,
  child: Center(
    child: Text(
      'Hello',
      style: TextStyle(color: Colors.white, fontSize: 24),
    ),
  ),
)

Output:

Hello

🔹 Container with Padding and Margin

Add spacing inside and outside the container: 

Container(
  margin: EdgeInsets.all(20),
  padding: EdgeInsets.all(30),
  color: Colors.blue,
  child: Text(
    'Padded Text',
    style: TextStyle(color: Colors.white),
  ),
)

Output:

Padded Text

🔹 Container with Border and Rounded Corners

Add borders and make corners round: 

Container(
  width: 200,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border.all(
      color: Colors.blue,
      width: 3,
    ),
    borderRadius: BorderRadius.circular(15),
  ),
  child: Center(
    child: Text('Rounded Box'),
  ),
)

Output:

Rounded Box

🔹 Container with Shadow

Add shadow effects to containers: 

Container(
  width: 180,
  height: 120,
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(10),
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 5,
        blurRadius: 7,
        offset: Offset(0, 3),
      ),
    ],
  ),
  child: Center(
    child: Text('Shadow Box'),
  ),
)

Output:

Shadow Box

🔹 Practical Container Example

Create a styled profile card: 

Container(
  width: 300,
  padding: EdgeInsets.all(20),
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [Colors.blue, Colors.purple],
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
    ),
    borderRadius: BorderRadius.circular(20),
    boxShadow: [
      BoxShadow(
        color: Colors.black26,
        blurRadius: 10,
        offset: Offset(0, 5),
      ),
    ],
  ),
  child: Column(
    children: [
      CircleAvatar(
        radius: 40,
        backgroundColor: Colors.white,
        child: Icon(Icons.person, size: 40),
      ),
      SizedBox(height: 15),
      Text(
        'Jane Smith',
        style: TextStyle(
          color: Colors.white,
          fontSize: 22,
          fontWeight: FontWeight.bold,
        ),
      ),
      Text(
        'UI/UX Designer',
        style: TextStyle(color: Colors.white70),
      ),
    ],
  ),
)

Output:

👤
Jane Smith
UI/UX Designer

🧠 Test Your Knowledge

Which property adds space inside a Container?