how to swipe card like tinder app in flutter

DarshanKachhadiya
January 2, 2024
95 views
1 vote
2 Answers

I’m working on a Flutter project and I’m trying to implement swipe card functionality similar to Tinder or a deck of cards. I want users to be able to swipe left or right on cards, triggering actions based on the direction of the swipe.

I’ve explored some packages like flutter_swipe_cards, but I’m having trouble integrating them or customizing the behavior to suit my specific needs.

Could someone provide guidance or a code example on how to achieve this swipe card functionality in Flutter? I’d appreciate any advice, code snippets, or recommended packages to make this feature work smoothly in my app.

 // ignore_for_file: prefer_const_constructors, prefer_const_literals_to_create_immutables

 import 'package:flutter/material.dart';

 import 'package:get/get.dart';
 import 'package:swipe_card_demo/widget/colors.dart';
 import 'package:swipe_card_demo/widget/text_widget.dart';

 import '../controllers/home_controller.dart';

class HomeView extends GetView<HomeController> {
  const HomeView({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
      backgroundColor: AppColors.backgroundColor,
      body: Padding(
        padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 16),
        child: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                InkWell(
                  onTap: () => Get.back(),
                  child: Container(
                    height: 50,
                    width: 50,
                    decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(10),
                        border: Border.all(width: 1, color: Colors.grey)),
                    child: Center(
                        child: Image.asset(
                            "assets/icon/notification-icon.png",
                            height: 30)),
                  ),
                ),
                SizedBox(width: 15),
                InkWell(
                  onTap: () => Get.back(),
                  child: Container(
                    height: 50,
                    width: 50,
                    decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(10),
                        border: Border.all(width: 1, color: Colors.grey)),
                    child: Center(
                        child: Image.asset("assets/icon/home-icon.png",
                            height: 30)),
                  ),
                ),
              ],
            ),
            SizedBox(height: 20),
            Container(
              height: MediaQuery.of(context).size.height * 0.55,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(15),
                  color: Colors.amber),
              child: GestureDetector(
                child: Stack(
                  children: [
                    ClipRRect(
                      borderRadius: BorderRadius.circular(15),
                      child: Image.asset(
                        "assets/icon/person.jpg",
                        fit: BoxFit.cover,
                        width: double.infinity,
                      ),
                    ),
                    Positioned(
                        right: 0,
                        child: IconButton(
                            onPressed: () {},
                            icon: Icon(
                              Icons.more_vert,
                              color: AppColors.whiteColor,
                              size: 40,
                            ))),
                    Align(
                      alignment: Alignment.bottomCenter,
                      child: Container(
                        height: MediaQuery.of(context).size.height * 0.095,
                        width: double.infinity,
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.only(
                                bottomRight: Radius.circular(15),
                                bottomLeft: Radius.circular(15)),
                            color: Colors.black.withOpacity(0.8)),
                        child: Padding(
                          padding: EdgeInsets.symmetric(
                              horizontal: 24, vertical: 8),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              CommonTextWidget(
                                "szabo viktor",
                                color: AppColors.whiteColor,
                                fontSize: 26,
                                fontWeight: FontWeight.bold,
                              ),
                              Row(
                                children: [
                                  CommonTextWidget(
                                    "Professional Model",
                                    color: AppColors.whiteColor,
                                    fontSize: 18,
                                    fontWeight: FontWeight.bold,
                                  ),
                                  SizedBox(
                                    height: 25,
                                    child: VerticalDivider(
                                      color: AppColors.whiteColor,
                                      thickness: 2,
                                    ),
                                  ),
                                  CommonTextWidget(
                                    "26",
                                    color: AppColors.whiteColor,
                                    fontSize: 18,
                                    fontWeight: FontWeight.bold,
                                  ),
                                ],
                              )
                            ],
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            SizedBox(height: 20),
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Image.asset("assets/icon/close-icon.png", height: 70),
                SizedBox(width: 15),
                Image.asset("assets/icon/heart-icon.png", height: 90),
                SizedBox(width: 15),
                Image.asset("assets/icon/fevorite-icon.png", height: 70)
              ],
            )
          ],
        ),
      )),
    );
  }
}


import 'package:get/get.dart';

