How to make PageView page navigation using BottomNavigationBar scrolling animation skip pages that are in between in Flutter

Question

I am using PageView along with BottomNavigationBar for navigating through my app. I like the scrolling animation/transition between the pages when scrolling or navigating to a different page. But the problem is, when I navigate "far distances" (for example, navigating from page 1 to 5) using BottomNavigationBar, it has to scroll through 2-4 pages very quickly, resulting in a seemingly laggy and unappealing quick scrolling animation.

Is there a way to make it so no matter from which to which page I navigate (using BottomNavigationBar), it only scrolls right to that page, skipping any pages in between, resulting in a single scroll between pages animation?

I looked up and the closest thing I found was PageController.jumpToPage(), but it doesn't do any animations at all, which I want.

Answer 1

You could use a TabBarView() instead of a PageView(). Your tab bar view would have a TabController which comes with a animateTo() method which is used to animate to any tab.

tabController = TabController(length: _children.length, vsync: this)
  ..addListener(() {
    setState(() {
      // set index here
    });
  });;
tabController.animateTo(index)

Where index is the index of the tab you want to animate to.

Ensure to use the SingleTickerProviderStateMixin with your view/screen.

The tabController is created on init state and the animateTo() method is called onTap of your BottomNavigationBar.