How to create a tab bar using TabBar in Flutter

Key takeaways:
Flutter is a versatile toolkit by Google for building fast applications across mobile, web, and desktop platforms with a single codebase.
A tab bar is a user interface component that organizes content into separate sections, allowing users to navigate between them.
Flutter provides a TabBar widget, part of the material library, commonly used in conjunction with TabBarView and TabController to manage tabbed content.
The TabBar widget contains the list of all tabs using the Tab property to represent different sections.
The TabBarView widget displays the corresponding content for each tab when selected, maintaining the same order as the tabs.

Flutter is a powerful toolkit created by Google to build fast mobile, web, and desktop applications using just one Codebase. It offers an easy-to-use and flexible development environment, making it a popular choice for developers to create beautiful and responsive user interfaces across multiple platforms.

TabBar

TabBar typically refers to a user interface component used for navigation or organizing content into separate sections. It usually consists of a row or column of tabs, each representing a different section of the application. Users can click these tabs to switch between different sections within the app.

Flutter provides a TabBar widget, which is a part of material library, which is commonly used to implement the tab bars. This widget is commonly used with some other widgets to manage the content that appears when each tab is selected, such as TabBarView and TabController.

Creating a tab bar

Let’s follow the steps below to create a tab bar in the Flutter application:

1- Create a Flutter project

Let’s start by creating a new Flutter project. For this, open the terminal and execute the following commands:

2- Create the user interface

Let’s create a simple TabBar inside the TabBarExample class in main.dart file. We have used DefaultTabController widget to control the actions of the TabBar. We have set the number of tabs to three by setting the length property to 3. The initialIndex property defines the tab that is opened when the page is opened. Let’s set this property to 1. Then, we used the TabBar property, which contains the list of all the tabs using the Tab property.

Next, we used the TabBarView widget, which contains the list of all the contents that need to be displayed when a specific Tab is selected. The contents are in the same order as the tabs that were created before. Here is the code:

DefaultTabController(
  initialIndex: 1,
  length: 3,
  child: Scaffold(
    appBar: AppBar(
      title: const Text('TabBar Implementation'),
      bottom: const TabBar(
        tabs: <Widget>[
          Tab(
            icon: Icon(Icons.menu_book_rounded),
          ),
          Tab(
            icon: Icon(Icons.work),
          ),
          Tab(
            icon: Icon(Icons.business),
          ),
        ],
      ),
    ),
    body: const TabBarView(
      children: <Widget>[
        Center(
          child: Text("It's the study section"),
        ),
        Center(
          child: Text("It's the work section"),
        ),
        Center(
          child: Text("It's the business section"),
        ),
      ],
    ),
  ),
);

Note: You can find your application running at the given link once you run the code widget above.

Conclusion

Creating a tab bar in Flutter enhances user experience by providing a straightforward way to navigate between different sections of an application. By utilizing the TabBar, TabBarView, and DefaultTabController widgets, developers can easily implement a structured and intuitive interface. This allows users to access various content areas efficiently, making the app more engaging and user-friendly.

Frequently asked questions

Haven’t found what you were looking for? Contact Us

What is a DefaultTabController and why is it needed?

The DefaultTabController widget is a convenience widget that provides a default TabController to all descendant TabBar and TabBarView widgets. It manages the state and keeps track of the selected tab, making it easier to use without manually creating and managing a TabController.

How can we customize the appearance of a TabBar?

We can customize a TabBar using properties such as indicatorColor, indicatorWeight, labelColor, unselectedLabelColor, and labelStyle.

How can we make my TabBar scrollable when there are many tabs?

Set the isScrollable property of the TabBar to true. This allows the TabBar to scroll horizontally, enabling it to display more tabs than the available width would typically allow.

TabBar(
  isScrollable: true,
  tabs: [/* many tabs here */],
);

Free Resources