Tinder-like Swipe Cards in Flutter

Getting straight to the demo first to decide if you want to read the blog or not. Here’s the link to a dating app (Kippy Dating App). Check it out and if you want to build something like that then this blog can be helpful for you.

Kippy Screenshot (Made with a lot more code than mentioned in the blog 😂)

While developing this dating app I tried various flutter libraries but none of them fit my use case exactly. Some were slow in performance while some were not giving a good UX.

Finally, I went through multiple Github projects, StackOverflow solutions and flutter docs and was able to complete the Kippy dating app. I decided to open-source the Swipe Cards part of this app and that’s what this blog is about.

Ok, so the name of this flutter module is swipe_cards. To install it add the dependency in your pubspec.yaml.

dependencies:
  swipe_cards: ^0.0.4

Currently, the library supports left swipe, right swipe and up swipe only which generally refer to reject, like and super like respectively.

Disclaimer: Don’t blindly copy-paste the code. It won’t run as it is. 😬 If you are looking for a working code, go to the GitHub link in the references section of this blog.

The very basic use of this library would look like this.

import 'package:swipe_cards/swipe_cards.dart';
SwipeCards(
            matchEngine: <MatchEngine>,
            itemBuilder: (BuildContext context, int index) {},
            onStackFinished: () {}
);

Here,

• matchEngine — An instance of MatchEngine that acts as the controller for triggering swipes manually.
• itemBuilder— A function that returns the view inside a swipe card.
• onStackFinished— A function that is triggered as soon as all the cards have been swiped.

MatchEngine

MatchEngine is the controller for the swipe cards. It takes swipeItems as an argument and is used to trigger the swipes manually, for example on button press. The data type of swipeItems is List<SwipeItem>.

MatchEngine _matchEngine = MatchEngine(swipeItems: List<SwipeItem>)

• _matchEngine.currentItem.like(); — To trigger right swipe manually.
• _matchEngine.currentItem.nope(); — To trigger left swipe manually.
• _matchEngine.currentItem.superLike(); — To trigger up swipe manually.

SwipeItem

SwipeItem contains the actual data that can be rendered in the swipe card. Actually, it is a wrapper over any dynamic object and just adds the functionality of like, nope and super like to that object. Along with the `content`, you have to define the like, nope and superlike actions for this item.

SwipeItem(
            content: "Anup Kumar Panwar",
            likeAction: () {
                log("Like");
            },
            nopeAction: () {
                log("Nope");
            },
            superlikeAction: () {
                log("Superlike");
            }
);

For more documentation and functions, check the GitHub repo or flutter package link in the references section.

References

1. https://pub.dev/packages/swipe_cards
2. https://github.com/AnupKumarPanwar/swipe_cards