jushutch / swiping_card_deck

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

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!

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.

To create a deck of any widget, use the generic SwipingDeck class with templating!

What this package doesn't support:

• Vertical swiping

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, swipeThreshold, and swipeAnimationDuration are all optional, but are set to the default values which work well for most use cases. The disableDragging parameter is set to false by default, but can be set to true in order to prevent cards from being swiped using the dragging gesture.

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,
    swipeAnimationDuration: const Duration(milliseconds: 500),
    disableDragging: false,
);

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!

swiping_card_deck's Issues

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.

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.

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.

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.

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!

Write unit tests for swiping_card_deck.dart

Currently there are no unit tests for swiping_card_deck.dart, but there should be a high quality test suite with line coverage > 80%. Create swiping_card_deck_test.dart under the test directory and include widget tests that validate basic behavior for the SwipingCardDeck widget, such as swiping left, swiping right, removing cards from the deck, buttons, and swiping threshold and velocity behavior. To generate line coverage, run flutter test --coverage and to view the coverage in a generated webpage, use the genhtml.

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)

Expose a listener on swipe movement

Incase you want to do anything when a user starts moving the swap, this listnener can help you plug to that action.

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

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!

How add text to the cards?

I have just installed the library and read through the documentation, there is nowhere mentioned how we can add text.
Can we add text?!

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.

Add badges to README

Add at least two dynamic shields.io badges to the README, one for code coverage using Codecov and one to indicate whether all tests are passing using GitHub Actions. Consider other badges that might be useful, but don't add any badges that will include redundant information for the GitHub page or the pub.dev page.

Support for Stack and Containers

getCardDeck to be made generic (extended to Stack and Containers)

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.

Text/Asset Rendering During Swipe

Before posting your question ✔️

• I acknowledge that I've read the Code of Conduct

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!

Write unit tests for swiping_gesture_detector.dart

Currently there are no unit tests for swiping_gesture_detector.dart, but there should be a high quality test suite with line coverage > 80%. Create swiping_gesture_detector_test.dart under the test directory and include widget tests that validate basic behavior for the SwipingGestureDetector widget, such as swiping left, swiping right, swiping threshold and velocity behavior. To generate line coverage, run flutter test --coverage and to view the coverage in a generated webpage, use the genhtml tool.

Disable dragging/swiping of card

Before posting your question ✔️

• I acknowledge that I've read the Code of Conduct

Question ❔

Hi, I was wondering how I can disable the dragging/swiping of the card by the user and only allow it to be interacted through buttons? I understand how to make it work with the buttons through the example code provided but not sure how to disable the swiping functionality.

Cards spinning around center

Unexpected behavior ❌

Swiped cards dont move sideways but instead spin around their center when swiped, if the SizedBox of the Card has a width very close to the screen width.
For example:
width: MediaQuery.of(context).size.width * 1.0,
or
width: MediaQuery.of(context).size.width * 0.99,

Expected behavior ✔️

I expected the card to still move left and right while being rotated.

Reproducing 🖱️

1. Execute flutter run on the code sample
2. Swipe the cards.

Code sample

import 'package:flutter/material.dart';
import 'package:swiping_card_deck/swiping_card_deck.dart';
import 'dart:math' as math;

void main() {
  runApp(const MaterialApp(
    home: Scaffold(
        body: Center(
      child: ExamplePage(),
    )),
    title: 'SwipingCardDeck',
  ));
}

class ExamplePage extends StatelessWidget {
  const ExamplePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    print("Deck width: ${MediaQuery.of(context).size.width}");
    final SwipingCardDeck deck = SwipingCardDeck(
      cardDeck: getCardDeck(context),
      onDeckEmpty: () => debugPrint("Card deck empty"),
      onLeftSwipe: (Card card) => debugPrint("Swiped left!"),
      onRightSwipe: (Card card) => debugPrint("Swiped right!"),
      cardWidth:
          MediaQuery.of(context).size.width * 0.99, //Exception when using *1.0
      swipeThreshold: MediaQuery.of(context).size.width / 3,
      minimumVelocity: 1000,
      rotationFactor: 0.8 / 3.14,
      swipeAnimationDuration: const Duration(milliseconds: 500),
      disableDragging: false,
    );
    return Column(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        deck,
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          mainAxisSize: MainAxisSize.min,
          children: [
            IconButton(
              icon: const Icon(Icons.clear),
              iconSize: 30,
              color: Colors.red,
              onPressed: deck.animationActive ? null : () => deck.swipeLeft(),
            ),
            const SizedBox(width: 40),
            IconButton(
              icon: const Icon(Icons.check),
              iconSize: 30,
              color: Colors.green,
              onPressed: deck.animationActive ? null : () => deck.swipeRight(),
            ),
          ],
        ),
      ],
    );
  }

  List<Card> getCardDeck(BuildContext context) {
    List<Card> cardDeck = [];
    print("Card width: ${MediaQuery.of(context).size.width}");
    for (int i = 0; i < 500; ++i) {
      cardDeck.add(
        Card(
            color: Color((math.Random().nextDouble() * 0xFFFFFF).toInt())
                .withOpacity(1.0),
            child: SizedBox(
              height: MediaQuery.of(context).size.height * 0.7,
              // CHANGE HERE
              width:
                  MediaQuery.of(context).size.width * 0.99, //Full width cards
            )),
      );
    }
    return cardDeck;
  }
}

Notes
This is likely the second problem from #31

Possibly related: When the SwipingCardDecks cardWidth parameter is MediaQuery.of(context).size.width, a "Offset argument contained a NaN value." assertion from flutter fails.

Versions used

swiping_card_deck: ^1.3.0

Flutter 3.7.7 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 2ad6cd72c0 (7 days ago) • 2023-03-08 09:41:59 -0800
Engine • revision 1837b5be5f
Tools • Dart 2.19.4 • DevTools 2.20.1

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.

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.