The immersive status bar is a bit of a hassle in Android development because there are so many compatibility issues between different models and versions, and the API changes quickly. However, with Flutter, all these problems are solved because Skia draws the whole area.

This is only for Android, because iOS doesn’t have this problem… The default is immersion. Let’s just say that Google’s designers really don’t understand the market.

Let’s take a look at iOS.

There’s nothing to match. It’s done.

Status bar immersion

Take a look at Android.

This status bar, why domestic designers want to eliminate its color.

First, we modify the color of the status bar, Flutter provides SystemChrome. SetSystemUIOverlayStyle to modify the status bar, and the style of the navigation bar at the bottom of the changes, with the help of it, we can easily get the default color of the status bar.

SystemChrome.setSystemUIOverlayStyle(
  const SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    statusBarBrightness: Brightness.light,
  ),
);
Copy the code

It is very simple to set the Status bar to be transparent, but one thing to note is that the statusBarBrightness bar needs to be set in the AppBar if you have an AppBar component at the back, otherwise the Settings will be overwritten and won’t work.

If you can make it transparent, then of course you can make it any color you want, so I won’t show you here.

AppBar immersion

Let’s look at the immersion Settings of AppBar. It gives us the backgroundColor Settings. We just need to kill the default elevation.

return Scaffold(
  appBar: AppBar(
    title: Text(widget.title),
    backgroundColor: Colors.transparent,
    elevation: 0,
  ),
Copy the code

But this is how it works?

That’s right because you are missing the crucial step of setting the Scaffold’s extendBodyBehindAppBar property.

return Scaffold(
  extendBodyBehindAppBar: true,
  appBar: AppBar(
    title: Text(widget.title),
    backgroundColor: Colors.transparent,
    elevation: 0,
  ),
Copy the code

This allows for the immersive nature of AppBar.

ListView immersion

Let’s get rid of AppBar, because sometimes we need to implement AppBar ourselves, so let’s look at ListView immersion.

return Scaffold(
  body: Container(
    color: Colors.yellow,
    child: ListView(
      children: List.generate(
        100,
        (index) => TextButton(
          onPressed: () {},
          child: Text('$index'),
        ),
      ),
    ),
  ),
Copy the code

Pretty much the same, but why the pit at the top?

This is because the ListView is smart enough to add the default padding on top of itself in this scenario. We can just get rid of the padding.

return Scaffold(
  body: Container(
    color: Colors.yellow,
    child: ListView(
      padding: const EdgeInsets.only(top: 0),
      children: List.generate(
        100,
        (index) => TextButton(
          onPressed: () {},
          child: Text('$index'),
        ),
      ),
    ),
  ),
Copy the code

That’s perfect.

other

To give Android a break, we need to add device judgment.

if (Platform.isAndroid) {
  
}
Copy the code

. In addition to SystemChrome setSystemUIOverlayStyle Settings, Flutter also provides AnnotatedRegion to set up, the effect is the same.

return AnnotatedRegion<SystemUiOverlayStyle>(
  value: const SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    statusBarBrightness: Brightness.light,
  ),
  child: Scaffold(
Copy the code

I would like to recommend my website xuyisheng. Top/focusing on Android-Kotlin-flutter welcome you to visit