How to add a card on swipe?

[eriCCsan]

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.

[jushutch]

Hello @eriCCsan, thank you for the kind words and for opening this issue! This is an interesting problem that I've considered before, something like an infinitely generating card deck. I believe it should be possible currently, so I'll look into it and I'll get back to you soon, hopefully with some example code!

[eriCCsan]

hi @jushutch thx for the support. iam familier with java and some other langs but dart is something different for me. I've had this idea to inherit the class SwipingCardDeck and override some functions. Unfort. it wont work :(

Do you have an other idea?

[jushutch]

Hey @eriCCsan, I looked into this and unfortunately it isn't currently possible. However, I'd be happy to add this as a feature in v2.0.0! I'm planning on doing a pre-release soon, I'll update this thread when I do and give an example of how to use the new feature.

[jushutch]

Hi @eriCCsan, I just published pre-release v2.0.0-dev.0 which resolves this issue! To read about the new feature, checkout out Pull Request #26. You can use the new cardDeck parameter in the onSwipe callback functions, which can be used to modify the deck and add cards on swipes. Here is a basic example that adds a new card to the back of the deck when a card is swiped left:

onLeftSwipe: (Card card, List<Card> cardDeck, int cardsSwiped) {
  cardDeck.insert(0,
    const Card(color: Colors.black, child: SizedBox(height: 300, width: 200)),
  );
}

Let me know if you have any question about how to use this feature! To use the pre-release version with this feature, just change your pubspec.yaml to:

swiping_card_deck: 2.0.0-dev.0

Feel free to leave feedback on this change and let me know if you have any suggestions before I release it in v2.0.0. Thank you again for opening this issue!

[eriCCsan]

Hi wow very cool! Thanks. To be fair i found a workaround but i will upgrade on your version soon. It did what i want. Here is my full approach:

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

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

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

  late SwipingCardDeck deck;

  void init(BuildContext context) {
    deck = SwipingCardDeck(
      cardDeck: getCardDeck(),
      onDeckEmpty: () => debugPrint("Card deck empty"),
      onLeftSwipe: (Card card) => addCard(true),
      onRightSwipe: (Card card) => addCard(false),
      cardWidth: 200,
      swipeThreshold: MediaQuery.of(context).size.width / 3,
      minimumVelocity: 1000,
      rotationFactor: 0.8 / 3.14,
      swipeAnimationDuration: const Duration(milliseconds: 500),
    );
  }

  void addCard(bool isLeftSwipe) {
    Card myCard = Card(
        color: Color((math.Random().nextDouble() * 0xFFFFFF).toInt())
            .withOpacity(1.0),
        child: const SizedBox(height: 300, width: 200));

    deck.cardDeck.insert(0, myCard);

    String direction = "right";
    if (isLeftSwipe) {
      direction = "left";
    }
    print("I swiped " + direction);
  }

  @override
  Widget build(BuildContext context) {
    init(context);
    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() {
    List<Card> cardDeck = [];
    for (int i = 0; i < 3; ++i) {
      cardDeck.add(
        Card(
            color: Color((math.Random().nextDouble() * 0xFFFFFF).toInt())
                .withOpacity(1.0),
            child: const SizedBox(height: 300, width: 200)),
      );
    }
    return cardDeck;
  }
}