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 a 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 list of cards

In here you can to define a function to get list of cards. In here I create a 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 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 drags are 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 get 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.)

https://flutterbyexample.com/stateful-widget-lifecycle/

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

Check this video with step by step guide

References

https://flutterbyexample.com/stateful-widget-lifecycle/

https://docs.flutter.io/flutter/widgets/Draggable-class.html

https://docs.flutter.io/flutter/widgets/Stack-class.html

Leave a Reply