We can use BottomNavigationBar within a Scaffold in Flutter. We can use bottom navigation bar at the bottom of an app.
Why do we use this particular material design widget?
When we want to select a small number of views, typically between three and five, we use BottomNavigationBar.
Now, the name suggests that BottomNavigationBar is a widget that helps us to display multiple views. BottomNavigationBar helps us to navigate to another page or screen.
As we’ve just said, the number of screens or pages may vary.
For this article, we’ll keep it within three.
As a result, it looks like this:
At the bottom of the screen, the BottomNavigationBar shows up and it opens up with the first page.
However, there are lots of things we need to learn about this particular widget that follows Material design.
In this article, we’ll understand those key concepts and besides we’ll learn how to design this BottomNavigationBar.
How do you fix a bottom navigation bar in flutter?
Firstly, we must remember that BottomNavigationBar is a Material design widget.
Flutter provides a number of widgets that help us build apps that follow Material Design.
What is Material Design?
A Material app starts with the MaterialApp widget. Secondly, it builds a number of useful widgets at the root of our app.
Certainly, that includes a Navigator widget.
Due to the Navigator widget, we can manage a stack of widgets.
Although this is not today’s topic, still as a footnote we must add that the Navigator lets us transition smoothly between screens. Using the MaterialApp widget is a good practice.
Why?
Because when we build a flutter app, we may have forgotten which widget follows the Material design widgets as its ancestor.
As always, BottomNavigationBar is a Material design widget, so we must use MaterialApp widget at the top and keep BottomNavigationBar at the bottom.
Let us see the full code first. After that we’ll take a close look at the different features, step by step.
import 'package:flutter/material.dart';
class BottomNavigationBarTest extends StatelessWidget {
const BottomNavigationBarTest({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: BottomNavigationHome(),
);
}
}
class BottomNavigationHome extends StatefulWidget {
const BottomNavigationHome({Key? key}) : super(key: key);
@override
_BottomNavigationHomeState createState() => _BottomNavigationHomeState();
}
class _BottomNavigationHomeState extends State<BottomNavigationHome> {
int _selectedIndex = 0;
static const List<Widget> _widgetOptions = <Widget>[
Text(
'First Page',
style: TextStyle(
fontSize: 35,
fontWeight: FontWeight.bold,
),
),
Text(
'Second Page',
style: TextStyle(
fontSize: 35,
fontWeight: FontWeight.bold,
),
),
Text(
'Third Page',
style: TextStyle(
fontSize: 35,
fontWeight: FontWeight.bold,
),
),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar Example'),
backgroundColor: Colors.green,
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
/// customizing background color
///
backgroundColor: Colors.amber,
mouseCursor: SystemMouseCursors.grab,
unselectedItemColor: Colors.deepOrangeAccent,
showSelectedLabels: false,
showUnselectedLabels: false,
type: BottomNavigationBarType.shifting,
selectedFontSize: 20,
selectedIconTheme: const IconThemeData(
color: Colors.amberAccent,
),
selectedItemColor: Colors.amberAccent,
selectedLabelStyle: const TextStyle(
fontWeight: FontWeight.bold,
),
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'First Page',
backgroundColor: Colors.black38,
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: 'Second Page',
backgroundColor: Colors.black26,
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Third Page',
backgroundColor: Colors.black45,
),
],
currentIndex: _selectedIndex,
iconSize: 50,
onTap: _onItemTapped,
elevation: 5,
),
);
}
}To start with we’ve started with MaterialApp, keeping it at the top of our app.
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: BottomNavigationHome(),
);
}
...Next, we have started designing the bottom navigation bar.
As we’ve said earlier, the bottom navigation bar consists of multiple items.
It could be in the form of text labels, icons, or both. In addition, it is laid out on top of a piece of material.
As a rule of thumb, a bottom navigation bar is usually used in conjunction with a Scaffold.
And when we define Scaffold, BottomNavigationBar is provided as the Scaffold.bottomNavigationBar argument.
Just take a look at the code:
return Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar Example'),
backgroundColor: Colors.green,
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
/// customizing background color
///
backgroundColor: Colors.amber,
...In the typical Scaffold.bottomNavigationBar argument we define all other properties of BottomNavigationBar.
/// customizing background color
///
backgroundColor: Colors.amber,
mouseCursor: SystemMouseCursors.grab,
unselectedItemColor: Colors.deepOrangeAccent,
showSelectedLabels: false,
showUnselectedLabels: false,
type: BottomNavigationBarType.shifting,
selectedFontSize: 20,
selectedIconTheme: const IconThemeData(
color: Colors.amberAccent,
),
selectedItemColor: Colors.amberAccent,
selectedLabelStyle: const TextStyle(
fontWeight: FontWeight.bold,
),
...
currentIndex: _selectedIndex,
iconSize: 50,
onTap: _onItemTapped,
elevation: 5,
...Now, we can see that each BottomNavigationBar arguments, such as background color, mouse cursor, elevation, and many more define how it will look like.
We must remember that the length of items must be at least two and each item’s icon and title/label must not be null.
How do I customize the bottom navigation bar flutter?
And that’s how we can customize the bottom navigation bar in flutter.
As a result, we define the number of items.
static const List<Widget> _widgetOptions = <Widget>[
Text(
'First Page',
style: TextStyle(
fontSize: 35,
fontWeight: FontWeight.bold,
),
),
Text(
'Second Page',
style: TextStyle(
fontSize: 35,
fontWeight: FontWeight.bold,
),
),
Text(
'Third Page',
style: TextStyle(
fontSize: 35,
fontWeight: FontWeight.bold,
),
),
];In the above code, we find that there are four items. When there are less than four items, the BottomNavigationBarType is set to BottomNavigationBarType.fixed.
Otherwise, bottom navigation bar’s type changes with the help of BottomNavigationBarType.shifting.
Take a look at the bottom navigation bar’s type argument.
type: BottomNavigationBarType.shifting,Now, as a result, we can click bottom navigation bar’s icons and see different pages.
As a result, when we click any item, that is highlighted with a different color. Moreover, it has got an elevation.
Subsequently, we can move to the third page.
Leave a Reply