A widget for swiping through a deck of cards with gestures or buttons.

Overview

swiping_card_deck

A widget for swiping through a deck of cards with gestures or buttons.

This package was inspired when I was trying to develop a Tinder-like app that involved swiping options to the left or right. I assumed that a package existed for such a popular functionality, but I searched the internet and could only find bits and pieces of different implementations that were confusing, complicated, and down right bad. This package aims to be an easy-to-use and customizable way to implement that functionality, and will hopefully save you a great amount of time!

SwipingCardDeck Demonstration

Features

The SwipingCardDeck widget offers a variety of unique features:

  • Swipe through cards by dragging or using buttons to hook into the public swipeLeft and swipeRight functions.
  • Provide custom callback functions for when the deck is empty and for each swiping direction, which also pass in the original Card object.
  • Use custom Cards of any shape, size, or content.
  • Optimized performance by rendering top two cards at a time, allowing for large decks with no decrease in user experience.
  • A variety of exposed properties allow for a swiping experience that can be designed for any need.
  • Great for any Tinder-like decision making application.

The current limitations of the package:

  • Only accepts a list of Card widgets.
  • Only supports horizontal swiping, not vertical.

Usage

Constructing a SwipingCardDeck with two cards and two buttons that can be used for swiping. Callback functions print out debugging information. The parameters minimumVelocity, rotationFactor, and swipeThreshold are all optional, but are set to the default values which work well for most use cases.

debugPrint("Swiped left!"), onRightSwipe: (Card card) => debugPrint("Swiped right!"), swipeThreshold: MediaQuery.of(context).size.width / 4, minimumVelocity: 1000, cardWidth: 200, rotationFactor: 0.8 / 3.14; ); ">
SwipingCardDeck(
    cardDeck: <Card>[
        Card(
            color: Colors.red,
            child: const SizedBox(height: 300, width: 200,)
        ),
        Card(
            color: Colors.green,
            child: const SizedBox(height: 300, width: 200,)
        ),
    ],
    onDeckEmpty: () => debugPrint("Card deck empty"),
    onLeftSwipe: (Card card) => debugPrint("Swiped left!"),
    onRightSwipe: (Card card) => debugPrint("Swiped right!"),
    swipeThreshold: MediaQuery.of(context).size.width / 4,
    minimumVelocity: 1000,
    cardWidth: 200,
    rotationFactor: 0.8 / 3.14;
);

Additional information

Issues and suggestions

This package is being actively maintained and developed. To submit ideas, issues, or suggestions, create an issue in the GitHub repository.

Contributing

Thank you for your interest in contributing! To get started, read through the documentation in CONTRIBUTING. There are always new issues coming so be sure to check back often, and if there's something you want to work on but there's no issue, just open one yourself!

