What is Stack in Flutter?

Stack is a layout widget that positions its children relative to its edges. Children can overlap—later children are painted on top of earlier children. This makes Stack perfect for creating overlays, badges, gradients, and complex UI compositions. Stack is based on the Flex widget but doesn't arrange children in a line; instead, it lets you place them anywhere within its bounds.

Basic Usage

To use a Stack, simply give it a list of children. By default, children are placed in the top‑left corner. You can later move them using the Positioned widget. Here’s a minimal example:

DARTRead-only

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

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

This creates three colored squares stacked on top of each other, all aligned to the top‑left corner. The blue square (last child) appears on top of the green and red ones.

Key Properties Explained

Stack provides several properties to control how children are laid out:

children: The list of widgets to display. Later children are drawn on top.
alignment: Aligns children that aren’t wrapped in Positioned. Default is AlignmentDirectional.topStart (top‑left in left‑to‑right locales). You can use values like Alignment.center, Alignment.bottomRight, etc.
fit: Determines how non‑positioned children size themselves. StackFit.loose (default) lets them keep their original size; StackFit.expand forces them to expand to the Stack's size.
clipBehavior: Controls whether content that overflows the Stack is clipped. Options: Clip.none, Clip.hardEdge, Clip.antiAlias, Clip.antiAliasWithSaveLayer. Default is Clip.hardEdge.
overflow: Deprecated, use clipBehavior instead.

Alignment Examples

The alignment property affects all children that are not wrapped in Positioned. Here's how to center the non‑positioned children:

DARTRead-only

Stack(
  alignment: Alignment.center,
  children: [
    Container(width: 200, height: 200, color: Colors.red),
    Container(width: 150, height: 150, color: Colors.green),
    Container(width: 100, height: 100, color: Colors.blue),
  ],
)

Stack(
  alignment: Alignment.center,
  children: [
    Container(width: 200, height: 200, color: Colors.red),
    Container(width: 150, height: 150, color: Colors.green),
    Container(width: 100, height: 100, color: Colors.blue),
  ],
)

Now all squares are centered within the Stack. The largest one (red) determines the Stack's size because it's the biggest child (unless you constrain the Stack externally).

Using Positioned for Precise Control

To place a child at an exact offset from the Stack's edges, wrap it in a Positioned widget. You can set top, right, bottom, left, width, and height. For example:

DARTRead-only

Stack(
  children: [
    Container(width: 300, height: 300, color: Colors.yellow),
    Positioned(
      top: 20,
      left: 20,
      child: Container(width: 100, height: 100, color: Colors.red),
    ),
    Positioned(
      bottom: 30,
      right: 30,
      child: Container(width: 80, height: 80, color: Colors.blue),
    ),
  ],
)

Stack(
  children: [
    Container(width: 300, height: 300, color: Colors.yellow),
    Positioned(
      top: 20,
      left: 20,
      child: Container(width: 100, height: 100, color: Colors.red),
    ),
    Positioned(
      bottom: 30,
      right: 30,
      child: Container(width: 80, height: 80, color: Colors.blue),
    ),
  ],
)

The yellow container is non‑positioned and will be placed according to the Stack's alignment (top‑left by default). The red one is 20 pixels from the top and left, while the blue one is 30 from the bottom and right.

Stack with Non‑positioned Children

If you mix positioned and non‑positioned children, the non‑positioned ones are aligned using the Stack's alignment and also influence the Stack's size. The Stack sizes itself to contain all non‑positioned children plus any positioned children that have both width/height or are fully constrained. Positioned children without explicit size don't contribute to the Stack's size, so the Stack might shrink to fit only the non‑positioned ones.

Common Use Cases

Badges and notifications: Place a small circle on top of an icon using Stack and Positioned.
Overlapping images: Create a photo collage with partially overlapping pictures.
Gradients overlays: Stack a gradient container above an image.
Custom progress indicators: Overlay a spinner on top of content.
Floating action buttons: Simulate a FAB over a bottom sheet.

Common Mistakes Beginners Make

Forgetting that later children paint on top: Always put the bottommost widget first.
Not constraining the Stack: If all children are positioned and have no size, the Stack shrinks to zero size and becomes invisible. Provide at least one sized child or wrap the Stack with a SizedBox.
Misunderstanding fit: Using StackFit.expand without constraints can cause unexpected expansion. Make sure the parent provides enough space.
Overflow not visible: If a positioned child goes outside the Stack, it may be clipped. Adjust clipBehavior to Clip.none to allow overflow (but be careful with layout).

