In this tutorial i will show you to create bottom tab in flutter. Now days bottom tabbing is much popular then creating drawer because tabbing is much easy to user and you can easily switch between the tabs.
I will show you in this article to change the color of tab , icon and customize the icon of the tab. We will use sample content in each tab.
To create the bottom tab bar we will use BottomNavigationBar. BottomNavigationBar used to show the icons and label in the bottom and we can select a tab at a time.
Step 1 : Create flutter project
Very first step is to create the fluter application using command line tool or in Android studio.
flutter create example_appThis will create a new project with name my_app then go in to the folder.
Step 2 : Create a widgets for Bottom Tab
Now, Create a widget to create the multiple tabs and show the content in it. Here we will use BottomNavigationBar and Scaffold to use the material design.
File : lib/BottomTabBarWidget.dart
import 'package:flutter/material.dart';
class BottomTabBarWidget extends StatefulWidget {
const BottomTabBarWidget({Key? key}) : super(key: key);
@override
State<BottomTabBarWidget> createState() => _BottomTabBarWidget();
}
class _BottomTabBarWidget extends State<BottomTabBarWidget> {
final List<String> list = <String>['1', '2', '3'];
int _selectedIndex=0;
void _onItemPressed(int index) {
setState(() {
_selectedIndex = index;
});
}
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: const Text('Readerstacks bottom tab'),
),
body: Center(
child: list.map( (e) => Center(
child: Text(" Tab " + e,
style: const TextStyle( fontWeight: FontWeight.bold))
)).elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _selectedIndex,
selectedItemColor: Colors.greenAccent,
onTap: _onItemPressed,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.call),
label: 'Calls',
),
BottomNavigationBarItem(
icon: Icon(Icons.camera),
label: 'Camera',
),
BottomNavigationBarItem(
icon: Icon(Icons.chat),
label: 'Chats',
),
],
),
)
);
}
}Here as you can see we have used BottomNavigationBar to build the Bottom tab bar view and also used BottomNavigationBarItem to show the content in bottom tab with 3 menu items.
we used scaffold body to show the main content on select of tab as below
list.map( (e) => Center(
child: Text(" Tab " + e,
style: const TextStyle( fontWeight: FontWeight.bold))
)).elementAt(_selectedIndex),
and to select the tab we used
BottomNavigationBar(
currentIndex: _selectedIndex,
selectedItemColor: Colors.greenAccent,
onTap: _onItemPressed,
... );here the logic for selection of tab using setState
void _onItemPressed(int index) {
setState(() {
_selectedIndex = index;
});
}
Step 3 : Add Page to main file
Add you new pages to main.dart and start TopTabBarWidget.
import 'package:flutter/material.dart';
import 'package:example_app/BottomTabBarWidget.dart';
void main() => runApp(BottomTabBarWidget());
Step 4: Run the project
Simply run the project using command line or in android studio to check the implementation.
flutter run lib/main.dartLive Preview:
