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.

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.

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(   
  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.

How to use Stack widget in Flutter

Constructor and parameters

Key points to remember

Implementation

Import the necessary packages

Create a Stack widget

Adding non-positioned children

Output

Adding positioned children

Explanation

Output

Using `Align` widget of `Stack`

Explanation

Output

Conclusion

Additional resources

How to use Stack widget in Flutter

Constructor and parameters

Key points to remember

Implementation

Import the necessary packages

Create a Stack widget

Adding non-positioned children

Output

Adding positioned children

Explanation

Output

Using Align widget of Stack

Explanation

Output

Conclusion

Additional resources

Using `Align` widget of `Stack`