Implement stack of the card using Stack widget in Flutter

Based on the name I think you can get the idea of what kind of widget is it. Stackwidget will provide a way of overlapping several children in a simple way.

Based on the flutter document stack widget is

A widget that positions its children relative to the edges of its box

flutter.io

Key points of Flutter Stack widget

1. Each child can be positioned or non positioned.
2. Position element need to wrap with Positioned Widget and need to have one non-null property
3. Default non positioned children positioned in top left corner.
4. We can change the alignment using alignment attribute and child views will be act according that.
5. Stack paints its children in order with the first child being at the bottom.

Implement Stack Widget

In this tutorial I’m gone a show to how to create tinder like card view using stack widget.

First we create a Stack widget and we need to assign Alignment.center to the alignment attribute.

Stack( alignment: Alignment.center, children: [], ),

We can add arrays of child widget for stack. next I am gone a add a 3 card widget as a children widgets. The thing is we need to wrap this card with the Positioned widget. Otherwise all the widget will overlap and we cannot differentiate each card.

Positioned(
              top: 20,
              child: Card(
                elevation: 8,
                color: Color.fromARGB(255, 0, 255, 0),
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10)),
                child: Container(
                  width: 220,
                  height: 300,
                ),
              ),
            ),

In Positioned widget we can define the distance from the top. For each Card I will increase the distance by 10. Then we can see the nice stack of cards. Check the video If you need more clarification.