flutter_card_swiper #

This is a Flutter package for a Tinder-like card swiper. ✨

It allows you to swipe left, right, up, and down and define your own business logic for each direction.

Very smooth animations supporting Android, iOS, Web & Desktop.

Why? #

We built this package because we wanted to:

• Have a fully customizable slider
• Swipe in any direction
• Undo swipes as many times as you want
• Choose your own settings such as duration, angle, padding and more
• Trigger swipes in any direction with the controller
• Add callbacks while swiping, on end, or when the swiper is disabled
• Detect the direction (left, right, top, bottom) the card was swiped

Show Cases #

Swipe in any direction	Trigger swipes	Unswipe the cards

Fully customizable

Installation #

Add this to your package's pubspec.yaml file:

card_swiper: ...

OR run

flutter pub add flutter_card_swiper

in your project's root directory.

Usage #

You can place your CardSwiper inside of a Scaffold like we did here. Optional parameters can be defined to enable different features. See the following example:

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

class Example extends StatelessWidget {
  List<Container> cards = [
    Container(
      alignment: Alignment.center,
      child: const Text('1'),
      color: Colors.blue,
    ),
    Container(
      alignment: Alignment.center,
      child: const Text('2'),
      color: Colors.red,
    ),
    Container(
      alignment: Alignment.center,
      child: const Text('3'),
      color: Colors.purple,
    )
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Flexible(
        child: CardSwiper(
          cardsCount: cards.length,
          cardBuilder: (context, index, percentThresholdX, percentThresholdY) => cards[index],
        ),
      ),
    );
  }
}

Constructor #

Basic

Controller

The Controller is used to swipe the card from outside of the widget. You can create a controller called CardSwiperController and save the instance for further usage. Please have a closer look at our Example for the usage.

Credits #

• Ricardo Dalarme (Package maintainer)
• Appinio GmbH (Original project creator)