Flutter 10 — 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.

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.


Originally published at mightytechno.com on February 10, 2019.


The Flutter Pub is a medium publication to bring you the latest and amazing resources such as articles, videos, codes, podcasts etc. about this great technology to teach you how to build beautiful apps with it. You can find us on Facebook, Twitter, and Medium or learn more about us here. We’d love to connect! And if you are a writer interested in writing for us, then you can do so through these guidelines.