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

Time:10-03

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);

                });
              },

CodePudding user response:

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);
      });
    },
  )
  • Related