Status bar turns transparent while scrolling SliverAppBar in flutter

Question

• I am using SliverAppBar to scroll the appbar when content scrolls in my flutter app but as soon as I scroll the list statusbar color turns transparent.

• I want statusbar in its place and with the default primary color which is blue in my case.

• See: Video

Here is code:

Scaffold(
    CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            title: Text("Home"),
            floating: false,
            pinned: false,
            snap: false,
          ),
          SliverList(
            delegate: SliverChildListDelegate(SOME_LIST_DATA),
          ),
        ],
      )
)

Answer 1

From what I understand the color of the status bar is changed automatically depending on the AppBar Brightness see: https://api.flutter.dev/flutter/services/SystemChrome/setSystemUIOverlayStyle.html.

But if as i suspect what you want to achieve is to keep the status bar the default color of your AppBar you can do this (although i don't particularly recommend it):

SystemChrome.setSystemUIOverlayStyle(
        SystemUiOverlayStyle(statusBarColor: Theme.of(context).primaryColor));

Of course you can change the Theme.of(context).primaryColor by any color you wish.

Answer 2

wrap your widget with SafeArea, it works for me...

Answer 3

Use SafeArea. It's easy and convenient. Below is the official doc link.

https://api.flutter.dev/flutter/widgets/SafeArea-class.html