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.

Poore

Use a tabview instead. TabController.animateToPage() would move and animate you to the right page. – Daciadacie

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.

Daciadacie

It almost does the trick. I mean, it perfectly animates to other pages when using the BottomNavigationBar like I wanted. But the problem is, when I swipe to navigate to a different page, the BottomNavigationBar isn't updated, so it doesn't display the page change. – Poore

Help me by showing some code so i can help you. You could attach a listener to tab controller that calls setstate and sets the current index. – Daciadacie

Oh yeah, how did I not think about that. Figured out myself how to add the listener. Thanks! – Poore

Answer 2

Use the PageController.animateToPage() method instead of PageController.jumpToPage() in combination with setting the duration parameter. This will allow you to navigate to the desired page with a smooth scrolling animation.

Sherrard