
In our flutter tutorial series, I’m going to write about flutter bottom navigation tutorial with 4 items/tabs
Docs: https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html
Getting started
Let’s explore, how to work with a bottom navigation bar with flutter.
flutter create flutterdemo
cd flutterdemo
Now, we need to work with our main.dart
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(home: MyApp()));
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int _selectedTabIndex = 0;
List _pages = [
Text("Home"),
Text("Search"),
Text("Account"),
];
_changeIndex(int index) {
setState(() {
_selectedTabIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("codesundar"), backgroundColor: Colors.lightBlue[900]),
body: Center(child: _pages[_selectedTabIndex]),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _selectedTabIndex,
onTap: _changeIndex,
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("Home")),
BottomNavigationBarItem(
icon: Icon(Icons.search), title: Text("Search")),
BottomNavigationBarItem(
icon: Icon(Icons.account_circle), title: Text("My Account")),
],
),
);
}
}
Explanation:
- To display bottom navigation, we have to use
bottomNavigationBar
property with Scaffold BottomNavigationBar()
requires items where you can useBottomNavigationBarItem()
. When a user clicks any Tab, we’re calling_changeIndex
to update_selectedTabIndex
.- Based on
_selectedTabIndex
we’re displaying required widgets using_pages[_selectedTabIndex]
in body
Note: you can create separate page & pass that widget into _pages
Flutter Bottom Navigation Tutorial with 4 tabs
In case, if you want to add 4 items on your tab, we need to add type: BottomNavigationBarType.fixed
on BottomNavigationBar
so our final code looks like
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(home: MyApp()));
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int _selectedTabIndex = 0;
List _pages = [
Text("Home"),
Text("Search"),
Text("Cart"),
Text("Account"),
];
_changeIndex(int index) {
setState(() {
_selectedTabIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("codesundar"), backgroundColor: Colors.lightBlue[900]),
body: Center(child: _pages[_selectedTabIndex]),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _selectedTabIndex,
onTap: _changeIndex,
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("Home")),
BottomNavigationBarItem(
icon: Icon(Icons.search), title: Text("Search")),
BottomNavigationBarItem(
icon: Icon(Icons.shopping_cart), title: Text("Cart")),
BottomNavigationBarItem(
icon: Icon(Icons.account_circle), title: Text("My Account")),
],
),
);
}
}
Output
