We have many packages and articles about the implementation of tinder like cards in flutter, now lets get to another step and create a tinder like engine using these cards.
Our goal is simple, create a service which serves as the engine that provides the users data and responsible for the following tasks.
- Show list of user cards in stack.
- On swipe remove that card from the users data.
- Checks if we need to fetch from the server.
Solution breakdown
Our main focus is the service but we need to have these pre-requisite done first.
- Create a Card widget using the swipable package. (https://pub.dev/packages/flutter_swipable).
- Positioned those card widgets inside the Stack widget.
- Create a user class.
- An api provider to fetch the users data.
For users data we will be using randomuser.me api that has the endpoint that we can call to get the multiple users, in this case we will be fetching 5 users per request.
https://randomuser.me/api/?results=5
Implementation
First we will need the user class, for that get the results from the above api and map theses properties in class, the minimal properties that we need are listed in this class
Now create user card that will consume the user model and show some information also this card will be using the swipable widget that will serve as a swipe card. Here are the visuals 😃
Good thing is, this card is swipeable 😺.
Enough of the boring old stuff now lets get to the service. We have kind of everything setuped now lets break down the service, like a good software engineer lets put it in a visual so everyone can understand.
Simple right ? yeah it is, to communicate the state of the users data we have the behavior subject that stores the state of the queue which is being listened by a StreamBuilder and voila.
Here is the code for the Browse service a singleton.
All together we have this. init() will fetch the first batch of users and then the we follow the above flowchart.
Summary
- Swipable user card widget using flutter_swipeable package.
- Randomuser.me api to fetch random users.
- Singleton service to handle the queue of users.
- And lastly the stack widget which shows the cards.
Check the full code here
Hope you have enjoyed the article. Thanks for sharing your time with me.
