2

  • 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),
          ),
        ],
      )
)
Sumit Shukla
  • 4,116
  • 5
  • 38
  • 57

3 Answers3

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.

Mike
  • 348
  • 2
  • 8
  • From the link I provided: « Call this API in code whose lifecycle matches that of the desired system UI styles. For instance, to change the system UI style on a new page, consider calling when pushing/popping a new PageRoute. » – Mike Sep 03 '20 at 07:29
0

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

SHAFI TPM
  • 37
  • 6
0

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

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

Tarique Anowar
  • 122
  • 8