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

Question

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>

Is this what you are looking for? https://stackoverflow.com/questions/52489458/how-to-change-status-bar-color-in-flutter — Jungwon, Jun 02 '22 at 06:52
It changes for whole app. I need only for native splash screen in app — Renik Shiroya, Jun 02 '22 at 07:01
Please write your own sources that are minimally executable. — Jungwon, Jun 02 '22 at 07:43

score 7 · Accepted Answer · answered Jun 02 '22 at 09:41

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>

score 2 · Answer 2 · answered Jun 02 '22 at 07:32

2

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

answered Jun 02 '22 at 07:32

Md. Yeasin Sheikh

54,221
7
29
56

it's work but for only first time whenever app restarted it's again shows black status bar – Renik Shiroya Jun 02 '22 at 08:49
make sure to quit the app properly, else it will start from `onResume` lifecycle instead of `onCreate` lifecycle. – Md. Yeasin Sheikh Jun 02 '22 at 09:29

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

2 Answers2

Linked