CODEWITHSUNDEEP
androidflutterdart
elhoucine ayoub
elhoucine ayoub

Reputation: 1009

Bottom Navigation bar color in flutter revert to black

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 .

Upvotes: 3

Views: 2016

Answers (1)

CZX
CZX

Reputation: 2027

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

Upvotes: 7

Related Questions