Custom decorations for unselected tabs

[Omegaki113r]

Great project by the way.

I am using your docking library to develop. I was going through documentation and issues but i didn't found anything that is related to this. I am using Tabbed Docking from your library and i want 2 selected tab to look like physical buttons. Selected Tabs looks like it's Pressed and unselected ones will look like they are popping out of the screen.

So the selected behaviour is working as expected. But i don't see any API to set the decoration for the unselected tabs. I want my tabs to look like the buttons (popped out).

Can you let me know whether you have an API for this behaviour i am trying to make?

[caduandrade]

Hi @Omegaki113r!

You can change the TabThemeData that is inside the TabbedViewThemeData.

This class represents the normal state of the tab (not selected). You can override some attributes for the states (selected, disabled and hover) using the TabStatusThemeData that is inside the TabThemeData.

As there are a lot of configuration options, it gets a little confusing but here is a simple example I made to change the example committed to the project:

    TabbedViewThemeData themeData = TabbedViewThemeData.classic();
    themeData.tab
      ..decoration = BoxDecoration(color: Colors.green)
      ..selectedStatus.decoration = BoxDecoration(color: Colors.blue)
      ..highlightedStatus.decoration = BoxDecoration(color: Colors.yellow);

    TabbedView tabbedView = TabbedView(controller: _controller);
    return Scaffold(
        body: Container(
            child: TabbedViewTheme(child: tabbedView, data: themeData),
            padding: EdgeInsets.all(32)));

To achieve the same effect you can configure the decoration as you would with Container Flutter. You can use a BoxDecoration.

You can see more some examples in https://caduandrade.github.io/tabbed_view

[Omegaki113r]

Hi @Omegaki113r!

You can change the TabThemeData that is inside the TabbedViewThemeData.

This class represents the normal state of the tab (not selected). You can override some attributes for the states (selected, disabled and hover) using the TabStatusThemeData that is inside the TabThemeData.

As there are a lot of configuration options, it gets a little confusing but here is a simple example I made to change the example committed to the project:

    TabbedViewThemeData themeData = TabbedViewThemeData.classic();
    themeData.tab
      ..decoration = BoxDecoration(color: Colors.green)
      ..selectedStatus.decoration = BoxDecoration(color: Colors.blue)
      ..highlightedStatus.decoration = BoxDecoration(color: Colors.yellow);

    TabbedView tabbedView = TabbedView(controller: _controller);
    return Scaffold(
        body: Container(
            child: TabbedViewTheme(child: tabbedView, data: themeData),
            padding: EdgeInsets.all(32)));

To achieve the same effect you can configure the decoration as you would with Container Flutter. You can use a BoxDecoration.

You can see more some examples in https://caduandrade.github.io/tabbed_view

Amazing.. This is what i needed to do..

now i get the exact result i wanted. Thanks for the Quick reply and help