How can the Android status bar and system navigation bar be made transparent?

[laterdayi]

Provides parameters to make the android status bar transparent

SystemUiOverlayStyle systemUiOverlayStyle = const SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
        // systemNavigationBarColor: Color.fromRGBO(53, 64, 85, 1),
      );
      SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);

Although this can be implemented, can it be provided to the user as a theme parameter of flex_color_scheme

[rydmike]

Hi again @laterdayi 😄

FlexColorScheme only returns ThemeData and can only impact the SystemUiOverlayStyle via things that are a part of theming. There is only one place where it currently is, the AppBarTheme. In some issue Flutter requests I have wished that we could have more control via themes, but currently we cannot.

If a screen has an AppBar, it can make the Android top status bar transparent. FlexColorScheme actually does so by default in both M2/M3 mode. This is my opinionated choice, since I think it looks much better. In M3 mode the Flutter Android default themed AppBar is actually also transparent by default.

You can actually only see the impact of this toggle in the Themes Playground if you build the playground for an Android device and run it on it. Then it will toggle the transparent status bar of the Playground itself when you try. The simulated apps are just mock paintings and do not have a status bar.

The setting is ON by default, so in generated code it actually only writes it out if your turn it OFF:

If a screen does not have an AppBar FlexColorScheme produced ThemeData cannot change it. Also setting SystemUiOverlayStyle properties that concern the various system navigation bar options in an AppBar or its theme, do nothing to change the system navigation bar colors.

The themedSystemNavigationBar

What FlexColorScheme does do though, is that it provides a static helper that is designed to be used with the AnnotatedRegion widget to make it easier to configure the navigation bar to match current theme and attach it to the widget tree via the AnnotatedRegiosn widget. And also to control status bar when there is no AppBar on a screen.

This helper is called FlexColorScheme.themedSystemNavigationBar.

There is info in the FCS docs about it here: https://docs.flexcolorscheme.com/deep_dives#themed-system-navigation-bar-in-android

And it is API docs are here: https://pub.dev/documentation/flex_color_scheme/latest/flex_color_scheme/FlexColorScheme/themedSystemNavigationBar.html

In the "copy paste from playground" example app you can find a simple usage example here:

flex_color_scheme/example/lib/example_copy_paste_from_playground/home_page.dart

Line 82 in be91c99

return AnnotatedRegion<SystemUiOverlayStyle>(

The Themes Playground app also has a section and info about the Android system navigation bar. Where it also explains about it and that the features in it only works if build the Playground app for an Android app. Then using the toggles modify the settings for the app itself by adjusting corresponding values in FlexColorScheme.themedSystemNavigationBar used by the Themes Playground app itself. Of course this only visible if it is built as Android app.

Where that is happening and how it is done is here:

flex_color_scheme/example/lib/example5_themes_playground/widgets/pages/home_page.dart

Line 132 in be91c99

value: FlexColorScheme.themedSystemNavigationBar(

Complicated Android system navigation bar

Controlling the system navigation bar in Android in Flutter used to be difficult, here is an example of past issue that can be interesting to read to learn more about it: flutter/flutter#100027.

This is a good issue with links to many topics on the matter System Navigation Bar complications in Android, some solved, some not: flutter/flutter#112301

Status in FCS?

At the current of SystemUiOverlayStyle support via theming and helpers, FlexColorScheme already does pretty much as much as is possible on the topic.

There are some older questions on this topic too in either issues or discussion, I'll edit attach a link if/when I find it.

[laterdayi]

Yes, I also found this problem, when I have APPbar, the status bar is transparent, if there is no APPbar, it is the initial state, I will try the method you provided, thank you