Flutter Boring tab to Cool tab

The default tabs styles provided by the flutter is kind of boring. But It doesn’t say we cannot customize the look and the feel of the tab.

Best and easy customization can be done by changing the tab indicator. In this article, I will show you how to add 5 different tab styles for our next app.

First, we need to create a basic tab. In here I used DefaultTabController.You can assign DefaultTabController to a home parameter of the MaterialApp widget. For the child of DefaultTabController, you can use Scaffold with the appbar and the body. For the appBar you can assign Appbar widget to make header part of the tabs. For the body, you can add the TabBarView widget with the 3 child Widgets to show the item when you click the tabs.

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 🏵️

In here 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 I will add a red colour border to each tab headers. When you selected the tab It will fill with the red colour. If you are not interested in the border, you can just remove the border adding the part and 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 🤗

References

https://flutter.dev/docs/cookbook/design/tabs

https://api.flutter.dev/flutter/painting/BeveledRectangleBorder-class.html

Leave a Reply