How to create bottom tab bar in flutter ?

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_app

This 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.dart

Live Preview:

Related

Related Posts