Question 216902 in Flutter Question posted in
The official Flutter documentation can be found here.

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

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.

Tags:

2

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search