Search code examples
flutterdartsliverappbar

Status bar turns transparent while scrolling SliverAppBar in flutter


  • 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),
          ),
        ],
      )
)

Solution

  • 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.