flutter_card_swiper 4.1.0+2 icon indicating copy to clipboard operation
flutter_card_swiper: ^4.1.0+2 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 Tests codecov

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 directionTrigger swipesUnswipe 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) => cards[index],
        ),
      ),
    );
  }
}

Constructor #

Basic

ParameterDefaultDescriptionRequired
cardBuilder-Widget builder for rendering cardstrue
cardsCount-Number of cardstrue
initialIndex0Index of the first card when the swiper is initializedfalse
controller-Trigger swipefalse
paddingEdgeInsets.symmetric(horizontal: 20, vertical: 25)Controller to trigger swipe actionsfalse
duration200 millisecondsThe duration that every animation should lastfalse
maxAngle30Maximum angle that the card can reach during swipingfalse
threshold50Threshold from which the card is swiped awayfalse
scale0.9Scale of the card that is behind the front cardfalse
isDisabledfalseSet to true if swiping should be disabled, has no impact when triggered from the outsidefalse
isHorizontalSwipingEnabledtrueSet to false if you want your card to move only across the vertical axis when swipingfalse
isVerticalSwipingEnabledtrueSet to false if you want your card to move only across the horizontal axis when swipingfalse
isLooptrueSet to true if the stack should loopfalse
onTapDisabled-Function that get triggered when the swiper is disabledfalse
onSwipe-Function that is called when the user swipes a card. If the function returns false, the swipe action is canceled. If it returns true, the swipe action is performed as expectedfalse
onUndo-Function that is called when the controller calls undo. If the function returns false, the undo action is canceled. If it returns true, the undo action is performed as expectedfalse
onEnd-Function that is called when there are no more cards left to swipefalse
directionrightDirection in which the card is swiped away when triggered from the outsidefalse
numberOfCardsDisplayed2Number of cards to display at a timefalse

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.

MethodDescription
swipeChanges the state of the controller to swipe and swipes the card in your selected direction.
swipeLeftChanges the state of the controller to swipe left and swipes the card to the left side.
swipeRightChanges the state of the controller to swipe right and swipes the card to the right side.
swipeTopChanges the state of the controller to swipe top and swipes the card to the top side.
swipeBottomChanges the state of the controller to swipe bottom and swipes the card to the bottom side.
undoChanges the state of the controller to undo and brings back the last card that was swiped away.

Credits #

  • Ricardo Dalarme (Package maintainer)
  • Appinio GmbH (Original project creator)
53
likes
140
pub points
88%
popularity
screenshot
image

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

Documentation

API reference

License

Icon for licenses.MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on flutter_card_swiper