Hello, Learners! In this article, we will learn about TabBar in Flutter, how to implement it, and how to customize it to suit our needs.
In Flutter TabBar is a widget in Flutter that allows users to navigate between different views or pages in an application by using a series of tabs. It is commonly used when there are multiple screens or content sections that can be organized into tabs for easy navigation.
Introduction
Let’s take an example to start understanding the TabBar in Flutter. If you use Facebook, you’ve probably seen the navigation TabBar at the top of the app—that’s called a TabBar.
How it works
To implement a TabBar in your UI, you can use an AppBar. If you’re unsure how to implement an AppBar, check out this article: Exploring AppBar in Flutter – Tips and Tricks. You typically place the TabBar inside the bottom property of an AppBar.
Basic Components of TabBar
- TabController: Manages the state of the tabs and connects the tabs to their content views.
- TabBar: Displays the tabs.
- TabBarView: Shows the content associated with each tab.
Important Properties in TabBar
- tabs: This is where you define the list of widgets (normally
Tabwidgets) that represent the tabs. - TabController: This controls the tab behavior, like which tab is selected.
- isScrollable: Whether the tab bar can be scrolled horizontally if there are too many tabs to fit on the screen.
- indicatorColor: The color of the indicator that appears below the currently selected tab.
- labelColor and unselectedLabelColor: The color of the text of the selected tab and unselected tabs, respectively.
- onTap: You can provide a function that gets triggered when a tab is tapped.
TabBar in Flutter
Step 1:
Let’s understand from scratch how to build a TabBar in Flutter. The HomePage extends StatefulWidget, which is the main widget where you define your app’s structure. Since the app will have interactive tabs, it extends StatefulWidget to allow changes to its state.
_MyHomePageState (State): This class handles the logic and UI for MyHomePage. It manages the state, particularly controlling the tab switching using a TabController.
Step 2:
Now in stateful widget we need to initialize the TabBar Controller becasue the _tabController variable is responsible for managing the tabs. In initState(), the controller is initialized with 3 tabs. The vsync helps with animations, ensuring smooth transitions between the tabs.
Step 3:
Inside the Scaffold Widget the top bar of the app shows the title “TabBar Example” and contains a TabBar at the bottom with three tabs (Tab 1, Tab 2, Tab 3).
TabBar
It’s the set of tabs at the top. Each tab has text (“Tab 1”, “Tab 2”, “Tab 3”) and is connected to the TabController, allowing the app to switch between them.
TabBar View
TabBarView: Below the tabs, this widget displays the content for each tab. It uses the TabController to show different content depending on the active tab. In this case, the content is simple text (“Content for Tab 1”, “Content for Tab 2”, “Content for Tab 3”).
Customizing the TabBar
Flutter offers various ways to customize the appearance and behavior of a TabBar. Here are some common customizations:
1. Changing the TabBar Color:
You can change the background color of the TabBar and the selected/unselected tab color using the indicatorColor, labelColor, and unselectedLabelColor properties.
That’s how you can create your TabBar in Flutter. If my guidance helped you, feel free to share your TabBar Screenshot in the comment section — I’d love to see it! Don’t forget to share.
Thank you for taking the time to read! Feel free to explore more of our content or leave a comment below.