How to create Tinder Swipe Cards in Flutter using 'flutter_tindercard' package ?


Hii Developers...
In this article, I will explain to you about How to create Tinder Swipe Cards in Flutter using the 'flutter_tindercard' package.




What is the Tinder App?


Tinder app is not just a dating app it is the most popular app for meeting new people. you can use the Tinder app to meet new peoples, for creating relationships, for creating connections, to expand the social network, to meet different kinds of people while traveling.
Tinder has these amazing feature:-
1)Match
2)Chat. 
3)Date. 
To like someone Tinder has the feature of Right Swipe. If you don't like you can use Left Swipe. 

 You may also like:- How to Create a Music Player app in flutter using Firebase (Cloud firestore,firebase storage) and 'music_player' plugin ?

How to use the "flutter_tindercard" package with a flutter app?


Step By Step:-
1) we need to use "flutter_tindercard 0.1.8" package so goto the "flutter_tindercard 0.1.8" package. ( https://pub.dev/packages/flutter_tindercard )
2) Copy the dependency "flutter_tindercard: ^0.1.8" and paste it in pubspec.yml file.
3) Import the package "import 'package:flutter_tindercard/flutter_tindercard.dart';" in main.dart file.
4) Create an "assets" folder in the root directory inside that folder create another folder for storing images.

How to create Tinder Swipe Cards in Flutter using 'flutter_tindercard' package ?
Assets/images
5) Add Path of images directory in pubspec.yml file under assets.

How to create Tinder Swipe Cards in Flutter using 'flutter_tindercard' package ?
path in pubspec.yml file
6) Extend the TickerProviderStateMixin class and create a list of images that we want to show inside the cards.
How to create Tinder Swipe Cards in Flutter using 'flutter_tindercard' package ?
List of images
7) Create a Container as a root widget and give the height to the container.
8) The container has a child called Tinder Swap Card which is required to create cards. 
9) Total num is the total number of cards that we want to show.
10) Stack num is the bunch of the cards that we want to show at a time.

Video Tutorial:-







Whole Code:-


import 'package:flutter/material.dart';
import 'package:flutter_tindercard/flutter_tindercard.dart';
void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title:"Tinder App",
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Colors.white,
        scaffoldBackgroundColor: Colors.grey[100],
      ),
      home:Tinderswiper(),
      
    );
  }
}

class Tinderswiper extends StatefulWidget {
  @override
  _TinderswiperState createState() => _TinderswiperState();
}

class _TinderswiperState extends State<Tinderswiper> with TickerProviderStateMixin{

  List<String> tinderimages=[
    "assets/images/1.png",
    "assets/images/2.png",
    "assets/images/3.png",
    "assets/images/4.png",
    "assets/images/5.png",
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Tinder Swiper"),
      ),
      body:Center(
        child: Container(
          height: MediaQuery.of(context).size.height*0.6,
          child: TinderSwapCard(
            orientation: AmassOrientation.TOP,
            totalNum: 5,
            stackNum: 3,
            maxWidth: MediaQuery.of(context).size.width*0.9,
            maxHeight: MediaQuery.of(context).size.width*0.9,
            minWidth: MediaQuery.of(context).size.width*0.8,
            minHeight: MediaQuery.of(context).size.width*0.8,

            cardBuilder: (context,index)=>Card(
              child:Padding(
                padding: EdgeInsets.all(20.0),
              child: Image.asset('${tinderimages[index]}',fit: BoxFit.fill,),
              ),
              elevation: 10.0,
            ),
          ),
        ),
      ),
    );
  }
}




Thank you guys for spending your valuable time in reading this article, if you have any doubts please ask me those doubts in the comment section below.