Flutter — PageView with BottomNavigationBar

Hello everyone,

Most you have already used BottomNavigationBar and PageView

Now we are going use BottomNavigatonBar along with PageView in sync.

Let's get started,

Step 1

Create a BottomNavigationBar with Three BottomNavigationBarItem

Step 2

Now let's Create our PageView with 3 StatefullWidget/StatelessWidget

First Page red.dart

SecondPage blue.dart

Third Page yellow.dart

Now let's implement PageView for which we need to pass a PageController to control the initial selected page and manually navigating from page to page

Now we need to call buildPageView() in the body of build

Step 3

Now we need to do some tricks to manage sync between PageView and BottomNavigationBar

At the Present State of the application, we have 2 two problems

1. When every we slide our BottomNavigationBar is not changing its selection
2. When every we select remaining BottomNavigationBarItems our PageView is not scrolling

Let's fix one by one

In order to fix Problem 1 we use onPageChanged event provided by PageView here is how we implement it.

onPageChanged event gives us the index of the page. We take the present index of the page and set it to the bottomSelectedIndex inside setState so our bottom selection will automatically changed

Now let's fix the Problem 2 if we select any BottomNavigationBarItem then our PageView should automatically slide. So inorder to fix this we use onTap event provide by BottomNavigationBar. So here how its done.

Similar to onPageChanged event onTap event also provide us an index on which the user tapped so based on the index we set the bottomSelectedIndex and then move the PageView to selected Page using pageController.animateToPage function which accepts three parameter index, duration and curve

And the final mixed output will be as below

Our final main.dart file

Hope you Like it.
Need any articles regarding any topic please let me know

Thanks for your time.

Hope you like it, if yes clap & share.