Category: Flutter

For navigating between various UIs, the BottomNavigationBar has gained popularity in recent years.

Since the majority of apps now use this widget to switch between screens, many developers use bottom navigation.

Flutter’s bottom navigation bar can include a variety of things, including text labels, icons, or both.

It enables easy switching between an app’s top-level views for the user. It is preferable to use a side navigation bar while utilising a larger screen.

In Flutter applications, the scaffold widget is typically set in conjunction with the bottom navigation bar. To set the bottom navigation bar, use the Scaffold widget’s Scaffold.bottomNavigationBar parameter.

It should be noted that adding the BottomNavigationBar alone will not cause the navigation elements to appear. For Items properties that take a list of BottomNavigationItems widgets, the BottomNavigationItems property must be set.

BottomNavigationBar Widget properties

BottomNavigationBarItem({  
    @required this.icon,  
    this.title,  
    Widget activeIcon,  
    this.backgroundColor,  
  })

Creating the Bottom Tab Bar Example Given below:

Open the lib/main.dart file in your project directory and replace the code with the following:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class TabbarDisplay extends StatefulWidget {
  @override
  TabbarDisplayState createState() => TabbarDisplayState();
}

class TabbarDisplayState extends State<TabbarDisplay> {
  int _currentIndex = 0;
  final List<Widget> _tabs = [
    Tab1(),
    Tab2(),
    Tab3(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bottom Tab Bar Example'),
        automaticallyImplyLeading: false,
      ),
      body: _tabs[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Tab 1',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Tab 2',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Tab 3',
          ),
        ],
      ),
    );
  }
}

class Tab1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Tab 1 Content'),
    );
  }
}

class Tab2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Tab 2 Content'),
    );
  }
}

class Tab3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Tab 3 Content'),
    );
  }
}

Explaination of that code

The root widget of the Flutter app created in this code is a MaterialApp. To control the status of the bottom tab bar, we construct a MyHomePage widget that extends StatefulWidget inside of it.

Users can switch between tabs by using the BottomNavigationBar widget, which is added to the Scaffold’s bottomNavigationBar property. Using BottomNavigationBarItem, we create three tabs, each with a label and an icon.

The currently chosen tab is tracked by the BottomNavigationBar’s currentIndex attribute. The state is updated and the current tab is modified by the onTap callback.

Each tab’s content is represented by a different widget (Tab1, Tab2, Tab3). For each tab, you can swap out these widgets with your own original content.

Output :

Related Posts

Tabbar with image in flutter

Simple Tabbar in Flutter

Progress Bars Example in Flutter

Creating a Splash Screen in Flutter

Remove DEBUG Banner in the Flutter app

Rounded Corners Image in Flutter

Mobile apps frequently employ tabs as a UI pattern because they make it simple for users to switch between various content parts.

The TabBar and TabBarView widgets in Flutter can be used to build a tabbed interface.

Tabs are precisely what you assume they are. When clicked, it’s a component of the user interface that directs the user through several paths (i.e., pages).

It is common practise to use tabs in applications. Using the material library and Flutter, tab layouts may be easily created. We will investigate the same in detail in this essay.

Make a new Flutter application now. Once the programme is finished, remove all the comments and content until you are left with the following code:

Design of TabController

The TabController, as its name suggests, manages each tab’s operation by synchronising its tabs and contents. One of the simplest methods for creating tabs in flutter is to use the DefaultTabController widget. Below are the full code of Tabbar :

class TabbarDisplay extends StatefulWidget {
  @override
  TabbarDisplayState createState() => TabbarDisplayState();
}

class TabbarDisplayState extends State<tabbardisplay> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3, // Number of tabs
        child: Scaffold(
          appBar: AppBar(
            title: Text('Tech Android Hub'),
            bottom: TabBar(
              tabs: [
                Tab(text: 'Tab 1'),
                Tab(text: 'Tab 2'),
                Tab(text: 'Tab 3'),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              Center(child: Text('First Tab 1')),
              Center(child: Text('Second Tab 2')),
              Center(child: Text('Third Tab 3')),
            ],
          ),
        ),
      ),
    );
  }
}

In this code, we create a new Flutter application with a MaterialApp as the root widget. Inside it, we use a DefaultTabController to handle the tab logic.

The TabBar widget is placed inside the AppBar and provides the tab titles. We create three Tab widgets, each with a different text label.

The TabBarView widget contains the content of each tab. In this example, we use simple Text widgets wrapped in Center widgets for demonstration purposes. You can replace them with your own content widgets.

You discovered how to use TabBar and TabBarView to build a tabbed interface in Flutter in this tutorial. In developing mobile applications, using tabs to organise content and improve user experience is a great strategy.

Feel free to play around with various content widgets and alter the tab’s layout to fit the style of your app. For building complex and interactive user interfaces, Flutter offers a flexible and user-friendly framework.

Happy coding!

Related Posts

Progress Bars Example in Flutter

Creating a Splash Screen in Flutter

Remove DEBUG Banner in the Flutter app

Rounded Corners Image in Flutter

Example of a checkboxlisttile in flutter