In our previous discussion we have seen what is Material You or Material 3 design principles. Moreover, we have also learned that Flutter 3.0 has adopted various Material 3 components.
The new Navigation Bar Widget is such a Material 3 component.
However, the first question that comes to mind is whether the new Navigation Bar has replaced the old Bottom Navigation Bar Widget?
The answer is no.
In Flutter 3.0 we can still use old Widgets like Bottom Navigation Bar.
Before we dig deep, let’s put it in a simple way.
Flutter uses Material design from the beginning.
And then comes Material 3 or Material You.
Certainly everything evolves. Therefore this design language has also evolved.
As a result we can add more adaptive functionalities.
It makes Flutter App more attractive. User friendly.
At the same time, we can customize our theme.
But we could do the same with the Bottom Navigation Bar also.
Firstly, let’s take a quick look at how we could use Bottom Navigation Bar within a Scaffold in Flutter.
We used the bottom navigation bar at the bottom of an app.
Material 3 Navigation Bar is no different.
The main purpose has not changed either.
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.
For the same purpose we use Material 3 Navigation Bar.
Let’s first know how the old Bottom Navigation Bar works.
After that we’ll compare the Navigation Bar with the Bottom Navigation Bar.
Bottom Navigation Bar in Flutter
As the name suggests that Bottom Navigation Bar is a widget that helps us to display multiple views. Bottom Navigation Bar helps us to navigate to another page or screen.
Firstly, we must remember that Bottom Navigation Bar is a Material design widget.
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.
In addition, 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, Bottom Navigation Bar is a Material design widget, so we must use MaterialApp widget at the top and keep Bottom Navigation Bar at the bottom.
Let’s take a look at the code. We’ve added the colors explicitly.
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,
),
...As a result, it looks like this:
Certainly we could have customized the color, and used the Provider package to use that custom color in the Bottom Navigation Bar.
But the new Navigation Bar has made this process much simpler.
Firstly, we can switch between light and dark color mode.
Secondly, we can use color roles to use the color scheme.
Finally, it is more adaptive.
Let’s take a look at the Material 3 Navigation Bar with a custom theme.
Certainly it gives us more power.
Moreover we can switch over to the light mode easily.
Navigation Bar, Flutter 3.0 and Material 3
How does it make our life easier?
That’s the first question.
Let’s answer it first.
Firstly, we don’t have to add explicit color to the Navigation Bar.
As a Material component Navigation Bar adapts with the custom theme.
Let’s see the code of the Navigation bar. That’ll explain it more.
bottomNavigationBar: NavigationBar(
onDestinationSelected: (int index) {
setState(() {
currentPageIndex = index;
});
},
selectedIndex: currentPageIndex,
destinations: const <Widget>[
NavigationDestination(
icon: Icon(Icons.explore),
label: 'Explore',
),
NavigationDestination(
icon: Icon(Icons.commute),
label: 'Commute',
),
NavigationDestination(
selectedIcon: Icon(Icons.bookmark),
icon: Icon(Icons.bookmark_border),
label: 'Saved',
),
],
),As an outcome, we see the difference.
We have less lines of code. We have not defined any color.
Have we? No.
Then from where does the color come?
It has its own theme data class.
It needs more discussion. We’ll discuss that in the next section.
So stay tuned.
Leave a Reply