ricardodalarme / flutter_card_swiper

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.
https://pub.dev/packages/flutter_card_swiper
MIT License
154 stars 72 forks source link

Swiping like an arc with controller #47

Open HeySreelal opened 1 month ago

HeySreelal commented 1 month ago

Hi @ricardodalarme, I've recently added a PR #46 which contains the implementation for swiping to any given angle with the controller where as of now controller can only swipe the card to the predefined left, right, top, bottom directions.

46 brings the ability to swipe to any given angle with the CardSwiperDirection.custom constructor to specify angle at which the card should be swiped.

But, along the way while I was implementing it, I had this idea in mind - generally humans swipe items on the screen like an arc or something - why can't we have that? Right now, even the swiping to custom angle basically moves the container in a linear path.

Can we add the CardSwiperController.swipeArc for this? Or do I sound way too stupid? :)

HeySreelal commented 1 month ago

By the way, just taking a moment to thank you for this library! Truly makes lives easy - I should say best pick for card swiping packages out there in pub.dev.

Also, just want to let you know that, if this sounds good, I'll be happy to raise another PR for this. :)

In fact, I've tried implementing this in my fork here: HeySreelal/flutter_card_swiper/feat-arc-swipe.

Let me add couple of screen recording to illustrate this.

Screen Recordings

1. Normal Behavior

Code:

FloatingActionButton(
  onPressed: () {
    const dir = CardSwiperDirection.left;
    controller.swipe(dir);
  },
  child: const Icon(Icons.keyboard_arrow_left),
),
FloatingActionButton(
  onPressed: () {
    const dir = CardSwiperDirection.right;
    controller.swipe(dir);
  },
  child: const Icon(Icons.keyboard_arrow_right),
),

https://github.com/user-attachments/assets/b0d81aa6-d02e-47d7-8da7-af23823652ad

2. Swiping to custom angle

Code:

FloatingActionButton(
  onPressed: () {
    final dir = CardSwiperDirection.custom(290);
    controller.swipe(dir);
  },
  child: const Icon(Icons.keyboard_arrow_left),
),
FloatingActionButton(
  onPressed: () {
    final dir = CardSwiperDirection.custom(60);
    controller.swipe(dir);
  },
  child: const Icon(Icons.keyboard_arrow_right),
),

https://github.com/user-attachments/assets/a8025e5b-055e-49f6-9c0f-ed3067fc5b7c

3. Swiping to custom angle as arc

Code:

FloatingActionButton(
  onPressed: () {
    final dir = CardSwiperDirection.custom(290);
    controller.swipeArc(
      dir,
      curve: Curves.easeInOut,
    );
  },
  child: const Icon(Icons.undo),
),
FloatingActionButton(
  onPressed: () {
    final dir = CardSwiperDirection.custom(60);
    controller.swipeArc(
      dir,
      curve: Curves.easeInOut,
    );
  },
  child: const Icon(Icons.redo),
),

https://github.com/user-attachments/assets/b0c87c10-9242-4dce-9281-dc11973dfe2f


That's it, hoping this would be a cool addition :)

Looking forward to hearing from you, thanks :)