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.
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
Customize the angle
Customize the threshold (when the card should slide away)
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.
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,
),
),
);
}
}
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 |
false |
isVerticalSwipingEnabled | true | Set to false if you want your card to move only across the horizontal axis when swiping |
false |
isLoop | true | set to true if the stack should loop |
false |
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 |
numberOfCardsDisplayed | 2 | If your widgets in the 'cards' list cause performance issues, you can choose to display more cards at a time to reduce how long the user waits for a card to appear | false |
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 |
- Ricardo Dalarme (Package maintainer)
- Appinio GmbH (Original project creator)