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.
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.
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:
Working with Tabs
Working with tabs is a common pattern in apps following the Material Design guidelines. Flutter includes a convenient…
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
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
inset according to
You can access it from here:
bubble_tab_indicator | Flutter Package
bubble_tab_indicator Flutter and Dart package - A Flutter library to add bubble tab indicator to TabBar
You can also look at the source code from here:
A Flutter library to add bubble tab indicator to TabBar. Add package from github by adding the following to your…
P.S: This was my first dig at flutter ;)