Flutter TabBar – Gradient Style

When you’re creating an app, you always try your best to make it as user friendly as possible, right? As a matter of fact, one way to do that is by allowing users to quickly navigate your app sections with a single swap or click. Well, that’s exactly the purpose of Tab Bar. Flutter TabBar is mainly used for navigation and is a common approach that follows the material design guidelines. In this post, we’ll discuss how to create a tab bar in flutter inside an app bar within the Scaffold layout.

How to create Flutter TabBar?

To begin with, there are 3 basic steps for implementing the tab bar in your app

1. Create tab controller
2. Create the tabs
3. Create content for the tabs

Code Setup

One thing to mention is that in this example, we’ll be creating the tab bar within the app bar widget’s bottom section. If you’re not familiar with Scaffold App Bar, I’d suggest you read the previous article to be able to catch up this topic.

In the example below, I added a snippet of the setup code for you to begin with. This snippet includes the code to create the app bar’s title, leading section, and actions, within the Scaffold layout.

child: Scaffold(
  appBar: AppBar(
    title: Text('Scaffold Widget'),
    centerTitle: true,
    flexibleSpace: Container(
      decoration: BoxDecoration(
          gradient: LinearGradient(
              colors: [Color(0xffe52165),
                Colors.orangeAccent,
              ],
              begin: Alignment.bottomRight,
              end: Alignment.topLeft//where to begin
          )
      ),
    ),
    elevation: 10,  //shadow
    titleSpacing: 10,  //space between leading icon and title
    leading: IconButton(
      icon: Icon(Icons.menu),
      onPressed: () {},
    ),
    actions: [
      IconButton(
        onPressed: () {},
        icon: Icon(Icons.notifications_none),),
      IconButton(
        onPressed: () {},
        icon: Icon(Icons.search),)
    ], 
),

1. Create tab controller

To start with, the first step in creating the tab bar is to create the tab controller. Tab controller is what keeps the tabs and sections in sync. To complete this step, you need to wrap the Scaffold widget with a DefaultTabController. To do this easily, you can click (Alt + Enter) and select “wrap with widget” then type the name of the widget if you’re using Android Studio. Default tab controller has one compulsory property, the length, which specifies the number of tabs within the tab view.

return DefaultTabController(
  length: 3,
  child: Scaffold(..),
   );

2. Create tabs

You can create tabs using the TabBar widget that you need to place in the bottom part of the AppBar Widget. Tab Bar is a material design widget that you can use to display horizontal row of tabs. Take note that the number of tabs needs to match the length you entered in the tab controller to avoid errors.

Some of the Tab Bar properties:

• tabs[]: takes a list of two or more Tab widgets
• indicator: defines how the selected tap’s indicator looks. The indicator is the line that appears below the selected tab’s label.
• indicatorColor: specifies the color of the indicator
• indicatorPadding: defines the padding of the indicator.
• indicatorWeight: the thickness of the indicator’s line.
• isScrollable: defines whether the tabs can be scrolled horizontally. you can set it to true when there’s plenty of tabs in your app.
• labelColor: specifies the color of the tab’s label.
• labelPadding: specifies the padding, available space, between the label’s text and tab.
• labelStyle: specifies the style for the text of the label.
• onTap(): a method that is called when the user taps on the tab.
• unselectedLabelColor: defines the label color for the tabs which are not selected.
• unselectedLabelStyle: defines the label text style for the tabs which are not selected.

Example

bottom: TabBar(
  indicatorColor: Colors.white,
  indicatorWeight: 5,
  isScrollable: true,
  tabs: [
    Tab(icon: Icon(Icons.home), text: 'Home'),
    Tab(icon: Icon(Icons.face), text: 'Profile'),
    Tab(icon: Icon(Icons.settings), text: 'Settings'),
  ],
),

Output

3. Create content

Now that you have your tabs created, it’s time to create content for them. To achieve this, we’ll be using TabBarView widget within the Scaffold body section. This is a page view that displays the widget based on the selected tab. It takes a list of widget as its children and the number of its children must be equal to the length of the tab controller.  Since we have 3 tabs in our example, we’ll add 3 children widgets to our TabBarView. Each of these pages will contain a simple centered text displaying the page’s title. Also, to keep the code organized, we’ll be creating a method (buildPage) that returns a widget and we’ll use that method in the TabBarView.

buildPage() Example

Widget buildPage(String text) {
  return Center(
    child: Text(
        text,
      style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold)
    ),
  );

}

TabBarView Example

body: TabBarView(
  children: [
    buildPage('Home Page'),
    buildPage('Profile Page'),
    buildPage('Settings Page'),
  ],
),

Output

Conclusion

And there you have it, a complete guide on how to build a tab bar in your Flutter application. Flutter TabBar is one of the most common approaches used by developers, so make sure you know them well.
Wanna learn more about Flutter? I have category called Flutter that’s ripe for you to explore. You can learn about Flutter widgets, layouts, and practice with a bunch of real examples. Also, don’t forget to subscribe to my blog to be one of the firsts to know about my newest posts!