I’m a new Flutter developer, so I’m still getting my sea legs, but I’m already really enjoying the feel of building apps with it. I wanted to share some of what I’ve learned, so let’s pretend we’re tasked with building an app with the following navigation style:

Let’s create a quick homepage that has both of these widgets. By the way, this may look like a lot of code, but it’s mostly created automatically when you run “flutter create <app_name>”. I added the PageView, the BottomNavigationBar, and I added a Page class so that we could have some semi-interesting content in our app:

Here’s a video of all that in action:

Cool, we already have some out-of-the-box swipeable pages, but it’s not connected to our nav bar. And our nav bar doesn’t do anything with the pages. In fact, you can’t even interact with the nav bar.

To fix all this, you just need a few simple things. Firstly, you need a PageController for the PageView. Add it as a field in the State class:

That can be set as the ‘controller’ field in the PageView:

Then you need to keep track of what page your navbar is focused on. Add a _currentPage to your state:

And set that in the BottomNavBar as the ‘currentIndex’:

Then you can set up an onTap for your BottomNavigationBar. This is pretty straightforward, it animates to the correct page using the _pageController and updates the _currentIndex. Remember to put this in a call to ‘setState’, otherwise, your widget hierarchy won’t know that it needs to redraw:

That already feels pretty glorious. But notice the navbar doesn’t update if a user swipes? To fix that, we just need to listen to our page controller, and update the _currentPage if the user swipes to a new page. A good place to attach this listener is in the initState method:

A little side note here: you may notice that page is a double, meaning it can represent a fraction of a page. PageView and PageController are designed to be flexible enough to handle a wide variety of use cases. Like say you want to implement a “peek” animation to let users know your app is swipeable. You could do that by animating a fraction of a page. That’s why the following code uses “round”, because we want to make sure to only change the page once we’re actually on a different page.

And that’s it! About 30 lines of code and we’ve got a navigation scheme for our app. This is the finished product:

You can probably tell that this is just scratching the surface for how you could use these elements. PageView, in particular, has all sorts of applications: fancy intro screens, user creation flows, newsfeeds, etc. It can even be used vertically if the need arises. If that doesn’t get your creative juices flowing, then I don’t know what will!

Hopefully, you enjoyed this tutorial, and it made you think about cool projects you could build! Good luck with your Fluttering.