[Appinio Swiper] unswipe when swiped left

[Muntasir2001]

Hi,

I was wondering how to unswipe when swiped left. I tried to use some hacky ways to tackle this but it didn't work. This is my code right now.

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: const Color.fromARGB(255, 235, 240, 240),
        appBar: AppBar(
          backgroundColor: const Color.fromARGB(255, 107, 152, 143),
          title: const Text(
            'Home',
          ),
        ),
        body: Container(
          margin: const EdgeInsets.only(top: 40),
          child: Column(
            children: [
              Expanded(
                child: AppinioSwiper(
                  cardsCount: reminders.length,
                  loop: true,
                  controller: controller,
                  swipeOptions: AppinioSwipeOptions.horizontal,
                  maxAngle: 0,
                  onSwiping: (AppinioSwiperDirection direction) {
                    // debugPrint(direction.toString());
                    if (direction.name == 'left') {
                      controller.unswipe();
                    }
                  },
                  unlimitedUnswipe: true,
                  onSwipe: _swipe,
                  cardsBuilder: (BuildContext context, int index) {
                    return Container(
                      alignment: Alignment.center,
                      child: getReminderCard(index),
                    );
                  },
                ),
              ),
              Expanded(
                child: HomeButtons(
                  controller: controller,
                ),
              ),
            ],
          ),
        ),
      ),
    );
    //   ),
    // );
  }

  Widget getReminderCard(int index) {
    return (Container(
      decoration: BoxDecoration(borderRadius: BorderRadius.circular(20)),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(8.0),
        child: Image.asset(
          reminders[index],
          // fit: BoxFit.fitWidth,
        ),
      ),
    ));
  }

  void _swipe(int index, AppinioSwiperDirection direction) {
    debugPrint(direction.name);
    debugPrint("index $index");

    if (direction.name == 'left') {
      controller.unswipe();
    }
  }

[khanmujeeb687]

Hey @Muntasir2001 , please use the latest version of Appinio Swiper and pass any combination of swiperOptions if you want to restrict swipe in a particular direction.

[Ashkan-Sarlak]

@khanmujeeb687 I guess OP wants to go back in the list when swipes left; not restrict swipe direction. This is also my question.

[Muntasir2001]

Yep thats what I actually wanted to know. Not sure if that is possible with this package.

[Ashkan-Sarlak]

If you think about it is not conceptually possible with a deck of card style UI. As next card in list will always be revealed regardless of swipe direction. The closest thing I can think about is a 3D carousel style UI, like some old music apps, which may not be in fashion anymore. I ended up doing it with a traditional PageView. You can also make it an endless loop using a package like loop_page_view.

[khanmujeeb687]

Hey @Muntasir2001 , please try this solution. This should solve the issue for you.

onSwipe: (int index, AppinioSwiperDirection direction) async{ if (direction == AppinioSwiperDirection.left) { await Future.delayed(const Duration(milliseconds: 500)); controller.unswipe(); } },

[Muntasir2001]

Hi @khanmujeeb687

Just tried this, did not work

[khanmujeeb687]

Could you please share the code snippet ?

On Sat 19. Aug 2023 at 12:39 PM, noobdev54 @.***> wrote:

Hi @khanmujeeb687 https://github.com/khanmujeeb687

Just tried this, did not work

— Reply to this email directly, view it on GitHub https://github.com/appinioGmbH/flutter_packages/issues/122#issuecomment-1684915325, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOBJ2JBMGEAIY6SCE7N64SDXWCJV3ANCNFSM6AAAAAA2NMUOPI . You are receiving this because you were mentioned.Message ID: @.***>

[Muntasir2001]

Sure (ignore the weird spacing/indentation, thats not how it is in the actual code)

AppinioSwiper(
                  cardsCount: reminders.getReminders().length,
                  loop: true,
                  controller: controller,
                  swipeOptions: AppinioSwipeOptions.horizontal,
                  maxAngle: 0,
                  onSwiping: (AppinioSwiperDirection direction) {
                    // debugPrint(direction.toString());
                    if (direction.name == 'left') {
                      controller.unswipe();
                    }
                  },
                  unlimitedUnswipe: true,
                  onSwipe: _swipe,
                  cardsBuilder: (BuildContext context, int index) {
                    return Container(
                      alignment: Alignment.center,
                      child: getReminderCard(index),
                    );
                  },
                ),
              ),

Widget getReminderCard(int index) {
    return (ClipRRect(
      borderRadius: BorderRadius.circular(8.0),
      child: Image.network(
        reminders.getReminder(index),
        width: 600,
        height: 800,
        fit: BoxFit.cover,
      ),
    ));
  }

  void _swipe(int index, AppinioSwiperDirection direction) async {
    debugPrint(direction.name);
    debugPrint("indexxs $index");
    rIndex = index;

    // if (direction.name == 'left') {
    //   controller.unswipe();
    // }

    if (direction == AppinioSwiperDirection.left) {
      await Future.delayed(const Duration(milliseconds: 500));
      controller.unswipe();
    }
  }              

[YoDenzel]

yeah, same thing for me. this feature would be super useful!

[khanmujeeb687]

Hey @Muntasir2001 , I tried your code and here is a short clip and code, It works for me. Are you using stateless widget?

  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      debugShowCheckedModeBanner: false,
      home: Example(),
    );
  }
}

class Example extends StatefulWidget {
  const Example({
    Key? key,
  }) : super(key: key);

  @override
  State<Example> createState() => _ExamplePageState();
}

class _ExamplePageState extends State<Example> {
  final AppinioSwiperController controller = AppinioSwiperController();

  void unSwipe(){
    controller.unswipe();
  }

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: Column(
        children: [
          const SizedBox(
            height: 50,
          ),
          SizedBox(
            height: MediaQuery.of(context).size.height * 0.75,
            child: AppinioSwiper(
              cardsCount: 10,
              loop: true,
              controller: controller,
              swipeOptions: const AppinioSwipeOptions.symmetric(horizontal: true),
              maxAngle: 0,
              onSwiping: (AppinioSwiperDirection direction) {
                // debugPrint(direction.toString());
                if (direction.name == 'left') {
                  controller.unswipe();
                }
              },
              unlimitedUnswipe: true,
              onSwipe: _swipe,
              cardsBuilder: (BuildContext context, int index) {
                return Container(
                  alignment: Alignment.center,
                  child: getReminderCard(index),
                );
              },
            ),
          ),
        ],
      ),
    );
  }

  Widget getReminderCard(int index) {
    return (ClipRRect(
      borderRadius: BorderRadius.circular(8.0),
      child: Image.network(
        "https://wallpapers.com/images/high/indian-youtube-star-carryminati-hd-rtpd3i72brgjm0q2.webp",
        width: 600,
        height: 800,
        fit: BoxFit.cover,
      ),
    ));
  }

  void _swipe(int index, AppinioSwiperDirection direction) async {
    debugPrint(direction.name);
    debugPrint("indexxs $index");

    // if (direction.name == 'left') {
    //   controller.unswipe();
    // }

    if (direction == AppinioSwiperDirection.left) {
      await Future.delayed(const Duration(milliseconds: 500));
      controller.unswipe();
    }
  }

}```

[khanmujeeb687]

https://github.com/appinioGmbH/flutter_packages/assets/58891556/ba73a7a5-b848-4fbf-8c12-69362452201b