5 Ways of styling Tabs in Flutter

5 Ways of styling Tabs in Flutter

The default tabs styles provided by the flutter SDK is not much appealing. But It doesn’t mean cannot customize the look and the feel of the tab. Customizing the style of the tabs indicator in Flutter can be done with simple lines of code without implementing our own widget.

In this article, I will show you how to add 5 different tab styles for our next flutter project.

First, you need to create a basic tab using DefaultTabController class. Assign DefaultTabController to a home property of the MaterialApp widget. As the child of DefaultTabController, you can use Scaffold with the Appbar and the body. Assign Appbar widget to Appbar property of the Scaffold to make the header part of the tabs. For the body property of scaffold, you can assign TabBarView widget with the 3 child Widgets to show the tab content item when you click.

Check the full code for default tab.


DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            elevation: 0,
            bottom: TabBar(indicatorSize: TabBarIndicatorSize.label, tabs: [
              Tab(
                child: Align(
                  alignment: Alignment.center,
                  child: Text("APPS"),
                ),
              ),
              Tab(
                child: Align(
                  alignment: Alignment.center,
                  child: Text("MOVIES"),
                ),
              ),
              Tab(
                child: Align(
                  alignment: Alignment.center,
                  child: Text("GAMES"),
                ),
              ),
            ]),
          ),
          body: TabBarView(children: [
            Icon(Icons.apps),
            Icon(Icons.movie),
            Icon(Icons.games),
          ]),
        )
    )

1.Round Corners 🏵️

As a First style, we are going to add a round corner style to the tab indicator. First of all, I will give a brief description of the param which we are going to modify.

  • unselectedLabelColor – Color of the label where the indicator not present. Basically, the indicator which is not selected yet.
  • indicatorSize – Selected Indicator size. We can add two value to take the indicator the tab width or the label width.
  • indicator – This is the place we are going to assign our custom style for indicator
    tabs – This will contain the list of tab headers. In here we can add extra style to each tab headers.

Round corner style can be done by adding BoxDecoration with borderRadius 50.

Then In here, we are adding a red colour border to each tab headers. When someone select the tab It will fill with the red colour. If you are not interested in the border, you can just remove the border keep it simple.

flutter round corner tabs

DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.white,
          elevation: 0,
          bottom: TabBar(
              unselectedLabelColor: Colors.redAccent,
              indicatorSize: TabBarIndicatorSize.label,
              indicator: BoxDecoration(
                  borderRadius: BorderRadius.circular(50),
                  color: Colors.redAccent),
              tabs: [
                Tab(
                  child: Container(
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(50),
                        border: Border.all(color: Colors.redAccent, width: 1)),
                    child: Align(
                      alignment: Alignment.center,
                      child: Text("APPS"),
                    ),
                  ),
                ),
                Tab(
                  child: Container(
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(50),
                        border: Border.all(color: Colors.redAccent, width: 1)),
                    child: Align(
                      alignment: Alignment.center,
                      child: Text("MOVIES"),
                    ),
                  ),
                ),
                Tab(
                  child: Container(
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(50),
                        border: Border.all(color: Colors.redAccent, width: 1)),
                    child: Align(
                      alignment: Alignment.center,
                      child: Text("GAMES"),
                    ),
                  ),
                ),
              ]),
        ),
        body: TabBarView(children: [
          Icon(Icons.apps),
          Icon(Icons.movie),
          Icon(Icons.games),
        ]),
      ))

2.Round Corners with Gradient 🍭

In here I removed the style which I was added to each tab. After that added a gradient to BoxDecoration. In here I used LinearGradient with two colours. You can change the gradient-based on your preferences.

flutter round corner with gradient tabs

DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.white,
            elevation: 0,
            bottom: TabBar(
                unselectedLabelColor: Colors.redAccent,
                indicatorSize: TabBarIndicatorSize.tab,
                indicator: BoxDecoration(
                    gradient: LinearGradient(
                        colors: [Colors.redAccent, Colors.orangeAccent]),
                    borderRadius: BorderRadius.circular(50),
                    color: Colors.redAccent),
                tabs: [
                  Tab(
                    child: Align(
                      alignment: Alignment.center,
                      child: Text("APPS"),
                    ),
                  ),
                  Tab(
                    child: Align(
                      alignment: Alignment.center,
                      child: Text("MOVIES"),
                    ),
                  ),
                  Tab(
                    child: Align(
                      alignment: Alignment.center,
                      child: Text("GAMES"),
                    ),
                  ),
                ]),
          ),
          body: TabBarView(children: [
            Icon(Icons.apps),
            Icon(Icons.movie),
            Icon(Icons.games),
          ]),
        )
     )

3.Square Style 🖼️

Square style can be done by changing small code in the previous one. BorderRadius of the boxDecoration can be changed by adding 10 for both leftTop and rightTop. Then I change the appbar backgroundColor to the red to make it look better.

