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,
),
);
Step 1: Locate the MaterialApp widget. Step 2: Inside the MaterialApp, add the theme parameter with ThemeData class assigned. Step 3: Inside the ThemeData add the appBarTheme parameter and then assign the AppBarTheme class. Step 4: Inside the AppBarTheme , specify the systemOverlayStyle parameter and set the color.
If you want to change a status bar text color for a specific view (with an app bar), you can use the exact property we employ in the theme, but this time set it to the AppBar. <1> Set brightness or systemOverlayStyle to the AppBar. We don't need backwardsCompatibility here since it will inherit from the theme.
To make the Status Bar background color transparent, Insert it into the widget builder. SystemChrome. setSystemUIOverlayStyle( SystemUiOverlayStyle( statusBarColor: Colors. transparent, //color set to transperent or set your own color statusBarIconBrightness: Brightness.
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!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With