Flutter — Tinder like swipe cards
Implement Tinder like nice swipe card feature using flutter is quite easy because of the powerful widget provided by Flutter SDK. In this article, I’m gone a show you how to implement swipe card function in Flutter using several known widgets.
You may know the everything in the flutter is some kind of widget. The Draggable widget will give the ability to drag the child widget and we can control what we need to do when we drag the widget.
Solution breakdown
First of all, you need to think about the widget Structure. This is the widget structure you need to follow.
- Create a Card widget using the card class.
- Wrap the Card widget inside the Positioned widget.
- Positioned those card widgets inside the Stack widget.
- Wrap the card inside Draggable widget to give the ability to drag and drop.
Implementation
Let’s think about what are the properties need to change for each card.
First, we need to change the colour and the position from the top of the stack widget. If we don’t change the position from the top, each card will be stack the top left corner and we cannot see each card separately. Because that’s the default behaviour of the stack widget.
So Let’s start with Creating MatchCard Class. You can set the color and the position for each card using this MatchCard class.
class MatchCard {
int redColor = 0;
int greenColor = 0;
int blueColor = 0;
double margin = 0; MatchCard(int red, int green, int blue, double marginTop) {
redColor = red;
greenColor = green;
blueColor = blue;
margin = marginTop;
}}
The next step is creating a list of cards to stack inside the stack widget.
Make a list of cards
In here you can to define a function to get a list of cards. In here I create 3 cards and append those cards to the Widget List.
List<Widget> _getMatchCard() {
List<MatchCard> cards = new List();
cards.add(MatchCard(255, 0, 0, 10));
cards.add(MatchCard(0, 255, 0, 20));
cards.add(MatchCard(0, 0, 255, 30));
List<Widget> cardList = new List(); for (int x = 0; x < 3; x++) {
cardList.add(Positioned(
top: cards[x].margin,
child: Draggable(
onDragEnd: (drag){
_removeCard(x);
},
childWhenDragging: Container(),
feedback: Card(
elevation: 12,
color: Color.fromARGB(255, cards[x].redColor, cards[x].greenColor, cards[x].blueColor),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
child: Container(
width: 240,
height: 300,
),
),
child: Card(
elevation: 12,
color: Color.fromARGB(255, cards[x].redColor, cards[x].greenColor, cards[x].blueColor),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
child: Container(
width: 240,
height: 300,
),
),
),
)
);
}
return cardList;}
The _removeCard method is not defined yet and I will define it in the end. You can see some interesting attributes inside the Draggable widget. Let’s discuss what are those attributes.
- feedback — We must provide some kind of Widget for this. This is the widget which is shown when a drag event is happening. In this scenario, we need to show the same actual card widget when dragging.
- childWhenDragging — The widget to display instead of [child] when one or more drag is underway. For that, you can give an empty container. Then It will don’t show any child widget when dragging.
- onDragEnd — This call when the drag ends. We can remove the card when drag gets completed.
Next, we need to call _getMatchCard() inside the initState method and assign those List of the widget to the List<Widget> cardList.
initState — This is the first method called when the widget is created (after the class constructor, of course.)
Finally, you need to remove the card after each drag gets completed. For that, I am gone to define a method called _removeCard. Inside that method I am gone to call setState and inside that you can remove each card widget.
void _removeCard(index) {
setState(() {
cardList.removeAt(index);
}
);}
Check the full code
Flutter — Stack of Card using Stack Widget
References
https://flutterbyexample.com/stateful-widget-lifecycle/
https://docs.flutter.io/flutter/widgets/Draggable-class.html
Originally published at mightytechno.com on February 19, 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.
