Search code examples
flutterdartflutter-pageviewswipecardview

Flutter - How to reset the current page index in PageView (after card swipe)?


I have a simple PageView.builder:

  @override
void initState() {
 super.initState();
 _pageController =
    PageController(initialPage: 0, keepPage: true, viewportFraction: 1);
_pageController.addListener(() {
  setState(() {
      _activeImageIndex = _pageController.page!.toInt();
    });
  });
 }

......

            child: PageView.builder(
            scrollDirection: Axis.vertical,
            controller: _pageController,
            itemCount: lstUserImages.length,
            onPageChanged: (page) {
              setState(() {
                _activeImageIndex = page;
              });
            },
            itemBuilder: (context, index) {
              return GestureDetector(
                child: Image.asset(
                  lstUserImages[index],
                  fit: BoxFit.cover,
                ),
              );
            }),

It works fine except that when I swipe a card, then it doesn't reset the page index to 0 (for the next card). So if for a card I am viewing the 3rd image(index = 2) then after I swipe that card, the next card is loaded with the 3rd image showing.

I have the onSwipeComplete available:

                  swipeCompleteCallback:
                  (CardSwipeOrientation orientation, int index) {
               
                setState(() {

 //WHAT DO I DO HERE SO THAT THE PAGE INDEX IS SET TO ZERO AGAIN..??
                  
                  //isCardChanged = true;
                  //_pageController.jumpToPage(0);
                  _pageController = PageController(
                      initialPage: 0, keepPage: true, viewportFraction: 1);

                });
              },

Solution

  • Just update the TinderSwapCard content to be

    TinderSwapCard(
        orientation: AmassOrientation.BOTTOM,
        totalNum: 3,
        stackNum: 3,
        swipeEdge: 4.0,
        maxWidth: MediaQuery.of(context).size.width * 0.9,
        maxHeight: MediaQuery.of(context).size.width * 0.9,
        minWidth: MediaQuery.of(context).size.width * 0.8,
        minHeight: MediaQuery.of(context).size.width * 0.8,
        cardBuilder: (context, index) {
          /// to reset the [_pageController] to a new value
          /// preventing the "multiple PageViews are attached to the same PageController" from appears
          _pageController = PageController(
              initialPage: 0, keepPage: true, viewportFraction: 1);
    
          return PageView.builder(
              scrollDirection: Axis.vertical,
              controller: _pageController,
              itemCount: lstUserImages.length,
              onPageChanged: (page) => setState(() => _activeImageIndex = page),
              itemBuilder: (context, index) {
                return Image.network(
                  lstUserImages[index],
                  fit: BoxFit.cover,
                );
              });
        },
        cardController: cardController,
        swipeCompleteCallback: (CardSwipeOrientation orientation, int index) {
          /// at [TinderSwapCard] swiping ensure the [_pageController] scrolled to the zero index
    
          setState(() {
            _pageController.jumpToPage(0);
          });
        },
      )