Comments
  • Create GitHub Actions workflow to analyze code for pull requests

    Create GitHub Actions workflow to analyze code for pull requests

    Create a simple GitHub Action workflow to run the flutter analyzer for every open pull request. A correct workflow should run flutter analyze for every update on a pull request and block it from being merged if there are any errors or warnings; info messages should not cause the workflow to fail. The naming of the workflow should be descriptive and concise.

    help wanted good first issue QA 
    opened by jushutch 7
  • Create GitHub Actions workflow to run tests for pull requests

    Create GitHub Actions workflow to run tests for pull requests

    Create a simple GitHub Action workflow to run the package test suite for every open pull request. A correct workflow should run flutter test for every update on a pull request and block it from being merged if tests fail. The naming of the workflow should be descriptive and concise.

    help wanted good first issue QA 
    opened by jushutch 7
  • How to add a card on swipe?

    How to add a card on swipe?

    Hi i really like your package it looks very simple! I have one question because iam very new to flutter and dart. How can i add a Card on a left or right swipe? I tried it myself but wasn't able to mange it. Is there any trick? I'am more a backend-developer please don't judge me :)

    Thanks for the support.

    enhancement 
    opened by eriCCsan 5
  • How can I get index of the current card

    How can I get index of the current card

    function onSwipeLeft, onSwipeRight only provide Card parameter to pass. How to get the current card index though? I don't know how to leverage this function. Thank you

    enhancement help wanted good first issue 
    opened by nferdazel 5
  • SwipingDeck controller

    SwipingDeck controller

    Hi, I'm wondering if there is a chance of add a swiping deck controller to manage SwipingDeck from outside. I mean, I have a stack of cards, so far so good but I can't swipe current card using a button. Thank you!

    question awaiting response stale 
    opened by nanox77 4
  • Excellent widget, but how to refresh deck?

    Excellent widget, but how to refresh deck?

    This is an excellent widget, swipe left and right to go to the next card... but at the bottom, there seems to be no way to reset. Is there an option to swipe left (or right) to put in bottom of deck again so it can be in a endless loop? (Great for something like children's flash cards app)

    question awaiting response stale 
    opened by josephmaklc 3
  • Change Card to Widget

    Change Card to Widget

    Hey @jushutch! What do you think about changing List<Card> of swappable widgets to List<Widget> in order to make library more flexible? As I see there aren't any special things from the Card to be used.

    enhancement 
    opened by phimary 3
  • Added saving swipeController between recreating widget

    Added saving swipeController between recreating widget

    There is a problem when SwipingGestureDetector widget recreating and in this time late final AnimationController swipeController; is lost because void initState() is called only one time.

    opened by phimary 3
  • Enable a control over the speed of the animation

    Enable a control over the speed of the animation

    When swiping the animation is really fast and sometimes not nearly noticeable. It would be a great enhancement to be able to control the speed at which the animation takes the card from the screen.

    enhancement good first issue 
    opened by fds101 2
  • [Enhancement,Docs] Improved GIF from README.md

    [Enhancement,Docs] Improved GIF from README.md

    Hi! I saw that the issue hasn't been assigned to anyone and the repo was a interesting function in Flutter, so I felt free to download, build and try it, making a new GIF. Hope the PR complies with the Contributing guidelines :)

    Additions:

    • New GIF: gif/swiping_card_deck.gif (With better quality)

    Changes:

    • Archived -> Old GIF changes name from gif/swiping_card_deck.gif to gif/swiping_card_deck_old.gif (to be used if necessary)
    • In README.md, line 24, the link referred changed to the local instance of the new GIF.

    Resolved issue #5

    opened by IvanitiX 1
  • Create a higher quality GIF for the README

    Create a higher quality GIF for the README

    The current GIF that demonstrates the SwipingCardDeck widget is relatively low quality, especially how the edges of the cards are rendered during animations, which is a result of a low quality conversion. Recreate this GIF using the example in the examples directory and replace the existing GIF in the gif directory. The closer the GIF looks to the real thing the better, but be wary of any possible image size restrictions for GitHub README files.

    enhancement help wanted good first issue 
    opened by jushutch 1
  • Text/Asset Rendering During Swipe

    Text/Asset Rendering During Swipe

    Before posting your question :heavy_check_mark:

    Question: Is there a simple way to have text display while swiping on top of the card being swiped?

    Hey, I was wondering if there is a simple way to have text display while swiping on top of the card being swiped? I am newer to flutter and it seems like this could be possible using the onLeftSwipe/onRightSwipe functions and using callbacks but I am wondering if this would only display on swipe completion and wouldn't allow for rendering of text or image during the swipe action. If you have any thoughts on this it would be greatly appreciated. Love the package compared to some of the other swiping stack options!

    question 
    opened by Teomayo 3
  • A lot of issues

    A lot of issues

    I gave this library a shot hoping it would do better than others and landed upon following problems :

    1. Unable to Scroll inside the cards? My swipable widgets are scrollable and I can't wrap them in an Expandable to be as long as possible and hence am unable to scroll with RenderFlex Overflow errors. I don't wish to give explicit constraints to hack around it. 2.Swiping rotates the widget through the center. If the Card widget ends up being a square, it rotates through its center which is funny and not good at all.

    If you can fix them or let me know if these can be fixed by minor changes and where to make them, it would be great!

    question 
    opened by akshg05 9
  • Add a small donation section to the README

    Add a small donation section to the README

    Create a section at the bottom of the page to accept Bitcoin donations. Consider framing donations as buying a coffee, with a low recommended amount and a good image. Emphasis should be on making the section respectful, subtle, and easy to use for people who want to donate.

    documentation 
    opened by jushutch 0
  • Add dartdoc comments to swiping_gesture_detector.dart

    Add dartdoc comments to swiping_gesture_detector.dart

    There are currently no dartdoc comments in swiping_gesture_detector.dart. Comments should be added for all public properties, classes, and methods. For a good example, look at the comments in swiping_card_deck.dart. Follow the guidelines outlined in Effective Dart Documentation. To verify that formatting is correct, generate the package API documentation using dartdoc. The generated documentation should look similar to the existing documentation for swiping_card_deck.dart.

    documentation help wanted good first issue 
    opened by jushutch 0
Releases(v2.0.0-dev.0)
  • v2.0.0-dev.0(Feb 13, 2022)

    What's Changed

    • Add parameters to onSwipe callbacks by @jushutch in https://github.com/jushutch/swiping_card_deck/pull/26

    Full Changelog: https://github.com/jushutch/swiping_card_deck/compare/v1.1.0...v2.0.0-dev.0

    Source code(tar.gz)
    Source code(zip)
  • v1.2.0(Feb 11, 2022)

    What's Changed

    • Implement generic SwipingDeck widget by @jushutch in https://github.com/jushutch/swiping_card_deck/pull/24

    Full Changelog: https://github.com/jushutch/swiping_card_deck/compare/v1.1.0...v1.2.0

    Source code(tar.gz)
    Source code(zip)
  • v1.1.0(Feb 9, 2022)

    What's Changed

    • Enable control over swiping animation speed by @jushutch in https://github.com/jushutch/swiping_card_deck/pull/22

    Full Changelog: https://github.com/jushutch/swiping_card_deck/compare/v1.0.0...v1.1.0

    Source code(tar.gz)
    Source code(zip)
  • v1.0.0(Dec 5, 2021)

    What's Changed

    • Remove screenSize parameter from swipe hooks by @jushutch in https://github.com/jushutch/swiping_card_deck/pull/11
    • Add badges to README by @jushutch in https://github.com/jushutch/swiping_card_deck/pull/14
    • Remove screen size parameter from swipe hooks by @jushutch in https://github.com/jushutch/swiping_card_deck/pull/15
    • Add unit tests with 100% line coverage by @jushutch in https://github.com/jushutch/swiping_card_deck/pull/16
    • Added saving swipeController between recreating widget by @phimary in https://github.com/jushutch/swiping_card_deck/pull/17

    New Contributors

    • @phimary made their first contribution in https://github.com/jushutch/swiping_card_deck/pull/17

    Full Changelog: https://github.com/jushutch/swiping_card_deck/compare/v0.0.3...v1.0.0

    Source code(tar.gz)
    Source code(zip)
  • v0.0.3(Dec 5, 2021)

  • v0.0.2(Dec 5, 2021)

    What's Changed

    • Fixed issues indicated by flutter analyze by @inovaprog in https://github.com/jushutch/swiping_card_deck/pull/6
    • Improved GIF from README.md by @IvanitiX in https://github.com/jushutch/swiping_card_deck/pull/7
    • Create GitHub Actions workflow to run tests for pull requests #3 by @inovaprog in https://github.com/jushutch/swiping_card_deck/pull/8
    • Write unit tests for swiping_card_deck.dart by @jushutch in https://github.com/jushutch/swiping_card_deck/pull/9

    New Contributors

    • @inovaprog made their first contribution in https://github.com/jushutch/swiping_card_deck/pull/6
    • @IvanitiX made their first contribution in https://github.com/jushutch/swiping_card_deck/pull/7

    Full Changelog: https://github.com/jushutch/swiping_card_deck/compare/v0.0.1...v0.0.2

    Source code(tar.gz)
    Source code(zip)
Owner
Justin Hutchins
University of Michigan, Ann Arbor L.S.A. Computer Science B.S. 2022
Justin Hutchins
Cupertino buttons which are used as radio buttons in order to select one value

Flutter Cupertino Radio Choice Cupertino buttons which are used as radio buttons in order to select one value. Tutorial A complete tutorial how to use

Christoph Rothermel 4 Sep 18, 2022
Donation/Support buttons to allow you to add your favorite support buttons like: Paypal, Ko-fi or Patreon and more.

flutter_donation_buttons Donation/Support buttons to allow you to add your favorite support buttons like: Paypal, Ko-fi or Patreon and more. Getting S

null 6 Dec 10, 2022
A Flutter widget for Tinder like swipe cards

A Flutter widget for Tinder like swipe cards. The card can be swiped right, left and up for different responses

Abdul Basit 7 Nov 2, 2022
Flutter Number Picker is a custom widget designed for choosing an integer or decimal number by using add and minus buttons

Flutter Number Picker is a custom widget designed for choosing an integer or decimal number by using add and minus buttons. Getting Started Head to /p

Vũ Phương 2 Jul 4, 2022
A basic Flutter app that includes some native Widgets like alerts, cards, avatars, animated container, inputs, etc.

Flutter components This project was created with Flutter and some native Widgets like alerts, cards, avatars, animated container, inputs, etc. Getting

Paúl 4 Nov 15, 2021
Sliding card is a highly customizable flutter package that will help you create beautiful Cards with a sliding animation effect.

Sliding Card Introduction Sliding card is a highly customizable flutter package that will help you create beautiful Cards with a sliding animation eff

null 21 Nov 4, 2022
Widget to let the user search through a keyword string typed on a customizable keyboard in a single or multiple choices list presented as a dropdown in a dialog box or a menu.

searchable_dropdown Widget to let the user search through a keyword string typed on a customizable keyboard in a single or multiple choices list prese

Bobby Stenly Irawan 108 Sep 11, 2022
Global loading widget, which can be used through simple configuration.

load Global loading widget, which can be used through simple configuration. Pure flutter library, not use native code. It is similar to OKToast in use

Caijinglong 35 Nov 4, 2022
Custom Flutter widgets that makes Checkbox and Radio Buttons much cleaner and easier.

custom_radio_grouped_button Custom Radio Buttons and Grouped Check Box Button Custom Flutter widgets that makes Checkbox and Radio Buttons much cleane

Ketan Choyal 144 Sep 23, 2022
Customizable Material and Cupertino buttons with progress indicators and more

future_button Customizable Material and Cupertino buttons with progress indicators and more.

Erzhan 33 Oct 13, 2022
Create beautiful Loading and Timer buttons in Flutter

Argon Buttons (Timer and Loading) Create beautiful Loading and Timer buttons using Argon Buttons. No need to worry about handling animations or timers

Yogesh 213 Dec 11, 2022
Fancy design of radio buttons in Flutter (package).

A Flutter package for new radio button design. With Elegant Animation. Features Usage TODO: Include short and useful examples for package users. Add l

Aymen Boucheffa 0 Nov 26, 2021
pull_down_button is a rework of Flutter's PopupMenuButton to be styled like Pop-Up & Pull-Down Buttons from iOS 14+ with some additional customisation options.

pull_down_button is a rework of Flutter's PopupMenuButton to be styled like Pop-Up & Pull-Down Buttons from iOS 14+ with some additional customisation options.

ĐmĐrl 18 Dec 30, 2022
A simple Flutter widget to add in the widget tree when you want to show nothing, with minimal impact on performance.

nil A simple widget to add in the widget tree when you want to show nothing, with minimal impact on performance. Why? Sometimes, according to a condit

Romain Rastel 127 Dec 22, 2022
A flutter carousel widget, support infinite scroll, and custom child widget.

carousel_slider A carousel slider widget. Features Infinite scroll Custom child widgets Auto play Supported platforms Flutter Android Flutter iOS Flut

Bart T 1 Nov 25, 2021
A Flutter Widget to make interactive timeline widget.

Bubble Timeline Package A Flutter Widget to make interactive timeline widget. This widget can be used to make Event Timelines, or Timelines for certai

Vansh Goel 12 Sep 22, 2022
Widget, that can make any static located widget hidable

Installing See the official installing guidline from hidable/install Usage & Overview To start using Hidable widget, we have to create a ScrollControl

Anon 18 Dec 16, 2022
📸 Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget.

?? Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget. Photo View is largely used to show interacive images and other stuff such as SVG.

Blue Fire 1.7k Jan 7, 2023
A widget that allow user resize the widget with drag

Flutter-Resizable-Widget A widget that allow user resize the widget with drag Note: this widget uses Getx Example bandicam.2021-11-11.12-34-41-056.mp4

MohammadAminZamani.afshar 22 Dec 13, 2022