Home > Enterprise >  How to change status bar color of native splash screen in flutter?
How to change status bar color of native splash screen in flutter?

Time:06-02

I want to change Status bar color in android and ios Native splash screen according to Dark mode and Light mode in mobile. Native splash screen generated using flutter_native_splash : ^2.2.0 1

I tried below thing but didn't work in android in res/night/styles.xml

<item name="android:statusBarColor">@android:color/white</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:windowLightStatusBar">true</item>

splash screen screenshots

CodePudding user response:

Default native splash screen is not full screen. To enable full screen you need to use fullscreen: true on your yaml file.

flutter_native_splash:
  fullscreen: true

To hide the notification bar, use the fullscreen parameter. Has no effect in web since web has no notification bar.
Defaults to false.

NOTE: Unlike Android, iOS will not automatically show the notification bar when the app loads. To show the notification bar, add the following code to your Flutter app:

WidgetsFlutterBinding.ensureInitialized();
       SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom, SystemUiOverlay.top]);

More and ref on flutter_native_splash

CodePudding user response:

Solved by adding below code in values/styles.xml and values-night/styles.xml in res folder:

  <style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             the Flutter engine draws its first frame -->
        <item name="android:windowBackground">@drawable/launch_background</item>
        <item name="android:forceDarkAllowed">false</item>
        <item name="android:windowFullscreen">false</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:windowTranslucentNavigation">true</item>
        <item name="android:windowLightStatusBar">true</item>
    </style>
  • Related