Flutter – Stack of Card using Stack Widget

Flutter – Stack of Card using Stack Widget

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

Each child can be positioned or non positioned.

Position element need to wrap with Positioned Widget and need to have one non-null property

Default non positioned children positioned in top left corner.

We can change the alignment using alignment attribute and child views will be act according that.

Stack paints its children in order with the first child being at the bottom.

Implementation

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: <Widget>[], ),

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.