Key Points to Remember

Stack overlays its children; later children appear on top.
Use alignment to position all non‑positioned children.
Use Positioned to place a child at specific coordinates.
The Stack sizes itself to contain its non‑positioned children and fully‑constrained positioned children.
Set clipBehavior to control overflow clipping.
StackFit.expand forces non‑positioned children to fill the Stack.

Common Interview Questions

How does Stack determine its own size?
What's the difference between a positioned and a non‑positioned child in a Stack?
How can you create a red circle badge in the top‑right corner of an icon using Stack?
Explain the fit property of Stack and when you would use StackFit.expand.
What happens if you put two Positioned widgets with the same top and left values? Which one appears on top?
How would you make a Stack take the full screen size and then center all its children?

Try it yourself

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Stack Example')),
        body: Center(
          child: Stack(
            alignment: Alignment.center,
            children: [
              Container(
                width: 200,
                height: 200,
                color: Colors.yellow,
              ),
              Positioned(
                top: 20,
                left: 20,
                child: Container(
                  width: 60,
                  height: 60,
                  color: Colors.red,
                ),
              ),
              Positioned(
                bottom: 20,
                right: 20,
                child: Container(
                  width: 60,
                  height: 60,
                  color: Colors.blue,
                ),
              ),
            ],
          ),
        ),
      ),
    ),
  );
}

Test Your Knowledge

of 3

What does the `alignment` property of Stack do?

Aligns all children relative to the Stack's center

Aligns only positioned children

Aligns children that are not wrapped in Positioned

Aligns the Stack itself within its parent

of 3

Which widget allows you to place a child at an exact offset inside a Stack?

Align

Positioned

Container

Padding

of 3

If you have a Stack with only Positioned children and none of them specify both width and height, what happens?

The Stack expands to fill its parent

The Stack becomes as small as possible (zero size)

The children become visible but the Stack is invisible

The Stack throws an error

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

Stack( alignment: Alignment.center, children: [ Container(width: 200, height: 200, color: Colors.red), Container(width: 150, height: 150, color: Colors.green), Container(width: 100, height: 100, color: Colors.blue), ], )

Stack( children: [ Container(width: 300, height: 300, color: Colors.yellow), Positioned( top: 20, left: 20, child: Container(width: 100, height: 100, color: Colors.red), ), Positioned( bottom: 30, right: 30, child: Container(width: 80, height: 80, color: Colors.blue), ), ], )

Try it yourself

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Stack Example')),
        body: Center(
          child: Stack(
            alignment: Alignment.center,
            children: [
              Container(
                width: 200,
                height: 200,
                color: Colors.yellow,
              ),
              Positioned(
                top: 20,
                left: 20,
                child: Container(
                  width: 60,
                  height: 60,
                  color: Colors.red,
                ),
              ),
              Positioned(
                bottom: 20,
                right: 20,
                child: Container(
                  width: 60,
                  height: 60,
                  color: Colors.blue,
                ),
              ),
            ],
          ),
        ),
      ),
    ),
  );
}

Test Your Knowledge

of 3

What does the `alignment` property of Stack do?

Aligns all children relative to the Stack's center

Aligns only positioned children

Aligns children that are not wrapped in Positioned

Aligns the Stack itself within its parent

of 3

Which widget allows you to place a child at an exact offset inside a Stack?

Align

Positioned

Container

Padding

of 3

If you have a Stack with only Positioned children and none of them specify both width and height, what happens?

The Stack expands to fill its parent

The Stack becomes as small as possible (zero size)

The children become visible but the Stack is invisible

The Stack throws an error

Flutter Stack Widget Tutorial for Beginners

Flutter Stack Widget Tutorial for Beginners

What is Stack in Flutter?

Basic Usage

Key Properties Explained

Alignment Examples

Using Positioned for Precise Control

Stack with Non‑positioned Children

Common Use Cases

Common Mistakes Beginners Make

Key Points to Remember

Common Interview Questions

Try it yourself

Test Your Knowledge

Need help?

Flutter Stack Widget Tutorial for Beginners

Flutter Stack Widget Tutorial for Beginners

What is Stack in Flutter?

Basic Usage

Key Properties Explained

Alignment Examples

Using Positioned for Precise Control

Stack with Non‑positioned Children

Common Use Cases

Common Mistakes Beginners Make

Key Points to Remember

Common Interview Questions

Try it yourself

Test Your Knowledge

Need help?