Flutter: Custom tab indicator for TabBar

Welcome to this tutorial to create a custom tab indicator for TabBar in Flutter.

You can connect with me on Instagram

Let’s start by seeing our end goal-

Customization Options

We can implement Customize tab bar in three ways:

1. Using a Stack Widget and then adding elements to stack on different levels(stacking components like Tabs, above BoxDecoration container). But then we will have to do all the animations and changing the position of the BoxDecoration on tabs current index change.
2. Using provided implementation of Decoration and then setting it to indicator property of TabBar

• BoxDecoration
• FlutterLogoDecoration
• ShapeDecoration
• UnderlineTabIndicator

3. Implementing a custom decoration for TabBar indicator and then setting it to indicator property of TabBar

SPOILER

Third option is the best one as we don’t have to re-invent the wheel and the 2nd option is limited.

Let’s Start

1. Add TabBar:

Here we will not talk about implementing TabBar in Flutter. If you need help implementing TabBar in flutter, check out this documentation from flutter team:

Work with tabs

TabBar class

Here is the starter code-

2. Implementing custom tab indicator:

Let’s see what we have done in the above code snippet-

1. Created a class named CircleTabIndicator and extended class Decoration
2. Created a field _painter of type BoxPainter to store our custom painter to draw the indicator
3. Created a constructor and passed two parameters:

• color — Specifies the color of the circle indicator
• radius — Specified the radius of the circle indicator

4. Overriding the createBoxPainter([onChanged]) method which returns a BoxPainter that will paint this decoration (In our case _painter). The parameter can be omitted if there is no chance that the painter will change.

3. Implementing custom box painter:

Now, we will create our custom painter which will be of type BoxPainter.

Let’s see what we have added in the above code snippet-

1. Created a class named _CirclePainter and extended BoxPainter
2. Created fields named _paint and radius.
3. Created a constructor and passed two parameters:

• color — Specifies the color of the circle indicator
• radius — Specified the radius of the circle indicator
• Initialized _paint

4. Overriding the paint() method which draws the circle based on radius, paint and position

4. Updating the indicator:

Now let’s update the TabBar indicator

Let’s check the output-

praying

Check the project here or gist here.

Thank you for staying till the end

More flutter spinner blogs-

Custom Spinner Tooltip — Flutter

Flutter — Custom Spinner Thumb

Flutter — Custom Spinner Thumb -Part 2

I will be posting more about flutter, so stay tuned :)

Gursheesh Singh - Chandigarh, Chandigarh, India | Professional Profile | LinkedIn

Gursheesh Singh

Gursheesh singh