PaneItem and TabView Color

mahery01 commented 2 months ago

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

bdlukaa commented 2 months ago

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 commented 2 months ago

@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 commented 1 month ago

¹ 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 / fluent_ui

PaneItem and TabView Color #1057