search

rydmike / flex_color_scheme

A Flutter package to make and use beautiful color scheme based themes.
Other
887 stars 100 forks source link

Using FlexColorScheme themedSystemNavigationBar I can set the system navigation bar styles, but unable to set the style of the status bar at the same time after use #229

Open laterdayi opened 2 months ago

laterdayi commented 2 months ago

Using FlexColorScheme themedSystemNavigationBar I can set the system navigation bar styles, but unable to set the style of the status bar at the same time after use

AnnotatedRegion<SystemUiOverlayStyle>(
      value: FlexColorScheme.themedSystemNavigationBar(
        context,
        systemNavBarStyle: FlexSystemNavBarStyle.transparent,
      )
)

I can't set the statusBarColor at this point

Is it possible to style the status bar and navigation bar at the same time as this API

AnnotatedRegion<SystemUiOverlayStyle>(
        value: FlexColorScheme.themedSystemNavigationBar(
          context,
          systemNavBarStyle: FlexSystemNavBarStyle.transparent,
          statusBarsStyle.:................., 
          statusBarsTheme:  statusBarsTheme.dark  or  statusBarsTheme.light
        ),
    )

@rydmike Looking forward to your help.

rydmike commented 2 months ago

Hi @laterdayi,

Thanks for you question. There are couple of options.

1. Use SystemUiOverlayStyle

The FlexColorScheme.themedSystemNavigationBar is just static small convenience helper for the SystemUiOverlayStyle. You can use it in the AnnotatedRegion value instead with its properties directly. You will have to extract desired colors from the active theme yourself instead. This will only work if the screen does not have an AppBar.

2. Set status bar colors in the AppBar.

If the page you are using includes an AppBar, the value defined for status bar colors in it will override the AnnotatedRegion status bar colors anyway, so it is pointless to define it in an AnnotatedRegion if you have an AppBar.

When using FlexColorScheme, the default status bar colors is using the appropriate contrast on status bar icons for the used active AppBarTheme. The ugly scrim used in Android by default in M2 mode can removed also in M2 mode with a simple toggle. 

theme: FlexThemeData.light(
  scheme: FlexScheme.deepPurple,
  transparentStatusBar: true, // No scrim on the AppBar status section in Android!
),

In M3 mode the scrim is removed by default as it is the new standard in M3, making Android AppBars look more like iOS AppBars.

To override and customize this further, the status bar colors in the AppBar is in both the theme and widget controlled via systemOverlayStyle property taking again a SystemUiOverlayStyle. While you can define the systemXX properties in it, in addition to the statusXX properties, only the statusXX properties have any effect, so the systemXX still needs to be set in an AnnotatedRegion. Imo very annoying, I have suggested they should work also from AppBar, but last I tried they did not. There is an issue for it in Flutter repo.

3. Page has no AppBar

My page has no AppBar and I want to control the contrast colors of the status bar.

You can use 1) but there is also a partial helper for this in FlexColorScheme.themedSystemNavigationBar for a particular use case, but it does not support every conceivable color option, for that use 1). If it fits your use case you can try this:

AnnotatedRegion<SystemUiOverlayStyle>(
      value: FlexColorScheme.themedSystemNavigationBar(
        context,
        systemNavBarStyle: FlexSystemNavBarStyle.transparent,
        noAppBar: true,
        invertStatusIcons: true, // Or false, depends on what you need
      )
)

See: https://pub.dev/documentation/flex_color_scheme/latest/flex_color_scheme/FlexColorScheme/themedSystemNavigationBar.html