The Bottom Navigation bar is most popular navigation bar in recent years. Because, navigating different pages is very easy. In this tutorial you will learn how to implement bottom navigation bar in flutter.
In flutter, we can easily implement the bottom navigation bar by using the default bottomnavigationbar property. In scaffold widget has property called BottomNavigationBar, that allows to create bottom navigation in easy way.
Before creating bottom navigation bar, few things to remember,
- We can display only 2 to 5 navigation bar items only.
- Each navigation bar item must-have icon and label property.
- At least two navigation bar items required, otherwise, you will get an error.
Here the simple example of bottom navigation bar without routes,
BottomNavigationBar(
type: BottomNavigationBarType.fixed,
selectedItemColor: Colors.blue[700],
selectedFontSize: 13,
unselectedFontSize: 13,
iconSize: 30,
items: [
BottomNavigationBarItem(
label: "Home",
icon: Icon(Icons.home),
),
BottomNavigationBarItem(
label: "Search",
icon: Icon(Icons.search),
),
BottomNavigationBarItem(
label: "Categories",
icon: Icon(Icons.grid_view),
),
BottomNavigationBarItem(
label: "My Account",
icon: Icon(Icons.account_circle_outlined),
),
],
),
The bottom navigation bar have several properties. such as,
- currentIndex=0: The currentIndex indicates the bottom navigation bar selected item index. By default, the currentIndex is 0.
- onTap: The onTap called when we tap on the navigation bar items.
- type: It determines the layout behavior. Such as fixed, shifting and values.
- selectedFontSize: It determines the selected item font size. The default font size is 14.0 pixels.
- unselectedFontSize: It determines the unselected item font size. The default font size is 12.0 pixels.
- iconSize: It determines the size of the bottom navigation bar items.
- selectedItemColor: It determines the selected item color.
- unselectedItemColor: It determines the unselected color.
- selectedLabelStyle: It determines the selected item text style. such as font size, font weight, decoration, etc.
- unselectedLabelStyle: It determines the unselected item text style. such as font size, font weight, decoration, etc.
- backgroundColor: It determines the background color of the bottom navigation bar.
Here the full code of bottom navigation bar.
main.dart
import 'package:bottom_navigation/screens/account.dart';
import 'package:bottom_navigation/screens/category.dart';
import 'package:bottom_navigation/screens/home.dart';
import 'package:bottom_navigation/screens/search.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Home(),
);
}
}
class Home extends StatefulWidget {
const Home({Key key}) : super(key: key);
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
int _currentIndex=0;
List _screens=[HomePage(),SearchPage(),CategoryPage(),AccountPage()];
void _updateIndex(int value) {
setState(() {
_currentIndex = value;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Bottom Navigation Bar"),
),
body: _screens[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: _currentIndex,
onTap: _updateIndex,
selectedItemColor: Colors.blue[700],
selectedFontSize: 13,
unselectedFontSize: 13,
iconSize: 30,
items: [
BottomNavigationBarItem(
label: "Home",
icon: Icon(Icons.home),
),
BottomNavigationBarItem(
label: "Search",
icon: Icon(Icons.search),
),
BottomNavigationBarItem(
label: "Categories",
icon: Icon(Icons.grid_view),
),
BottomNavigationBarItem(
label: "My Account",
icon: Icon(Icons.account_circle_outlined),
),
],
),
);
}
}
In the above code, items are a bottom navigation bar property that accepts a list of widgets. The BottomNavigationBarItem specifies the individual item of the navigation bar. Here the output of the bottom navigation bar.
Click here to download the project.
Related Tutorials,
