Tinder like swipe cards in Flutter app

Implement Tinder like swipe card feature using flutter is quite easy because of the powerful widget provided by Flutter sdk. In here you will learn how to implement swipe card function in Flutter using several known widgets.

 

Everything in the flutter is some kind of widget. The Draggable widget will give an ability to drag the child widget and you can control what you need to do when dragging 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 colour 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 list of cards. In here I create a 3 cards and append those cards to the Widget List.

List _getMatchCard() {
    List 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 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 cardList.

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.

initState - This is the first method called when the widget is created (after the class constructor, of course.)

- https://flutterbyexample.com/stateful-widget-lifecycle/
void _removeCard(index) {
    setState(() {
      cardList.removeAt(index);
    });
  }

Conclusion

I hope you get the idea about these widgets and If you are stuck in any place please check this is the full code

 

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    x