Option to change `TabView` background color

[mahery01]

Hello to all, How to change the background PaneItem and selected TabView?

[bdlukaa]

You can provide a navigationPaneTheme in FluentTheme:

theme: FluentThemeData(
  navigationPaneTheme: NavigationPaneThemeData(
    tileColor: ButtonState.resolveWith((states) {
      return ...; // return color here based on the state.
    }),
  ),
)

We don't have an option to change background color on TabView. One hack is to change the FluentThemeData.resources values that are used in TabView.

https://github.com/bdlukaa/fluent_ui/blob/52c0b0e7d9800f8414f737236f297b129b8a5d8b/lib/src/controls/navigation/tab_view.dart#L872-L899

[mahery01]

@bdlukaa Thank you for your response. Could you please provide an example for both questions? I've tried but I can't seem to do it. Thank you in advance

[bdlukaa]

¹ is provided at the previous response.

²

FluentTheme(
  data: FluentTheme.of(context).copyWith(
    resources: ResourceDictionary(
      layerOnMicaBaseAltFillColorTransparent: Color(...),
      ...,
    ),
  ),
  child: TabView( ... )
),

The previous response shows what colors are used on the TabView.

[bdlukaa]

To change the background of a selected Tab, use Tab.selectedBackgroundColor. Use Tab.backgroundColor to change the background color of unselected tabs.

To change the background of a PaneItem, use PaneItem.tileColor and `PaneItem.selectedTileColor