Skip to content
Readerstacks logo Readerstacks
  • Home
  • Softwares
  • Angular
  • Php
  • Laravel
  • Flutter
Readerstacks logo
Readerstacks
Create a bottom tab in flutter

How to create bottom tab bar in flutter ?

Aman Jain, January 9, 2022January 15, 2022

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

Flutter Dart Fluttertab

Post navigation

Previous post
Next post

Related Posts

Dart Create a slider in flutter

How to create custom slider in flutter ?

January 8, 2022January 15, 2022

In this tutorial i will show you to create you simple slider in flutter. Flutter has many inbuilt widgets to create beautiful UI and manage them with state and stateless widgets. There is many packages to create the sliders in flutter application but today here i am going to share…

Read More
Dart flutter refresh page on back

How to refresh a page or widget on navigation pop/back in flutter ?

April 28, 2022November 5, 2023

Sometime in out application we want to refresh a page or widget on navigation pop/back in flutter because we want to update the state of our page so users can see the latest update based on their actions. So In this article I will show you to flutter refresh page…

Read More
Dart Create Drawer in flutter

How to create drawer in flutter with example ?

January 3, 2022January 15, 2022

Flutter itself provides various widgets to create the industry level standard layout. One of the feature of flutter is creating default drawer in flutter with Scaffold. Using the drawer we can show our application menus list and hide show in sidebar. In this s tutorial i will create a simple…

Read More

Aman Jain
Aman Jain

With years of hands-on experience in the realm of web and mobile development, they have honed their skills in various technologies, including Laravel, PHP CodeIgniter, mobile app development, web app development, Flutter, React, JavaScript, Angular, Devops and so much more. Their proficiency extends to building robust REST APIs, AWS Code scaling, and optimization, ensuring that your applications run seamlessly on the cloud.

Categories

  • Angular
  • CSS
  • Dart
  • Devops
  • Flutter
  • HTML
  • Javascript
  • jQuery
  • Laravel
  • Laravel 10
  • Laravel 11
  • Laravel 9
  • Mysql
  • Php
  • Softwares
  • Ubuntu
  • Uncategorized

Archives

  • May 2025
  • April 2025
  • October 2024
  • July 2024
  • February 2024
  • January 2024
  • December 2023
  • November 2023
  • October 2023
  • July 2023
  • March 2023
  • November 2022
  • October 2022
  • September 2022
  • August 2022
  • July 2022
  • June 2022
  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021

Recent Posts

  • Understanding High Vulnerabilities: A Deep Dive into Recent Security Concerns
  • Understanding High Vulnerabilities in Software: A Week of Insights
  • Blocking Spam Requests with LaraGuard IP: A Comprehensive Guide
  • Enhancing API Development with Laravel API Kit
  • Exploring the Future of Web Development: Insights from Milana Cap
©2023 Readerstacks | Design and Developed by Readerstacks
Go to mobile version