Flutter — BottomNavigationBar example — Navigate with style !
Hi there! Once you are here I assume you have at least a basic understanding on how Flutter works and would like to see how we can quickly add a BottomNavigationBar to our app.
So, let’s get down to business, we’ll not cover all basics about Flutter. If you have no previous knowledge about Flutter, you can start at the official Flutter Documentation page.
What is a BottomNavigationBar?
Well, as the name says, it is a bar at the bottom of your app the makes navigation to various views easy. The recommended number of views by Flutter team is between three and five. Also, it is recommended to use it in conjunction with aScaffold widget, and we will do just that.
What we’re building?
We will build a basic application that has three view: Home, Settings and Contact. We will not care too much about styling or other visual appearance elements, not even about having a beautiful application structure but really keeping it focused on how the BottomNavigationBar can be implemented quickly. In the end will look something like this:
Let’s get started…
Firstly we’ll create three pages for the three views that will be shown when we click items of the bottom navigation bar. Let’s just call them page_one.dart, page_two.dart and page_three.dart. Then we will add the BottomNavigationBar code in the main.dart file.
The three pages, will have some very similar basic content:
page_one.dart:
import 'package:flutter/material.dart';
class PageOne extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Card(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(
Icons.home,
size: 50.0,
),
Text(
'Home Page',
style: TextStyle(fontSize: 50.0),
),
],
),
)
],
);
}
}page_two.dart:
import 'package:flutter/material.dart';
class PageTwo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Card(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(
Icons.settings,
size: 50.0,
),
Text(
'Settings',
style: TextStyle(fontSize: 50.0),
),
],
),
)
],
);
}
}page_three.dart:
import 'package:flutter/material.dart';
class PageThree extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Card(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(
Icons.call,
size: 50.0,
),
Text(
'Contact',
style: TextStyle(fontSize: 50.0),
),
],
),
)
],
);
}
}As you can see, each of the three pages, that will be our views, has a different Icon and Text widgets, besides that, they are just the same.
The main.dart file will keep the whole logic of spinning through the views.
main.dart:
import 'package:flutter/material.dart';
import 'page_one.dart';
import 'page_two.dart';
import 'page_three.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
//
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
static List<Widget> _myPages = <Widget>[PageOne(), PageTwo(), PageThree()];
int _selectedIndex = 0;
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: _myPages[_selectedIndex],
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(
Icons.home,
),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(
Icons.settings,
),
title: Text(
'Settings',
),
),
BottomNavigationBarItem(
icon: Icon(Icons.call),
title: Text('Contact'),
),
],
currentIndex: _selectedIndex,
onTap: _onItemTapped,
),
);
}
}Let’s understand main.dart logic:
First of all see the import of the three view files.
import ‘page_one.dart’;
import ‘page_two.dart’;
import ‘page_three.dart’;Then, note that for convenience we created a list with all the views so we can access them later on based on the index number of the bottom bar item pressed.
static List<Widget> _myPages = <Widget>[PageOne(), PageTwo(), PageThree()];Now, we have a variable _selectedIndex holding the selected view number, or the item, in the bottom navigation bar, that is selected. 0 means that the first item is selected.
int _selectedIndex = 0;Then we created a function _onItemTapped that will be called when an item is pressed together with the position number. This is needed to call setState to re-build the widget state with the _selectedIndex variable new value, so with a different view, as explained further below.
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}Now, in the bottomNavigationBar section of the Scaffold widget we added the BottomNavigationBar widget itself. This one contains several BottomNavigationBarItem widgets that in turn contain icons and texts widgets.
In this article we are addressing only type: BottomNavigationBarType.fixe. If you are feeling adventurous go ahead and play around with type: BottomNavigationBarType.shifting, too.
With currentIndex: _selectedIndex we set the current view based on the _selectedIndex variable value.
Finally, we call the earlier defined function when we press anyone of the items onTap: _onItemTapped.
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(
Icons.home,
),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(
Icons.settings,
),
title: Text(
'Settings',
),
),
BottomNavigationBarItem(
icon: Icon(Icons.call),
title: Text('Contact'),
),
],
currentIndex: _selectedIndex,
onTap: _onItemTapped,
)Put them all together and hit run!
Now, add the four dart files from above (page_one.dart, page_two.dart, page_three.dart and main.dart) in your Flutter project and give them a run.
I hope you managed to get it running.
Do not hesitate to leave comments bellow on what you liked, you did not like so much, what you want to see more or just … clap if you found this article useful.
