Flutter implements TAB nested scrolling by handling PageView scrolling events

It is a common requirement to realize inner and outer layer scrolling in the APP. For example, four tabs at the bottom of the app can be rolled, and more than N tabs in the home page can be rolled. When the TAB on the home page scrolls to the last TAB and continues to slide, it is expected to slide the next TAB at the bottom. However, the flutter component pageView is not automatically handled when nested, so we need to handle the slide event ourselves

  • Debugging for half a day, feel the effect is almost the same, should be able to meet the requirements, very few code, directly paste the code
class PageViewScrollUtils { final PageController pageController; final TabController tabController; Drag _drag; PageViewScrollUtils(this.pageController, this.tabController); bool handleNotification(ScrollNotification notification) { if (notification is UserScrollNotification) { if (notification.direction == ScrollDirection.reverse && tabController.index == tabController.length - 1) { _drag = pageController.position.drag(DragStartDetails(), () { _drag = null; }); } } if (notification is OverscrollNotification) { if (notification.dragDetails ! = null && _drag ! = null) { _drag.update(notification.dragDetails); } } if (notification is ScrollEndNotification) { if (notification.dragDetails ! = null && _drag ! = null) { _drag.end(notification.dragDetails); } } return true; }}Copy the code

The above tool class is done, it is also very simple to use, the following is the use of demo:

 NotificationListener<ScrollNotification>(
  child: TabBarView(),
  onNotification: _pageViewScrollUtils.handleNotification,
 )
Copy the code

It looks like this (the video is slowed down after being converted to GIF) :

Full project Address: github.com/yongfengnic…