0

Minimal reproducible code:

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    int count = 0;
    Widget child = FooPage();
    return StatefulBuilder(
      builder: (_, update) {
        return Scaffold(
          floatingActionButton: FloatingActionButton(
            onPressed: () => update(() => child = (++count).isEven ? FooPage() : BarPage()),
          ),
          body: child,
        );
      },
    );
  }
}

class FooPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion(
      value: SystemUiOverlayStyle(
        statusBarColor: Colors.black,
        systemNavigationBarColor: Colors.black,
      ),
      child: Scaffold(
        appBar: AppBar(title: Text('Foo')),
      ),
    );
  }
}

class BarPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion(
      value: SystemUiOverlayStyle(
        statusBarColor: Colors.grey,
        systemNavigationBarColor: Colors.grey,
      ),
      child: Scaffold(
        appBar: AppBar(title: Text('Bar')),
      ),
    );
  }
}

As you can see, the navigation bar color changes but the status bar color stays the same. Why is it so? I am testing this on Android.

The two widgets are meant to be used in this way (not through the Navigator).

iDecode
  • 22,623
  • 19
  • 99
  • 186

2 Answers2

0
Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        systemNavigationBarColor: Colors.orange
      ),
      child: Scaffold(
        appBar: AppBar(title: Text('Foo'),systemOverlayStyle: SystemUiOverlayStyle(
            statusBarColor: Colors.red,
        )),
        body: Container(),
      ),
    );
  }
i.AGUIR
  • 599
  • 4
  • 6
  • 1
    1st case is not the one for me as I'm using `AppBar`, and in second case, the navigation bar color won't change, [here's the that question](https://stackoverflow.com/q/72545734/12483095). – iDecode Jun 09 '22 at 14:00
  • you're completely right ! the only way that you could change the systemNavigationBarColor in AnnotatedRegion widget and the statusBarColor in AppBar widget. It works ^^ – i.AGUIR Jun 09 '22 at 16:08
  • I know this is one of the ways of doing it (which is why I asked two questions on this), but the question is why `AnnotatedRegion` or `AppBar.systemOverlayStyle` alone not doing the complete job? – iDecode Jun 09 '22 at 18:54
  • Same question ! at the moment we have the only solution above, maybe we could find another way or it will work on the next Flutter version – i.AGUIR Jun 13 '22 at 21:07
0

Use this

AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle.light.copyWith(statusBarColor: Colors.white),
      child: ----
}
Tasnuva Tavasum oshin
  • 1
  • 1
  • 17
  • 28