flutter_card_swiper 1.2.1 icon indicating copy to clipboard operation
flutter_card_swiper: ^1.2.1 copied to clipboard

This is a Tinder-like card swiper package. It allows you to swipe left, right, up, and down and define your own business logic for each direction.

flutter_card_swiper #

Pub Version Pub points Pub Likes Pub popularity License

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 build this package because we wanted to:

  • have a completely customizable slider
  • be able to swipe in every direction
  • choose our own settings for the swiper such as duration, angle, padding, and more
  • trigger slide to any direction you want using the controller
  • add callbacks while wiping, on end or when the swiper is disabled
  • detect the direction (left, right, top, bottom) in which the card was swiped away

Show Cases #

Customize the angle

Customize the threshold (when the card should slide away)

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(
          cards: cards,
        ),
      ),
    );
  }
}

Constructor #

Basic

Parameter Default Description Required
cards - List of Widgets for the swiper true
controller - Trigger swipe false
padding EdgeInsets.symmetric(horizontal: 20, vertical: 25) Control swiper padding false
duration 200 milliseconds The duration that every animation should last false
maxAngle 30 Maximum angle the card reaches while swiping false
threshold 50 Threshold from which the card is swiped away false
scale 0.9 Scale of the card that is behind the front card false
isDisabled false Set to true if swiping should be disabled, has no impact when triggered from the outside false
isHorizontalSwipingEnabled true Set to false if you want your card to move only across the vertical axis when swiping
isVerticalSwipingEnabled true Set to false if you want your card to move only across the horizontal axis when swiping
onTapDisabled - Function that get triggered when the swiper is disabled false
onSwipe - Called with the new index and detected swipe direction when the user swiped false
onEnd - Called when there is no Widget left to be swiped away false
direction right Direction in which the card is swiped away when triggered from the outside false

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.

Method Description
swipe Changes the state of the controller to swipe and swipes the card in your selected direction.
swipeLeft Changes the state of the controller to swipe left and swipes the card to the left side.
swipeRight Changes the state of the controller to swipe right and swipes the card to the right side.
swipeTop Changes the state of the controller to swipe top and swipes the card to the top side.
swipeBottom Changes the state of the controller to swipe bottom and swipes the card to the

Credits #

  • Ricardo Dalarme (Package maintainer)
  • Appinio GmbH (Original project creator)
140
likes
0
pub points
95%
popularity

Publisher

verified publisher iconricardodalarme.com

This is a Tinder-like card swiper package. It allows you to swipe left, right, up, and down and define your own business logic for each direction.

Repository (GitHub)
View/report issues

License

Icon for licenses.unknown (LICENSE)

Dependencies

flutter

More

Packages that depend on flutter_card_swiper