skills/flutter/references/layout-container.md

name	description
layout-container	Flutter Container widget, BoxDecoration, padding, margin, and container styling

Container Widget

Container combines common painting, positioning, and sizing widgets into a single widget.

Basic Container

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

Container Properties

Container(
  // Sizing
  width: 200,
  height: 200,
  constraints: BoxConstraints(
    minWidth: 100,
    maxWidth: 300,
    minHeight: 100,
    maxHeight: 300,
  ),
  
  // Positioning
  alignment: Alignment.center,
  margin: EdgeInsets.all(16),
  padding: EdgeInsets.all(16),
  
  // Decoration
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(8),
  ),
  
  // Foreground decoration
  foregroundDecoration: BoxDecoration(...),
  
  // Transform
  transform: Matrix4.rotationZ(0.1),
  
  // Child
  child: Text('Content'),
)

BoxDecoration

Decorate container with colors, borders, shadows, etc.

BoxDecoration(
  // Color
  color: Colors.blue,
  
  // Border
  border: Border.all(
    color: Colors.black,
    width: 2,
  ),
  
  // Border radius
  borderRadius: BorderRadius.circular(8),
  // Or
  borderRadius: BorderRadius.only(
    topLeft: Radius.circular(8),
    topRight: Radius.circular(8),
  ),
  
  // Box shadow
  boxShadow: [
    BoxShadow(
      color: Colors.black.withOpacity(0.2),
      blurRadius: 4,
      offset: Offset(0, 2),
      spreadRadius: 1,
    ),
  ],
  
  // Gradient
  gradient: LinearGradient(
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
    colors: [Colors.blue, Colors.purple],
  ),
  
  // Shape
  shape: BoxShape.rectangle, // rectangle, circle
)

Padding

Add padding around child.

Container(
  padding: EdgeInsets.all(16), // All sides
  child: Text('Padded'),
)

// Specific sides
Container(
  padding: EdgeInsets.only(
    top: 10,
    left: 20,
    right: 20,
    bottom: 10,
  ),
  child: Text('Padded'),
)

// Symmetric padding
Container(
  padding: EdgeInsets.symmetric(
    horizontal: 20, // left and right
    vertical: 10, // top and bottom
  ),
  child: Text('Padded'),
)

// Or use Padding widget
Padding(
  padding: EdgeInsets.all(16),
  child: Text('Padded'),
)

Margin

Add margin around container.

Container(
  margin: EdgeInsets.all(16),
  child: Container(color: Colors.blue),
)

// Specific sides
Container(
  margin: EdgeInsets.only(
    top: 10,
    left: 20,
  ),
  child: Container(color: Colors.blue),
)

// Or use Margin widget (if using a package)

Alignment

Align child within container.

Container(
  width: 200,
  height: 200,
  alignment: Alignment.center,
  child: Text('Centered'),
)

// Common alignments
alignment: Alignment.topLeft
alignment: Alignment.topCenter
alignment: Alignment.topRight
alignment: Alignment.centerLeft
alignment: Alignment.center
alignment: Alignment.centerRight
alignment: Alignment.bottomLeft
alignment: Alignment.bottomCenter
alignment: Alignment.bottomRight

// Custom alignment
alignment: Alignment(0.5, -0.5) // x, y from -1 to 1

Transform

Apply transformations to container.

Container(
  transform: Matrix4.rotationZ(0.1), // Rotate
  child: Container(...),
)

Container(
  transform: Matrix4.translationValues(10, 10, 0), // Translate
  child: Container(...),
)

Container(
  transform: Matrix4.diagonal3Values(1.5, 1.5, 1.0), // Scale
  child: Container(...),
)

Common Patterns

Card-like Container

Container(
  margin: EdgeInsets.all(16),
  padding: EdgeInsets.all(16),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(8),
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.1),
        blurRadius: 4,
        offset: Offset(0, 2),
      ),
    ],
  ),
  child: Text('Card content'),
)

Rounded Container with Border

Container(
  padding: EdgeInsets.all(16),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(12),
    border: Border.all(
      color: Colors.blue.shade700,
      width: 2,
    ),
  ),
  child: Text('Content', style: TextStyle(color: Colors.white)),
)

Gradient Container

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    gradient: LinearGradient(
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      colors: [
        Colors.blue,
        Colors.purple,
        Colors.pink,
      ],
    ),
    borderRadius: BorderRadius.circular(8),
  ),
  child: Center(child: Text('Gradient')),
)

Key Points

• Container combines sizing, positioning, and decoration
• Use BoxDecoration for visual styling
• Use padding for internal spacing
• Use margin for external spacing
• Use alignment to position child
• Use transform for transformations
• color property is shorthand for BoxDecoration(color: ...)
• When both color and decoration are set, decoration takes precedence
• Use foregroundDecoration for overlays