Bottom Navigation with a List Screen in Flutter
Hello folks, I’ve come back to you after a few weeks away. While I was away, I had some time to tinker with Flutter. In this quick tutorial, I want to show you how to set up a Flutter app with bottom navigation and a scrolling card list.
Creating a Flutter app
If this is your first time playing with Flutter, I recommend you prepare your development environment and setup a basic Flutter project first. The following material will help:
Adding bottom navigation in Flutter
Using the material.dart package for Flutter, we get a Material Design bottom navigation widget, called bottomNavigationBar.
Let’s create a widget that uses the bottomNavigationBar widget. In lib/screens, add a folder called home and inside this folder create a file called home_screen.dart. Here is the code that I placed in the file we created. It contains three items in the bottom navigation tab.
Let’s briefly explain how this works:
selectedIndex — keeps value of the current index
widgetOptions — is an array which contains references for the content per bottom navigation item. At the moment, we have just declared text, which means on every selected item in bottom navigation you will see just text. Later on in this article, I will show you how to create a list that will be displayed when pressing on a particular navigation item.
In the build method, I declared body with the current selected index from widgetOptions and I also added the most important part, which is the bottomNavigationBar widget. We’ve included three items, which are BottomNavigationBarItem widgets. Each item has an icon and text label. BottomNavigationBar accepts a property onTap. This property defines the callback function for handling a press. In our case, it switches selectedIndex for the value that has been tapped.
Okay, now copy this code to your file. Don’t forget to edit main.dart, and include the HomePage widget. Compile the project and your bottom navigation is done.
Adding a scrollable list to a Flutter app
Okay, so now we have the bottom navigation working, it’s time to add a list. In my application, I want to show a list of beers. I’ve gone ahead and created a simple JSON file to store the data.
Create an assets folder in the main catalogue and add the file beers.json.
In Flutter apps, an asset (or resource) can be bundled and deployed with your app. To add an asset to a Flutter app, it must be specified in the pubspec.yaml file, located at the root of your project.
Because our JSON file is a resource, we need to include it in pubspec.yaml. This can be done like so:
Okay, now we need to add the beer list to one of our screens. In screens, create a folder called beer_list and inside create a file called beer_list.dart. To build list we use ListView widget.
ListView widget displays beers list. I use few widgets to show data for every list item: Card, Column, Text and Image.
ListView has two main properties:
itemBuilder —where we specify what to render.
itemCount— where we pass the number of elements.
To load the data from the JSON file, we use DefaultAssetBundle. We then have to decode the data from a JSON format. It’s asynchronous code so to handle it we use the FutureBuilder widget.
The FutureBuilder widget is essentially a widget that returns another widget based on the result of a Future’s execution. The builder callback defines the strategy for what is rendered based on the information in the snapshot from the asynchronous computation (Future). You can read more about the FutureBuilder API here.
Here you have the entire code:
Okay, now we just need to add a reference to your list in the HomeScreen widget I created in the first part of this tutorial.
Rebuild and here is the result:
Summary
Hopefully by now, you’ve set up a simple Flutter app with bottom navigation and a scrolling list view. To summarise everything, we demonstrated how to handle state with the BottomNavigationBar widget. We provided an example for asynchronously rendering a ListView using the FutureBuilder API. And, you should now be familiar with loading assets into your Flutter app using pubspec.yaml and the DefaultAssetBundle API.
If you like our tutorials, please check out our blog. We’ve just fallen in love with Flutter at Brains and Beards. Stay tuned, our next Flutter tutorial is coming soon 🐺.
