Flutter Stack

Layering widgets on top of each other

📚 What is Stack?

Stack allows you to overlay widgets on top of each other. It's perfect for creating badges, overlays, or positioning elements like floating buttons over images and backgrounds. 


// Simple Stack example
Stack(
  children: [
    Container(color: Colors.blue),
    Text('On Top'),
  ],
)

Stack Components

📦

Children

Widgets stacked in order 

Stack(
  children: [
    Container(),
    Text('Top'),
  ],
)
📍

Positioned

Control exact position 

Positioned(
  top: 10,
  left: 20,
  child: Text('Here'),
)
⚓

Alignment

Align children in stack 

Stack(
  alignment: Alignment.center,
  children: [
    Container(),
    Text('Center'),
  ],
)
📐

Fit

How children are sized 

Stack(
  fit: StackFit.expand,
  children: [
    Container(),
  ],
)

🔹 Basic Stack Example

Create a simple overlay with text on an image: 

import 'package:flutter/material.dart';

class MyStack extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Stack Demo')),
      body: Center(
        child: Stack(
          alignment: Alignment.center,
          children: [
            Container(
              width: 300,
              height: 200,
              color: Colors.blue,
            ),
            Text(
              'Overlay Text',
              style: TextStyle(
                color: Colors.white,
                fontSize: 24,
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Output:

Overlay Text

🔹 Using Positioned Widget

Position widgets at specific locations within the stack: 

class PositionedStack extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          width: 300,
          height: 300,
          color: Colors.grey[300],
        ),
        Positioned(
          top: 20,
          left: 20,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.red,
            child: Center(child: Text('Top Left', style: TextStyle(color: Colors.white))),
          ),
        ),
        Positioned(
          bottom: 20,
          right: 20,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
            child: Center(child: Text('Bottom Right', style: TextStyle(color: Colors.white))),
          ),
        ),
        Positioned(
          top: 130,
          left: 100,
          child: Icon(Icons.star, size: 50, color: Colors.yellow),
        ),
      ],
    );
  }
}

Output:

Top Left
Bottom Right
⭐

🔹 Profile Card with Badge

Create a profile picture with a notification badge: 

class ProfileWithBadge extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        CircleAvatar(
          radius: 50,
          backgroundColor: Colors.blue,
          child: Icon(Icons.person, size: 50, color: Colors.white),
        ),
        Positioned(
          right: 0,
          top: 0,
          child: Container(
            padding: EdgeInsets.all(6),
            decoration: BoxDecoration(
              color: Colors.red,
              shape: BoxShape.circle,
            ),
            child: Text(
              '5',
              style: TextStyle(color: Colors.white, fontSize: 12),
            ),
          ),
        ),
      ],
    );
  }
}

Output:

👤
5

🔹 Image with Gradient Overlay

Add a gradient overlay to an image: 

Stack(
  children: [
    Container(
      width: double.infinity,
      height: 250,
      color: Colors.grey,
      child: Icon(Icons.image, size: 100, color: Colors.white),
    ),
    Container(
      width: double.infinity,
      height: 250,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [
            Colors.transparent,
            Colors.black.withOpacity(0.7),
          ],
        ),
      ),
    ),
    Positioned(
      bottom: 20,
      left: 20,
      child: Text(
        'Beautiful Landscape',
        style: TextStyle(
          color: Colors.white,
          fontSize: 24,
          fontWeight: FontWeight.bold,
        ),
      ),
    ),
  ],
)

Output:

Beautiful Landscape

🔹 Stack Best Practices

Tips for using Stack:

  • First child is bottom - Children are stacked in order
  • Use Positioned for precise placement
  • Set alignment for non-positioned children
  • Consider overflow - Use clipBehavior if needed
  • Keep it simple - Too many layers can be confusing

🧠 Test Your Knowledge

Which widget is used to position children precisely in a Stack?