add new cards for infinite swiping

[j3g]

Hello. I am banging my head on how to implement infinite swiping. There aren't enough details here for me to figure it out. I am currently using Notify / Consumer in an attempt to rebuild the CardSwiper widget when the cards are getting near the end. Tinder and other apps do an infinite scrolling.

Any help is much appreciated

[aryanshdev]

I cracked the code. It's a little complex to understand. You can pass a key value to the CardSwiper object. Changing it will always trigger a re-render.

for this what I did is -
First create a variable that will used to keep CardSwiper, eg => Widget _cardSwiper = Container();
on init, I add CardSwiper to this _cardSwiper with an initial list of cards, and add a onEnd Callback in CardSwiper Object - onEnd : _onEnd; and isLoop = false; eg:

_cardSwiper = CardSwiper(
        key : ValueKey(cards.hashCode),
        isLoop: false,
        cardsCount: cards.length,
        onEnd: _onEnd,
        cardBuilder:
            (context, index, percentThresholdX, percentThresholdY) =>
        cards[index],
      );

you can add all customizations you want, like allowedSwipeDirection, onSwipe etc.

NOW
here is the required implementation for _onEnd

void _onEnd(){
    setState(() {
      var cards1 = [] //NEWCARDS  HERE
      _cardSwiper = CardSwiper(
        key: ValueKey(cards1.hashCode), // New Key
        onEnd: _onEnd,    // ensure _onEnd is passed for infinite behaviour
        cardsCount: cards1.length,
        cardBuilder:
            (context, index, percentThresholdX, percentThresholdY) =>
        cards1[index],
      );
    });
  }

For same behaviour of Swipers, ensure you have same parameters set to both CardSwipe, in init and in _onEnd
in _onEnd you can fetch data and create Widgets from data for cards, then assign it to cards1. If you face any issue reply it down.