How to set tab bar indicator color at Material App theme level?

[davoutuk]

Ever since I deployed 'flex_color_scheme' into my Android app, with tab bar's in the body area it is no longer showing the current selected tab with an indicator underline.

How do I set at a MaterialApp theme level a configuration for the tab bar so that an indicator is shown?

[rydmike]

Hi @davoutuk, thanks for your question.

Can you show me how you are expecting things to look? What your use case looks like? It is a bit unclear to me. I can only answer generally below.

There are many ways to style the TabBar with FlexColorScheme. Its default behavior also depends on if you are using M3 or old M2 mode.

The TabBar is designed to by default use a theme that fits in the AppBar theme use for the app. If you use the TabBar in a body, which you can, you may have to style or theme it to fit in the body, concerning its contrast colors. In M3 mode it typically fits be default, since default AppBar theme uses same style with same contrast requirements as the default body style need.

Example default M3 TabBar:

M3 Light	M3 Dark

In M3 mode the TabBar works nicely on other surfaces too (body), as shown above.

Example default M2 TabBar:

M2 Light	M2 Dark

In light mode in M2 mode the TabBar will only work contrast wise in dark mode on in the body, in light mode it will not work, since the TabBar has another contrast need to fit in the AppBar theme. You can in FCS select if the AppBar theme should follow the needs of the AppBar or background contrast, by setting property tabBarStyle: FlexTabBarStyle.forBackground:

Alternatively you can use direct color selections for its theme when using sub-themes in FCS. Using them will override any tabBarStyle setting used:

I recommend using the Themes Playground to see what styling results in what API settings and just copying the lines you need for your desired themeing:

It is important to notice that you cannot make a TabBar theme that will nicely in both the AppBar and body on surface colors, if the body and AppBar has different contrast requirements. As demonstrated above.

This is Flutter theme limitation, since you can only have one theme for the TabBar. If the AppBar surface color, have the same contrast need or if you only use TabBar in the body or the AppBar, then it is not a problem, you can make a theme that fits where you use it.

If you do need to use a TabBar in different places with different contrast color needs, you can on widget level style the one that has wrong contrast, or wrap that part of widget tree with a sub-theme that has the right style for that tree branch.

---

If none of the easy config options in FCS work for your use case, you can also override any component theme FCS has made, with your own. See the Discussions section to find many past examples on how to do this with other component themes used as examples.