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

 

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

 

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.

 

 

flutter course

 

 
x