Flutter: Bubble tab indicator for TabBar
Recently, I have been exploring Flutter and decided to make a beautiful, clean app for both Android & iOS using Flutter. While wire-framing the app, I thought of a custom tab-indicator of the view. But after some research didn’t find any existing package having a custom tab-indicator implementation. So, I thought of digging this myself.
Thought Process
We can implement this in two ways:
- Using a Stack Widget and then adding elements to stack on different levels(stacking components like Tabs, above BoxDecoration container). But I will have to do all the animations and changing the position of the BoxDecoration on tabs current index change.
- So, I thought of implementing the custom decoration for TabBar indicator and then setting it to
indicatorproperty of TabBar.
Conclusion: No doubt second option is a better one, as it will use all the underlying functionality of TabBar and TabController. So, we don’t have to re-invent the wheel.
Getting Started
- Adding
TabBar: Here I will not talk about implementing TabBar in Flutter. If you need help implementing TabBar in flutter, check out this documentation from flutter team:
2. Implementing custom decoration/indicator: This is what we are here for ;) We will first create a class CustomTabIndicator which will extend Decoration class from flutter foundation packages.
3. Now, we will create a custom BoxPainter which will be used to paint the view on canvas (just like android). In this section, we will be creating a rounded rectangular box according to the TabBarIndicatorSize width.
You will see: The TabBar is now having a rounded rectangle indicator covering the entire tab.
3. So, what we need to do now is adjusting the rounded rectangle indicator height, width and corner radius. We can do this by setting the values by hit and trial method, as I wasn’t able to figure out a way to actually get the size of text inside the Tab .
After changing the code, creating a new rectangle offset and size. You will see something like this:
Now, we understood the basics to get the things done correctly. Final result will be:
I made the dart-package for this, so we don’t need to write code again and again. With this package I have provided properties to customise the indicatorHeight , indicatorColor , indicatorRadius , padding or inset according to tabIndicatorSize i.e TabBarIndicatorSize.tab or TabBarIndicatorSize.label .
You can access it from here:
You can also look at the source code from here:
P.S: This was my first dig at flutter ;)