flutter  square tabs styling

DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.redAccent,
            elevation: 0,
            bottom: TabBar(
                labelColor: Colors.redAccent,
                unselectedLabelColor: Colors.white,
                indicatorSize: TabBarIndicatorSize.label,
                indicator: BoxDecoration(
                    borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(10),
                        topRight: Radius.circular(10)),
                    color: Colors.white),
                tabs: [
                  Tab(
                    child: Align(
                      alignment: Alignment.center,
                      child: Text("APPS"),
                    ),
                  ),
                  Tab(
                    child: Align(
                      alignment: Alignment.center,
                      child: Text("MOVIES"),
                    ),
                  ),
                  Tab(
                    child: Align(
                      alignment: Alignment.center,
                      child: Text("GAMES"),
                    ),
                  ),
                ]
            ),
          ),
          body: TabBarView(children: [
            Icon(Icons.apps),
            Icon(Icons.movie),
            Icon(Icons.games),
          ]),
        )
     )

4.Diamond Style 💎

Diamond tab style can be done by adding ShapeDecoration with BeveledRectangleBorder for the shape parameter.BeveledRectangleBorder will allow you to add flatten corner instead of round corners.

The line segments that connect the rectangle’s four sides will begin and at locations offset by the corresponding border radius, but not farther than the side’s center. If all the border radii exceed the sides’ half widths/heights the resulting shape is diamond made by connecting the centers of the sides.

BeveledRectangleBorder – flutter.dev

In here I used borderRadius as 10 to make it look like this.

flutter  diamond tabs styling

DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.white,
            elevation: 0,
            bottom: TabBar(
                unselectedLabelColor: Colors.redAccent,
                indicatorPadding: EdgeInsets.only(left: 30, right: 30),
                indicator: ShapeDecoration(
                    color: Colors.redAccent,
                    shape: BeveledRectangleBorder(
                        borderRadius: BorderRadius.circular(10),
                        side: BorderSide(
                          color: Colors.redAccent,
                        )
                    )
                ),
                tabs: [
                  Tab(
                    child: Align(
                      alignment: Alignment.center,
                      child: Text("APPS"),
                    ),
                  ),
                  Tab(
                    child: Align(
                      alignment: Alignment.center,
                      child: Text("MOVIES"),
                    ),
                  ),
                  Tab(
                    child: Align(
                      alignment: Alignment.center,
                      child: Text("GAMES"),
                    ),
                  ),
                ]),
          ),
          body: TabBarView(children: [
            Icon(Icons.apps),
            Icon(Icons.movie),
            Icon(Icons.games),
          ]),
        )
     )

5.Diamond Style 2 ♦️

Likewise, by changing the borderRadius of the BeveledRectangleBorder, you can achieve different styles. In here I used borderRadius as 20. You can try different styles by changing this borderRadius value.

flutter diamond tabs styling

DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.white,
            elevation: 0,
            bottom: TabBar(
                unselectedLabelColor: Colors.redAccent,
                indicatorPadding: EdgeInsets.only(left: 30, right: 30),
                indicator: ShapeDecoration(
                    color: Colors.redAccent,
                    shape: BeveledRectangleBorder(
                        borderRadius: BorderRadius.circular(20),
                        side: BorderSide(
                          color: Colors.redAccent,
                        ))),
                tabs: [
                  Tab(
                    child: Align(
                      alignment: Alignment.center,
                      child: Text("APPS"),
                    ),
                  ),
                  Tab(
                    child: Align(
                      alignment: Alignment.center,
                      child: Text("MOVIES"),
                    ),
                  ),
                  Tab(
                    child: Align(
                      alignment: Alignment.center,
                      child: Text("GAMES"),
                    ),
                  ),
                ]),
          ),
          body: TabBarView(children: [
            Icon(Icons.apps),
            Icon(Icons.movie),
            Icon(Icons.games),
          ]),
        )
     )

I hope you get a better understanding of how to change the tab style by a few lines of code. If you are like to watch this in action, please watch the video mentioned below.

Don’t forget to subscribe my channel 🤗

This Post Has 4 Comments

  1. Some truly nice and utilitarian information on this internet site, besides I believe the pattern contains excellent features.

  2. You can certainly see your enthusiasm in the paintings you write. The sector hopes for more passionate writers such as you who are not afraid to mention how they believe. At all times go after your heart.

  3. Hello! Someone in my Myspace group shared this site with us so I came to look it over. I’m definitely loving the information. I’m book-marking and will be tweeting this to my followers! Exceptional blog and excellent style and design.

  4. Hiya, I am really glad I’ve found this info. Today bloggers publish just about gossips and web and this is really frustrating. A good web site with exciting content, that is what I need. Thanks for keeping this web-site, I will be visiting it. Do you do newsletters? Cant find it.

Leave a Reply