颤动中的底部导航栏颜色恢复为黑色

Question

when changing the bottom navigation bar color in flutter using these lines of code inside main method:

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  systemNavigationBarColor: Colors.white,
  statusBarColor: Colors.transparent,
));

it works fine but the bottom navBar color revert to black after some times when using SilverAppBar inside main page :

body: CustomScrollView(
    slivers: <Widget>[
      SliverAppBar(
        expandedHeight: 300,
        floating: false,
        pinned: true,
        snap: false,
        backgroundColor: Colors.white,
        flexibleSpace: FlexibleSpaceBar(),
      ),
      SliverList(
        delegate: SliverChildListDelegate(<Widget>[

        ]),
      )
    ],
  ),

when changing the value of expandedHeight: 250 the color of bottom navBar won't change, so the problem is inside expandedHeight value , so why and how to fix that .

Answer 1

The problem is actually not inside the expandedHeight value, but rather it's the fact that the sliver app bar internally uses an AnnotatedRegion to set the system ui overlay style: https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/app_bar.dart#L599

Since you only set the overlay style once in the main method, the new overlay style exposed by the AnnotatedRegion in the app bar will override the old one.

So what you can do is to wrap your FlexibleSpaceBar within your SliverAppBar with another AnnotatedRegion , to override the AnnotatedRegion that is already in the app bar:

SliverAppBar(
  expandedHeight: 300,
  floating: false, 
  pinned: true,
  snap: false,
  backgroundColor: Colors.white,
  flexibleSpace: AnnotatedRegion<SystemUiOverlayStyle>(
    value: SystemUiOverlayStyle(
      systemNavigationBarColor: Colors.white,
      statusBarColor: Colors.transparent,
    ),
    child: FlexibleSpaceBar(),
  ),
),

Just for your info

AnnotatedRegion is another way to change the ui overlay style, you can learn more here: https://stackoverflow.com/a/51013116/6064621