class HomeController extends GetxController {
  List swipeItems = [
    {
      'name': 'Michell',
      'age': '24',
      'imagePath': 'assets/background_images/szabo-viktor.jpg'
    },
    {
      'name': 'Ryan',
      'age': '26',
      'imagePath': 'assets/background_images/ryan-jacobson.jpg'
    },
    {
      'name': 'Daria',
      'age': '25',
      'imagePath': 'assets/background_images/the-paris.jpg'
    }
  ];
}`

Answers

can you use this, it works fine:

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SwipeCardsDemo(),
    );
  }
}

class SwipeCardsDemo extends StatefulWidget {
  @override
  _SwipeCardsDemoState createState() => _SwipeCardsDemoState();
}

class _SwipeCardsDemoState extends State<SwipeCardsDemo> {
  List<String> cardList = ["Card 1", "Card 2", "Card 3", "Card 4", "Card 5"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Swipe Cards Demo"),
      ),
      body: Center(
        child: Stack(
          children: cardList.map((card) {
            int index = cardList.indexOf(card);
            return Dismissible(
              key: Key(card),
              direction: DismissDirection.horizontal,
              onDismissed: (direction) {
                setState(() {
                  cardList.removeAt(index);
                });
                if (direction == DismissDirection.endToStart) {
                  // Handle left swipe
                  print("Swiped left on card $index");
                } else if (direction == DismissDirection.startToEnd) {
                  // Handle right swipe
                  print("Swiped right on card $index");
                }
              },
              background: Container(
                color: Colors.red,
                alignment: Alignment.centerLeft,
                child: Icon(Icons.thumb_down, color: Colors.white),
              ),
              secondaryBackground: Container(
                color: Colors.green,
                alignment: Alignment.centerRight,
                child: Icon(Icons.thumb_up, color: Colors.white),
              ),
              child: Card(
                child: Center(
                  child: Text(
                    card,
                    style: TextStyle(fontSize: 24.0),
                  ),
                ),
              ),
            );
          }).toList(),
        ),
      ),
    );
  }
}

kindly let me know if this helps.

you can try https://pub.dev/packages/flutter_card_swiper

import 'package:example/example_candidate_model.dart';
import 'package:example/example_card.dart';
import 'package:flutter/material.dart';
import 'package:flutter_card_swiper/flutter_card_swiper.dart';

void main() {
  runApp(
    const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Example(),
    ),
  );
}

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

  @override
  State<Example> createState() => _ExamplePageState();
}

class _ExamplePageState extends State<Example> {
  final CardSwiperController controller = CardSwiperController();

  final cards = candidates.map(ExampleCard.new).toList();

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Flexible(
              child: CardSwiper(
                controller: controller,
                cardsCount: cards.length,
                onSwipe: _onSwipe,
                onUndo: _onUndo,
                numberOfCardsDisplayed: 3,
                backCardOffset: const Offset(40, 40),
                padding: const EdgeInsets.all(24.0),
                cardBuilder: (
                  context,
                  index,
                  horizontalThresholdPercentage,
                  verticalThresholdPercentage,
                ) =>
                    cards[index],
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(16.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  FloatingActionButton(
                    onPressed: controller.undo,
                    child: const Icon(Icons.rotate_left),
                  ),
                  FloatingActionButton(
                    onPressed: controller.swipe,
                    child: const Icon(Icons.rotate_right),
                  ),
                  FloatingActionButton(
                    onPressed: controller.swipeLeft,
                    child: const Icon(Icons.keyboard_arrow_left),
                  ),
                  FloatingActionButton(
                    onPressed: controller.swipeRight,
                    child: const Icon(Icons.keyboard_arrow_right),
                  ),
                  FloatingActionButton(
                    onPressed: controller.swipeTop,
                    child: const Icon(Icons.keyboard_arrow_up),
                  ),
                  FloatingActionButton(
                    onPressed: controller.swipeBottom,
                    child: const Icon(Icons.keyboard_arrow_down),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  bool _onSwipe(
    int previousIndex,
    int? currentIndex,
    CardSwiperDirection direction,
  ) {
    debugPrint(
      'The card $previousIndex was swiped to the ${direction.name}. Now the card $currentIndex is on top',
    );
    return true;
  }

  bool _onUndo(
    int? previousIndex,
    int currentIndex,
    CardSwiperDirection direction,
  ) {
    debugPrint(
      'The card $currentIndex was undod from the ${direction.name}',
    );
    return true;
  }
}

Please signup or login to give your own answer.

Click here to cancel reply.