Flutter pageview : Find first and last page and swipe directions

Question

I am working on a book app using flutter. I am showing book pages using pageview for every chapter. The problem is when the user swipe left on the last page, I should load the next chapter from the database along with the chapter title. Vice-versa right swipe on the first page for the previous chapter. So how can I find that user in the first page or last page and swiping left or right?

Answer 1

You can check if it's the last of first page by comparing the onPageChanged methods index with your collection.length, like so:

PageView(
  onPageChanged: (index) {
    if (index + 1 == myCollection.length) {
      loadNextChapter();
    } else if (index == 0) {
      loadPreviousChapter();
    }
  },
);

Edit 1:

Using GestureDetector:

PageView mPageView = PageView(
  onPageChanged: (index) {
    if (index + 1 == myCollection.length) {
      hasReachedEnd = true;
    } else if (index == 0) {
      hasReachedFirst = true
    } else {
      hasReachedFirst = false
      hasReachedEnd = false
    }
  },
);

GestureDetector mGestureDetector = GestureDetector(
  child: mPageView
  onHorizontalDragEnd: (dragEndDetails) {
    if (dragEndDetails.primaryVelocity < 0 && hasReachedStart) {
      loadPreviousChapter(); //if you want to go to the next page once fetched you can do so by adding .then()
    } else if (dragEndDetails.primaryVelocity > 0 && hasReachedEnd) {
      loadNextChapter();
    }
  }
);

Whenever we scroll left or right we check which direction we are swiping and if we are at the end or the beginning of the item list.

Whenever we scroll to a new page we check if we are at the end or at the start of the items.

Combining these will give you the desired effect.

Answer 2

I solved it using OverscrollIndicatorNotification. With chapter and sub chapters.

    return new Container(
    child: NotificationListener<OverscrollIndicatorNotification>(
        onNotification: ((notification) {
          print(notification.toString());
          if (notification is OverscrollIndicatorNotification) {
            if (notification.depth == 0 ||_listOfCat.indexOf(_category)==0) {
              int index = _listOfSubCat.indexOf(_subCategory);
              if (notification.leading) {
                if (index != 0) {
                  setSubCatId(_listOfSubCat[index - 1]);
                } else {
                  index = _listOfCat.indexOf(_category);
                  if (index != 0) {
                    setCatId(_listOfCat[index - 1]);
                  }
                }
              } else {
                if (index != _listOfSubCat.length - 1) {
                  setSubCatId(_listOfSubCat[index + 1]);
                } else {
                  index = _listOfCat.indexOf(_category);
                  if (index != _listOfCat.length - 1) {
                    setCatId(_listOfCat[index + 1]);
                  }
                }
              }
            }
          }
          return true;
        }),
        child: _pageView=PageView(
          ....
        )
    ));