EP.26 Tinder-Like Swiping Using Flutter

January 27, 2022
Overview

Today we build tinder like card swiping using Flutter and swipable library
Source Code

import 'package:flutter/material.dart';
import 'package:flutter_swipable/flutter_swipable.dart';

class TinderClone extends StatefulWidget {
  const TinderClone({Key? key}) : super(key: key);

  @override
  _TinderCloneState createState() => _TinderCloneState();
}

class _TinderCloneState extends State<TinderClone> {
  final images = [
    "https://images.unsplash.com/photo-1554230505-919a13968970?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8Z2lybHN8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60",
    "https://images.unsplash.com/photo-1503104834685-7205e8607eb9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8Z2lybHN8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60"
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Column(
        children: [
          const SizedBox(
            height: 60,
          ),
          SizedBox(
            height: MediaQuery.of(context).size.height * 0.78,
            width: MediaQuery.of(context).size.width * 0.95,
            child: Stack(
              children: users.map((user) {
                return Swipable(
                  onSwipeLeft: (finalPosition) {
                    print("Disliked");
                  },
                  onSwipeRight: (finalPosition) {
                    print("Liked");
                  },
                  onSwipeUp: (finalPosition) {
                    print("Superliked");
                  },
                  child: Container(
                    width: MediaQuery.of(context).size.width * 0.95,
                    decoration: BoxDecoration(
                      border: Border.all(color: Colors.transparent),
                      borderRadius: BorderRadius.circular(20),
                      image: DecorationImage(
                        fit: BoxFit.cover,
                        image: NetworkImage(user.imageUrl),
                      ),
                    ),
                    child: Container(
                      padding: const EdgeInsets.symmetric(
                          horizontal: 15, vertical: 10),
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(20),
                          gradient: const LinearGradient(
                            begin: Alignment.bottomCenter,
                            end: Alignment.center,
                            colors: [
                              Colors.black,
                              Colors.transparent,
                              Colors.transparent
                            ],
                          )),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.end,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            '${user.name}, ${user.age}',
                            style: const TextStyle(
                                fontSize: 24,
                                color: Colors.white,
                                fontWeight: FontWeight.bold),
                          ),
                          Text(
                            user.job,
                            style: const TextStyle(
                                fontSize: 18,
                                color: Colors.white,
                                fontWeight: FontWeight.w400),
                          )
                        ],
                      ),
                    ),
                  ),
                );
              }).toList(),
            ),
          ),
          const Spacer(),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                iconContainer(
                  const Icon(Icons.replay_outlined,
                      size: 28, color: Colors.amber),
                ),
                iconContainer(
                  const Icon(Icons.close, size: 28, color: Colors.redAccent),
                ),
                iconContainer(
                  const Icon(Icons.star, size: 28, color: Colors.blueAccent),
                ),
                iconContainer(
                  const Icon(Icons.favorite,
                      size: 28, color: Colors.greenAccent),
                ),
                iconContainer(
                  const Icon(Icons.flash_on,
                      size: 28, color: Colors.purpleAccent),
                )
              ],
            ),
          ),
          const SizedBox(
            height: 40,
          )
        ],
      ),
    );
  }

  Container iconContainer(icon) {
    return Container(
      padding: const EdgeInsets.all(13),
      decoration: BoxDecoration(
          border: Border.all(color: Colors.grey.shade200),
          color: Colors.white,
          borderRadius: BorderRadius.circular(50),
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.15),
              spreadRadius: 1,
              blurRadius: 1,
              offset: const Offset(1, 2),
            ),
          ]),
      child: icon,
    );
  }
}

class User {
  final String name;
  final String age;
  final String job;
  final String imageUrl;

  User(this.name, this.age, this.job, this.imageUrl);
}

List<User> users = [
  User("Donna", "25", "Fashion Designer",
      "https://images.unsplash.com/photo-1597586124394-fbd6ef244026?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80"),
  User("Ivana", "28", "CPA",
      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80"),
  User("Tania", "26", "Content Manager",
      "https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=988&q=80"),
  User("Golzar", "23", "Business Owner",
      "https://images.unsplash.com/photo-1578774296842-c45e472b3028?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=973&q=80"),
  User("Bianca", "27", "Freelance Artist",
      "https://images.unsplash.com/photo-1500336624523-d727130c3328?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80"),
];