Flutter Stack & Positioned Guide: Overlay Widgets Like a Pro (2025)

What is the Stack Widget?

The Row and Column widgets never let widgets touch each other. But what if you want to place text on top of an image? Or create a red notification badge on an icon?

That is where the Stack comes in. It allows you to layer widgets on top of each other, just like layers in Photoshop.

🥞 1. The Basic Stack

By default, the Stack places everything in the top-left corner.

Stack(
  alignment: Alignment.center, // Centers all layers
  children: [
    // Layer 1 (Bottom)
    Container(
      width: 200, 
      height: 200, 
      color: Colors.blue
    ),
    // Layer 2 (Top)
    Text(
      "Overlay Text", 
      style: TextStyle(color: Colors.white)
    ),
  ],
)
        

📍 2. The Positioned Widget

To move items around inside a Stack, wrap them in a Positioned widget. This is magic for creating floating UI elements.

Stack(
  children: [
    Container(width: 300, height: 300, color: Colors.grey),
    
    // Place this 10 pixels from the bottom-right
    Positioned(
      bottom: 10,
      right: 10,
      child: Icon(Icons.favorite, color: Colors.red),
    ),
  ],
)
        

✨ Real World Use Case: Notification Badge

This is the most common interview question involving Stack.

Stack(
  children: [
    Icon(Icons.notifications, size: 40),
    Positioned(
      right: 0,
      top: 0,
      child: CircleAvatar(
        radius: 8,
        backgroundColor: Colors.red,
        child: Text('3', style: TextStyle(fontSize: 10)),
      ),
    ),
  ],
)
            

Conclusion

Use Stack whenever you need layers. Combine it with Positioned to pinpoint exactly where items should go.

Ready to build? Check out the full Flutter Course on SRF Developer.