How to use Stack widget in Flutter

The Stack widget in Flutter is a powerful layout widget that allows us to stack multiple child widgets on top of each other. The Stack widget is commonly used when we want to create complex layouts or design custom UI elements, where widgets need to be layered or positioned in a specific order.

Constructor and parameters

The Stack widget provides a constructor with various parameters to customize its behavior and layout.

Stack({
  Key? key, 
  AlignmentGeometry alignment = AlignmentDirectional.topStart, 
  TextDirection? textDirection, 
  StackFit fit = StackFit.loose, 
  Clip clipBehavior = Clip.hardEdge, 
  List<Widget> children = const <Widget>[]
})

Let's take a closer look at each parameter and its purpose.

  • key: An optional parameter that allows us to provide a unique identifier for the Stack widget.

  • alignment: Specifies the default alignment of the children within the Stack. The default value is AlignmentDirectional.topStart, which aligns the children to the top-left corner. We can use other values like Alignment.center, Alignment.bottomRight, etc., to adjust the alignment.

  • textDirection: An optional parameter that defines the text directionality within the Stack. By default, it follows the ambient Directionality of the application.

  • fit: Determines how the children fit into the available space within the Stack. The default value is StackFit.loose, allowing the children to take their natural size. Alternatively, we can use StackFit.expand to make the children grow to fill the available space.

  • clipBehavior: Specifies the clipping behavior for the children overflowing the Stack widget. The default value is Clip.hardEdge, which clips the children based on the boundaries of the Stack: other options include Clip.none, Clip.antiAlias, etc.

  • children: The list of child widgets stacked or overlaid within the Stack. We can provide any number of widgets as children. The default value is an empty list ([]).

Key points to remember

Before diving into implementation, there are a few points that we need to understand so that we can effectively utilize the Stack widget in Flutter to create complex UI.

  • The Stack widget in Flutter supports two types of child widgets: positioned and non-positioned.

  • Positioned items are wrapped in the Positioned widget and must have at least one non-null property specified.

  • Non-positioned child widgets in Stack align themselves based on the stack's alignment. By default, the children are positioned in the top-left corner of the Stack.

  • The alignment attribute can be used to change the alignment of the child widgets within the Stack.

  • The Stack widget places its children in a specific order, with the first child at the bottom and the last child at the top. To reorder the children, it is necessary to rebuild the Stack in the desired order. By default, the first child of the Stack occupies the maximum size compared to the other widgets.

Implementation

We can follow the instructions given below to add a Stack widget in UI.

Import the necessary packages

To use the Stack widget, we need to import the flutter/material.dart package in our Dart file.

import 'package:flutter/material.dart';

Create a Stack widget

To create a Stack widget, we can use the Stack constructor and provide the desired children widgets as a list.

Stack(
  children: <Widget>[
    // Add your children widgets here
  ],
)

Adding non-positioned children

We can add multiple widgets we want to stack inside the children's property of the Stack widget. These children can be any Flutter widgets, such as Text, Image, Container, etc.

Stack(
  children: [
    Container(
      width: 350,
      height: 350,
      color: Colors.blue,
    ),
    Container(
      width: 300,
      height: 300,
      color: Colors.red,
    ),
    Container(
      width: 250,
      height: 250,
      color: Colors.green,
    ),
  ],
),

Output

Stack widget using non-positioned childrens
Stack widget using non-positioned childrens

Adding positioned children

We can also add multiple widgets here, but each widget must be wrapped inside positioned() widget as shown in the code below.

Stack(   
    children: <Widget>[  
      // Max Size Widget  
      Container(  
        height: 300,  
        width: 400,  
        color: Colors.blue,    
      ),  
      Positioned(  
        top: 30,  
        right: 20,  
        child: Container(  
          height: 100,  
          width: 150,  
          color: Colors.red,   
        ),  
      ),  
      Positioned(  
        top: 30,  
        left: 20,  
        child: Container(  
          height: 100,  
          width: 150,  
          color: Colors.green,   
        ),  
      ),  
    ],  
  ),

Explanation

  • Lines 6–10: A Container widget is added as a child of the Stack. It serves as the "Max Size Widget" and has a height of 300 and a width of 400. It is colored blue.

  • Lines 11–19: The first Positioned widget is added. It is positioned relative to the top-right corner of the Stack, with an offset of 30 pixels from the top and 20 pixels from the right. It contains a Container widget with a height of 100, width of 150, and color red.

  • Lines 20–28: The second Positioned widget is added. It is positioned relative to the top-left corner of the Stack, with an offset of 30 pixels from the top and 20 pixels from the left. It contains a Container widget with a height of 100, width of 150, and color green.

Output

Stack widget using positioned childrens
Stack widget using positioned childrens

Using Align widget of Stack

Using the Align widget, we can specify a particular alignment for a single child instead of applying the same alignment to all the children within the Stack. 

Stack(   
  alignment: Alignment.topRight,
    children: <Widget>[  
      // Max Size Widget  
      Container(  
        height: 560,  
        width: 400,  
        color: Colors.blue,    
      ),  
      Positioned(  
        top: 30,  
        right: 20,  
        child: Container(  
          height: 100,  
          width: 150,  
          color: Colors.red,  
          child: Center(  
            child: Text(  
              'Using Stack Alignment',  
              style: TextStyle(color: Colors.white, fontSize: 20),  
            ),  
          ),  
        ),  
      ),  
      Align(
        alignment: Alignment.bottomLeft,
        child: Container(
          height: 100,
          width: 150,
          color: Colors.green,
          child: Align(
            alignment: Alignment.center,
            child: Text(
              'Using Align Alignment',
              style: TextStyle(color: Colors.white, fontSize: 20),
            ),
          ),
        ),
      ),  
    ],  
  ),

Explanation

  • Line 2: The alignment property of the Stack is set to Alignment.topRight, which aligns the children to the top-right corner of the Stack.

  • Lines 5–9: A Container widget is added as a child of the Stack. It represents the "Max Size Widget" with a height of 560 and a width of 400. It is colored blue.

  • Lines 10–24: The Positioned widget positions the next Container widget. It is positioned relative to the top-right corner of the Stack, with an offset of 30 pixels from the top and 20 pixels from the right. It has a height of 100, a width of 150, and is colored red. The Text widget inside is centered both horizontally and vertically using the Center widget.

  • Lines 25–39: The Align widget positions the last Container widget. It aligns the widget to the bottom-left corner of the Stack while it is still in Stack. The Container has a height of 100, a width of 150, and is colored green. The Text widget inside is centered both horizontally and vertically using the Align widget.

Output

Conclusion

The Stack widget is a powerful layout widget that can be used to create complex layouts or design custom UI elements. It supports two types of child widgets: positioned and non-positioned.

Positioned items are wrapped in the Positioned widget and must have at least one non-null property specified. Non-positioned child widgets in Stack align themselves based on the stack's alignment. By default, the children are positioned in the top-left corner of the Stack. The alignment attribute can be used to change the alignment of the child widgets within the Stack.

Test Yourself

1

Which parameter of the Stack constructor is used to specify the default alignment of the children within the Stack?

A)

alignment

B)

textDirection

C)

fit

D)

clipBehavior

Question 1 of 30 attempted

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved