Question: how to set the style/colour of the close icon

[icecandy]

Hi.

I have tried everything and looked at all theming parameters, but I can't work out how to theme the close icon.

I see how to replace the icon data with a different graphic, but I need to be able to specify the colour or tint of the icon separately in the unselected tab state and the selected tab state. There also seems to be a background colour of the icon which is being used as well - or at least the background of the icon is not transparent. I would prefer the icon background to be transparent and only have to set the tint/colour of the icon.

How do I do this? Thanks in advance.

[caduandrade]

Hi @icecandy ! Sorry for the delay in responding.

I believe you need something like this:

    TabbedViewThemeData themeData = TabbedViewThemeData.classic();

    // themeData.tab for global configuration (unselected tab as well)
    themeData.tab.normalButtonColor = Colors.red;
    themeData.tab.hoverButtonColor = Colors.purple;
    themeData.tab.disabledButtonColor = Colors.orange;
    // no background
    themeData.tab.disabledButtonBackground = null;
    themeData.tab.normalButtonBackground = null;
    themeData.tab.hoverButtonBackground = null;

    // overriding the selected tabs...
    themeData.tab.selectedStatus.normalButtonColor = Colors.green;
    themeData.tab.selectedStatus.hoverButtonColor = Colors.pink;
    themeData.tab.selectedStatus.disabledButtonColor = Colors.blue;

    // overriding the hover tabs...
    themeData.tab.highlightedStatus.normalButtonColor = Colors.brown;
    themeData.tab.highlightedStatus.hoverButtonColor = Colors.teal;
    // only this makes sense in default config (buttons disabled if the tab is not selected)
    themeData.tab.highlightedStatus.disabledButtonColor = Colors.blue;

    TabbedViewTheme(child: tabbedView, data: themeData);

Let me know if it doesn't work or if you need something else.

[icecandy]

Thank you @caduandrade . I get this general stuff. This doesn't answer my question unfortunately.

My question is SPECIFICALLY about the close icon. How do I theme or set the colours of the close icon in all its states?

There seems no control over the theme/colours of the close icon. I can see how to change the shape of the icon by supplying either IconData or a Path, but not the colours.

At the moment I have changed my selected button colour to a dark colour, but the close icon is black and is hardly visible. My unselected button colour is white, but the icon colour seems to be white as well and so is invisible.

I need to be able to define the colours of the close icon in each of these states. Thanks.

PS the default close icon is an "X" or a cross in the right of the button.

[caduandrade]

Hi @icecandy !

My suggestion changes the colors of all icons. You would like to change only the close icon but not the others right?

If so, I can take a look. Maybe it could have something more like the MaterialStateColor. A single class that identifies the color for each tab state. TabStateColor...

What do you think?

[icecandy]

@caduandrade so I've been playing with different colour combinations as you stated in your first reply. It is a nightmare to work out how these work. Indeed colour/style configuration for the whole package is really confusing. The overrides and the hierarchy of config properties is not clear at all.

Calling things "button" when sometimes it refers to the tab body and sometimes to the close icon is particularly confusing. It would help to call a tab property "tabXXXXX", and close icon property "closeIconXXX" for example. (PS I am not using the menu at all) Certainly I would love to have seperate configurations for the "tab body" style - meaning the main background colour and decoration - and the "close icon" style. I'm not sure what the best way would be for this, but as you suggest maybe a MaterialStateColor that encapsulates the different states might work.

PS I have made some progress, but am stuck on the selected tab close icon colour at the moment.

[caduandrade]

Great.

About the "button" properties, it always means "icon button" ok? Because these icons are buttons. In the future, the tab could have a leading icon (not a button). So "button" never is about tab body ok? For the tab body, there is the class TabThemeData.

This is the current hierarchy:

• TabbedViewThemeData
  • TabsAreaThemeData (buttons and body)
  • TabThemeData (buttons and body)
  • TabStatusThemeData (selectedStatus / buttons and body)
  • TabStatusThemeData (highlightedStatus / buttons and body)
  • TabStatusThemeData (disabledStatus / buttons and body)
  • ContentAreaThemeData
  • MenuThemeData

TabStatusThemeData has only a subset of configurable attributes of TabThemeData. In this case, the override scheme is to avoid boilerplate and configuration repetition. Same with Flutter theming.

This hierarchy is necessary because it would not be possible to have a single class with the numerous configurations. There are many and the attribute names would have to be very long.

It is also important to keep the way of global configuration as it is an acceptable use case to have a single color for all buttons.

Note that the configuration of buttons exists within the tab, as there are also buttons in the tabs area. The settings may be different for each of them.

I don't know if it would help to understand, but maybe the class hierarchy could be like this:

• TabbedViewThemeData
  • TabsAreaThemeData (body only)
  • ButtonsThemeData (NEW CLASS)
  • TabThemeData (body only)
  • ButtonsThemeData (NEW CLASS)
  • TabStatusThemeData (body only)
    • ButtonsThemeData (NEW CLASS)
  • ...
  • ContentAreaThemeData
  • MenuThemeData

But none of this solves your problem because currently, it is not possible to configure colors individually for different buttons (I understand that you have other buttons besides the close). I'll see how to allow having the global and individual configuration, considering the state of the tab, for the close button only or for each new button separately.

[icecandy]

Hi @caduandrade. Thank you so much for your comprehensive answers. I am still stuck however :(.

I only have one "button" in my tab: the right hand side "close" button - a cross icon. I would expect the following to set the colour of the "close button" in the selected state of the tab:

TabThemeData( selectedStatus: TabStatusThemeData( normalButtonColor: Colors.white, ...

This does not work. Is this a bug maybe?

[caduandrade]

I believe you are using some wrong combination. Remember that if you instantiate a TabbedViewThemeData without using the factories, it will come with all its null values and you will have to configure everything from scratch ok?

I did it in the package example (adding an extra button on the last tab):

    TabbedViewThemeData themeData = TabbedViewThemeData.classic();

    themeData.tab = TabThemeData(
        decoration: BoxDecoration(color: Colors.grey[900]),
        textStyle: TextStyle(color: Colors.grey),
        padding: EdgeInsets.all(4),
        buttonPadding: EdgeInsets.fromLTRB(4, 0, 0, 0),
        disabledButtonColor: Colors.grey[
            600]!, // button is disabled in non selected tab (default behavior)
        selectedStatus: TabStatusThemeData(
            normalButtonColor: Colors.white, fontColor: Colors.white));

Is this how you would like it?