Adobe XD Design to Flutter Code in 100 Seconds
Convert your Adobe XD design to Flutter code directly
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
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.