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

Question

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

                });
              },

Jump to page should work. I doubt if creating a new controller will solve the situation... — emanuel sanga, Oct 03 '21 at 07:23
When you say swipe, you mean swipe and remove it or just swipe? — emanuel sanga, Oct 03 '21 at 07:23
this should work... https://api.flutter.dev/flutter/widgets/ScrollController/detach.html.. it is for scroll controller but works with pagecontroller as well — emanuel sanga, Oct 03 '21 at 07:26
Or you could use a dismissible widget, their own implementation of smooth removing — emanuel sanga, Oct 03 '21 at 07:28
I don't even know how to implement the detach thing, although I tried removing the listener for the pageController; didn't work. — who-aditya-nawandar, Oct 03 '21 at 07:34
Please try the given answer.. I think I will try to reproduce this later — emanuel sanga, Oct 03 '21 at 07:38
The given answer doesn't work. I don't understand how that is logic supposed to work; I am trying to reset the activePageIndex to 0 after the card is swiped. — who-aditya-nawandar, Oct 03 '21 at 07:44

Muhamad Jalal · Accepted Answer · 2021-10-03T09:47:42.337

1

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

edited Oct 03 '21 at 09:47

answered Oct 03 '21 at 07:29

Muhamad Jalal

312
2
14

Doesn't work; what is that logic doing anyway? I don't think it resets the index to zero. – who-aditya-nawandar Oct 03 '21 at 07:36
What I understood is, you want to remove the swiped item and scroll to the first item. I update the answer, pls review it – Muhamad Jalal Oct 03 '21 at 08:07
I appreciate the effort but I don't think you have understood it correctly. I am using tinder_swipe_cards. Each card had multiple images (shown by PageView). After I swipe a card, a new card comes up (again with multiple images). Now, the problem is when I am scrolling through the images of a card, if I am on image no. 2 and I swipe the card, then the next card that comes up, is also set to (its) image no. 2 whereas it should have been on image no. 1 (index 0). Hence I believe the change needs to be done in the swipeCompleteCallback method. – who-aditya-nawandar Oct 03 '21 at 08:20
I can not find the package "tinder_swipe_cards", could u pls attach the link – Muhamad Jalal Oct 03 '21 at 08:25
https://pub.dev/packages/flutter_tindercard – who-aditya-nawandar Oct 03 '21 at 08:44
the answer is updated with the proper way to update the list index. please confirm if it works. – Muhamad Jalal Oct 03 '21 at 10:01
Works fine. Will have to test more, but seems to be working as desired for now. Thank you for the effort. Apparently _pageController = PageController( initialPage: 0, keepPage: true, viewportFraction: 1); needed to be placed at the correct place. I had all the code but this line was misplaced. – who-aditya-nawandar Oct 03 '21 at 10:05

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

1 Answers1