Stack and Positioned in Flutter

Introduction

Stack lets you place widgets on top of each other like layers. Positioned helps you put these widgets exactly where you want inside the Stack.

You want to show a badge on top of an icon.

You want to overlap text on an image.

You want to create a custom button with an icon floating at a corner.

You want to place widgets at specific spots inside a container.

Syntax

Flutter

Stack(
  children: [
    Widget1(),
    Positioned(
      top: 10.0,
      left: 20.0,
      child: Widget2(),
    ),
  ],
)

Stack's children are drawn in order, so later children appear on top.

Positioned requires at least one of top, bottom, left, or right to place the child.

Examples

A blue square with a smaller red square positioned 10 pixels from top and left.

Flutter

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

Text with a star icon positioned at the bottom-right corner.

Flutter

Stack(
  children: [
    Text('Hello'),
    Positioned(
      bottom: 0,
      right: 0,
      child: Icon(Icons.star),
    ),
  ],
)

Stack with two containers layered, second container is semi-transparent and on top.

Flutter

Stack(
  children: [
    Container(color: Colors.green, width: 100, height: 100),
    // No Positioned, child fills Stack by default
    Container(color: Colors.yellow.withOpacity(0.5), width: 50, height: 50),
  ],
)

Sample App

This app shows a blue square with a smaller red square positioned inside it near the top-left corner. The text 'Top Layer' is positioned near the bottom-right corner on top of both squares.

Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Stack and Positioned Example')),
        body: Center(
          child: Stack(
            children: [
              Container(
                width: 150,
                height: 150,
                color: Colors.blue,
              ),
              Positioned(
                top: 20,
                left: 20,
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.red,
                ),
              ),
              Positioned(
                bottom: 10,
                right: 10,
                child: const Text(
                  'Top Layer',
                  style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Important Notes

Stack paints children in order, so later children appear on top.

Positioned widgets must have at least one position property: top, bottom, left, or right.

Using Stack and Positioned is great for overlapping widgets or custom layouts.

Summary

Stack lets you layer widgets on top of each other.

Positioned places a child widget at a specific position inside the Stack.

Use Stack and Positioned to create complex, overlapping UI elements.