Flutter Stack Widget Tutorial: A Complete Overview

Contents

How to create a Flutter Stack Widget

How to use Stack Widget

In flutter, you can put widgets one above another using the flutter stack widget. For example, you can put a container above the container, text above the container, a button above the container, and many more. In this entire tutorial, you will know how to implement the flutter stack widget. You will get a complete overview of the flutter stack widget.

You can create a flutter stack widget using the Stack() class. The class is called using its constructor Stack() that accepts different properties. You will know the implementation of mostly used properties here that will be very useful while designing your Mobile app user interface.

Let’s create a Flutter stack with widgets. Use the below lines of code.

Stack(
          children: [
            Container(
              alignment: Alignment.center,
              width: 500,
              height: 250,
              color: Colors.red,
            ),
            Container(
              padding: EdgeInsets.all(20),
              margin: EdgeInsets.fromLTRB(20, 20, 20, 20),
              alignment: Alignment.center,
              width: 400,
              height: 200,
              color: Colors.yellow,
            ),
            Container(
              padding: EdgeInsets.all(20),
              margin: EdgeInsets.fromLTRB(30, 30, 30, 30),
              alignment: Alignment.center,
              width: 200,
              height: 100,
              color: Colors.teal,
            ),
          ],
        ),

Output

You can see the all the three containers are one above the other like a stack.

Now you understand how to create a Stack Widget. Let’s know how to manipulate Stack Widget. There are many properties inside the Stack() constructor class that allows you to do. These are alignment, children, fit. You will know each of them in detail.

1.children

The children properties allow you to add an array of widgets. It can be a container, row, column, stack itself, and many more. In our case, I have used three containers with different background colors.

2.alignment

The second property that allows you to manipulate Stack is alignment. It usess the Alignment enum for positioning all the children of the stack. All the enum are below.

Alignment.center

Aligning the children to the center inside the stack

Alignment.centerLeft

Aligning the children to the center left inside the stack

Alignment.centerRight

Aligning the children to the center right inside the stack

Alignment.topCenter

Aligning the children to the top center right inside the stack

Alignment.topLeft

Aligning the children to the top left right inside the stack — Aligning the children to the top left inside the stack

Alignment.topRight

Aligning the children to the top right inside the stack

Alignment.bottomCenter

Aligning the children to the bottom center inside the stack

Alignment.bottomLeft

Aligning the children to the bottom left inside the stack

Alignment.bottomRight

Aligning the children to the bottom right inside the stack

These are the uses of the alignment property that position all the children of the stack at once.

3. fit

The fit properties allow you to size the non-positioned children of a Stack. It can be done using the StackFit enum. The enum has expand, loose and passthrough.

StackFit.expand

The expand enum lets you occupy the biggest size of the screen for the children of the stack.

Stack(
          alignment: Alignment.bottomRight,
          fit: StackFit.expand,
          children: [
            Container(
              width: 500,
              height: 250,
              color: Colors.red,
            ),
            Container(
              padding: EdgeInsets.all(20),
              margin: EdgeInsets.fromLTRB(20, 20, 20, 20),
              width: 400,
              height: 200,
              color: Colors.yellow,
            ),
            Container(
              padding: EdgeInsets.all(20),
              margin: EdgeInsets.fromLTRB(30, 30, 30, 30),
              width: 200,
              height: 100,
              color: Colors.teal,
            ),
          ],
        ),

Output

Fitting the Stack to the Maxium Size of the Screen — Fitting the Stack to the Maximum Size of the Screen

StackFit.loose

The constraints passed to the stack from its parent are loosened.

For example, if the stack has constraints that force it to 350×600, then this would allow the non-positioned children of the stack to have any width from zero to 350 and any height from zero to 600. In case our example it will the same output as the above.

StackFit.passthrough

The constraints passed to the stack from its parent are passed unmodified to the non-positioned children.

For example, if a Stack is an Expanded child of a Row, the horizontal constraints will be tight and the vertical constraints will be loose.

Output

These are examples of complete implementation of the flutter stack widget. I hope you have liked this entire tutorial. If you have any queries then you can contact us for more help.

Flutter Stack Widget Tutorial: A Complete Overview

How to create a Flutter Stack Widget