skills/flutter/references/layout-stack.md

name	description
layout-stack	Flutter Stack layout - Stack, Positioned, alignment, and overlapping widgets

Stack Layout

Stack allows widgets to be positioned on top of each other, useful for overlapping content.

Basic Stack

Stack(
  children: [
    Container(width: 200, height: 200, color: Colors.blue),
    Container(width: 100, height: 100, color: Colors.red),
  ],
)

Stack Alignment

Control how non-positioned children are aligned.

Stack(
  alignment: Alignment.center, // How to align non-positioned children
  children: [
    Container(width: 200, height: 200, color: Colors.blue),
    Container(width: 100, height: 100, color: Colors.red), // 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

Positioned Widget

Position children at specific locations.

Stack(
  children: [
    Container(width: 200, height: 200, color: Colors.blue),
    Positioned(
      top: 10,
      left: 10,
      child: Container(width: 50, height: 50, color: Colors.red),
    ),
    Positioned(
      bottom: 10,
      right: 10,
      child: Container(width: 50, height: 50, color: Colors.green),
    ),
  ],
)

Positioned Properties

Positioned(
  // Specify all edges
  top: 10,
  right: 10,
  bottom: 10,
  left: 10,
  
  // Or use width/height with edges
  top: 10,
  left: 10,
  width: 100,
  height: 100,
  
  // Or use fill to fill entire stack
  fill: true,
  
  child: Container(color: Colors.red),
)

Stack Fit

Control how non-positioned children are sized.

Stack(
  fit: StackFit.loose, // Children can be smaller than stack (default)
  children: [...],
)

Stack(
  fit: StackFit.expand, // Children fill stack size
  children: [
    Container(), // Fills entire stack
  ],
)

Stack(
  fit: StackFit.passthrough, // Use parent's constraints
  children: [...],
)

Clip Behavior

Control clipping of children.

Stack(
  clipBehavior: Clip.none, // No clipping (default)
  children: [
    Positioned(
      top: -10, // Can extend outside stack
      child: Container(...),
    ),
  ],
)

Stack(
  clipBehavior: Clip.hardEdge, // Clip with hard edges
  children: [...],
)

Stack(
  clipBehavior: Clip.antiAlias, // Clip with anti-aliasing
  children: [...],
)

Common Patterns

Overlay Badge

Stack(
  children: [
    Container(
      width: 100,
      height: 100,
      color: Colors.blue,
    ),
    Positioned(
      top: 0,
      right: 0,
      child: Container(
        width: 20,
        height: 20,
        decoration: BoxDecoration(
          color: Colors.red,
          shape: BoxShape.circle,
        ),
        child: Center(
          child: Text('3', style: TextStyle(color: Colors.white, fontSize: 12)),
        ),
      ),
    ),
  ],
)

Centered Content with Background

Stack(
  alignment: Alignment.center,
  children: [
    Container(
      width: 200,
      height: 200,
      decoration: BoxDecoration(
        color: Colors.blue,
        shape: BoxShape.circle,
      ),
    ),
    Text('Centered', style: TextStyle(color: Colors.white)),
  ],
)

Multiple Overlays

Stack(
  children: [
    // Background
    Container(width: 200, height: 200, color: Colors.grey),
    
    // Content
    Center(child: Text('Content')),
    
    // Top overlay
    Positioned(
      top: 10,
      left: 10,
      child: Icon(Icons.star, color: Colors.amber),
    ),
    
    // Bottom overlay
    Positioned(
      bottom: 10,
      right: 10,
      child: Icon(Icons.favorite, color: Colors.red),
    ),
  ],
)

Key Points

• Use Stack to overlap widgets
• Use alignment to position non-positioned children
• Use Positioned to place children at specific locations
• Use fit to control how children fill the stack
• Use clipBehavior to control clipping
• Children are painted in order (first child is bottom layer)
• Positioned children ignore alignment
• Use Stack for badges, overlays, and layered content