1. Flutter
  2. Flutter Basics
  3. Stacking with Stack Widgetss

Stacking with Stack Widgets in Flutter

When building layouts in Flutter, the Stack widget is a powerful tool that allows you to layer widgets on top of each other, similar to stacking cards. This is incredibly useful for creating complex UI designs like overlapping text on images, badges on icons, or custom layouts that require depth. In this guide, we'll break down everything you need to know about using the Stack widget effectively.

What is a Stack Widget?

The Stack widget positions its children relative to the edges of its box. Think of it like a stack of layers where each child can be placed anywhere within the stack. By default, children are aligned to the top-left corner, but you can customize their positions using the Positioned widget or alignment properties.

Key Properties of the Stack Widget

  1. children
    A list of widgets that will be stacked. These widgets are drawn in the order they are added, meaning the first widget is at the bottom and the last widget is on top.
  2. alignment
    Defines how children without a specific position should be aligned. It accepts an Alignment value like Alignment.center or Alignment.topRight. Default is AlignmentDirectional.topStart.
  3. clipBehavior
    Controls whether the content outside the boundaries of the stack should be clipped. The default is Clip.hardEdge.
  4. fit
    Determines how the children should be sized. Options include:
    • StackFit.loose: Children maintain their natural size.
    • StackFit.expand: Children expand to fill the available space.
    • StackFit.passthrough: Children size themselves based on their parent constraints.

How to Use the Stack Widget?

Example 1: Basic Stacking

import 'package:flutter/material.dart';

class BasicStackExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Stack Example')),
      body: Stack(
        children: [
          Container(
            width: 300,
            height: 300,
            color: Colors.blue,
          ),
          Container(
            width: 200,
            height: 200,
            color: Colors.red,
          ),
          Container(
            width: 100,
            height: 100,
            color: Colors.green,
          ),
        ],
      ),
    );
  }
}

Output

Example 2: Using Positioned Widgets

To place widgets at specific locations, wrap them with the Positioned widget.

class PositionedStackExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Positioned Widgets')),
      body: Center(
        child: Stack(
          children: [
            Container(
              width: 300,
              height: 300,
              color: Colors.yellow,
            ),
            Positioned(
              top: 50,
              left: 50,
              child: Container(
                width: 100,
                height: 100,
                color: Colors.blue,
              ),
            ),
            Positioned(
              bottom: 20,
              right: 20,
              child: Text(
                'Hello, Stack!',
                style: TextStyle(fontSize: 20, color: Colors.white),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Output

Common Use Cases for Stack

  1. Overlapping Widgets
    Example: Displaying a profile picture with an online/offline badge.
class BadgeExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        CircleAvatar(
          radius: 50,
          backgroundImage: AssetImage('assets/profile.jpg'),
        ),
        Positioned(
          bottom: 5,
          right: 5,
          child: Container(
            width: 20,
            height: 20,
            decoration: BoxDecoration(
              color: Colors.green,
              shape: BoxShape.circle,
            ),
          ),
        ),
      ],
    );
  }
}

 

2.Custom Headers
Example: Adding text on top of an image.

class HeaderExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Image.asset(
          'assets/header.jpg',
          width: double.infinity,
          height: 200,
          fit: BoxFit.cover,
        ),
        Positioned(
          bottom: 20,
          left: 20,
          child: Text(
            'Welcome!',
            style: TextStyle(
              fontSize: 24,
              color: Colors.white,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ],
    );
  }
}

Tips and Best Practices

  1. Avoid Overlapping Too Many Widgets
    While stacking is powerful, overusing it can make your layout cluttered and difficult to maintain.
  2. Use Alignment Wisely
    Instead of positioning every widget, set a default alignment to simplify your code.
  3. Combine with Other Widgets
    Stack can be combined with widgets like Container, Image, or CustomPaint for advanced designs.
  4. Performance Considerations
    Ensure your stack doesn't include widgets that are too complex or deeply nested, as this can impact performance.

Conclusion

The Stack widget is a versatile tool that allows you to create unique, layered layouts in Flutter. By mastering its properties and combining it with other widgets, you can achieve visually stunning designs with ease. Experiment with the examples above and let your creativity flow!

For more beginner-friendly Flutter tutorials, visit askflutter.com.

 

Previous
Next