Stack Widget Tutorial for Beginners

When building modern mobile apps, one of the most powerful layout widgets you can use is the Stack widget. In Flutter, Stack helps developers place multiple widgets on top of each other, creating flexible and layered UI designs. For beginners, understanding how to use Stack is essential because it opens the door to creating more complex and visually appealing interfaces.

In this tutorial, we will cover:

• What is the Stack widget?
• How Stack works in Flutter
• Common use cases of Stack
• Practical code examples with Enlighter code blocks
• Tips for beginners to avoid common mistakes

What is the Stack Widget?

The Stack widget is a container that allows you to place multiple widgets on top of each other. By default, the first widget is at the bottom, and the next widgets are stacked above it. This makes it possible to design overlapping user interfaces such as profile pictures with badges, banners with text overlays, or buttons on top of images.

How Stack Works

Stack uses the concept of layers. Each child of Stack is positioned relative to its parent. You can also use the Positioned widget inside Stack to control the exact position of a child widget.

Here’s the basic structure of Stack in Flutter:

Stack(
  children: [
    Widget1(),
    Widget2(),
    Widget3(),
  ],
)

Common Use Cases of Stack

Stack is widely used in real applications. Some common scenarios include:

• Displaying text over an image
• Adding a floating button over a background
• Placing badges on icons
• Creating custom UI like cards with overlays

Practical Example: Image with Text Overlay

Let’s create a simple Flutter application where we display an image and overlay text in the center using Stack.

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(
      title: 'Stack Widget Tutorial',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const StackExample(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Stack Widget Example'),
      ),
      body: Center(
        child: Stack(
          alignment: Alignment.center,
          children: [
            Image.network(
              'https://picsum.photos/400/200',
              width: 400,
              height: 200,
              fit: BoxFit.cover,
            ),
            Container(
              color: Colors.black54,
              padding: const EdgeInsets.all(8),
              child: const Text(
                'Hello, Flutter Stack!',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Explanation

• Image.network() is used to display an image from the internet.
• The Stack widget allows placing a container with text on top of the image.
• Alignment.center ensures the overlay text stays in the center.

Using Positioned with Stack

The Positioned widget gives precise control over child widget placement inside a Stack. This is helpful when you need to pin a widget at a specific corner or edge.

Stack(
  children: [
    Container(
      width: 300,
      height: 200,
      color: Colors.blue,
    ),
    Positioned(
      bottom: 10,
      right: 10,
      child: ElevatedButton(
        onPressed: () {},
        child: const Text('Click Me'),
      ),
    ),
  ],
)

In the above example, the button is pinned to the bottom-right corner of the blue container.

Tips for Beginners

1. Keep layout simple: Too many layers can make the UI hard to maintain.
2. Use Positioned wisely: Always consider responsive design before fixing positions.
3. Combine with Align: For relative alignment, Align is often simpler than Positioned.
4. Test on multiple screen sizes: Ensure your Stack layout adapts well on small and large screens.

Comparison: Stack vs Column vs Row

Many beginners confuse Stack with Row and Column. The main difference is how widgets are arranged.

Conclusion

In this Stack widget tutorial for beginners, you learned what Stack is, how it works, and practical use cases. We explored simple examples like text overlay on images and positioned widgets inside a container. By mastering Stack, you will be able to design creative layouts and improve your Flutter development skills.

For more in-depth learning, check out the official Flutter documentation: Flutter Stack Widget Guide.