Flutter statusbar color on startup

Question

When my app loads it goes through 3 phases and I'm trying to figure out how to make them consistent.

Launch

Flutter Splash screen?

Main App Page

I am trying to get all three of these to be the last one (white header), but am having trouble getting it to work (especially the grey bar)

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <item name="android:windowBackground">@drawable/launch_background</item>
        <!-- <item name="android:windowLightStatusBar">true</item>  -->
        <!-- <item name="android:windowDrawsSystemBarBackgrounds">true</item> -->
        <!-- <item name="android:statusBarColor">@android:color/transparent</item> -->
    </style>
</resources>

No matter what statusBarColor is, the bar starts black

windowLightStatusBar turns the icons black (which feels like progress)

windowDrawSystemBarBackgrounds DOES change the bar white, however the image that is centered shifts down (which I guess makes sense, apps not incharge of that space?)

If I use the above option the grey header still appears AND the centered image shifts when it switches from the first to second phase.

I currently have no idea how to fix the grey header.

Launch_background.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/white" />

    <!-- You can insert your own image assets here -->
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/logo" />
    </item>
</layer-list>

Android Manifest

<activity
        android:name=".MainActivity"
        android:launchMode="singleTop"
        android:theme="@style/LaunchTheme"
        android:windowSoftInputMode="adjustResize">
        <!-- This keeps the window background of the activity showing
             until Flutter renders its first frame. It can be removed if
             there is no splash screen (such as the default splash screen
             defined in @style/LaunchTheme). -->
        <meta-data
            android:name="io.flutter.app.android.SplashScreenUntilFirstFrame"
            android:value="true" />

In Flutter on my view I have

SystemChrome.setSystemUIOverlayStyle(
      SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
        statusBarIconBrightness: Brightness.dark,
        statusBarBrightness: Brightness.dark,
      ),
    );

alex j alex j · Accepted Answer · 2020-11-06T02:52:18

It's actually a bug in flutter engine, https://github.com/flutter/flutter/issues/64001

Flutter hard coded that grey status bar, which is stupid and very hard to find. Wasted hours to even locate this bug.

The way to solve it is like this

public class MainActivity extends FlutterActivity {

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    //https://github.com/flutter/flutter/issues/64001 
    Window window = getWindow();
    window.setStatusBarColor(0x00000000);
    window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);

}

}

Then you can set your own color and style!

Flutter statusbar color on startup

2 Answers