Navigation bar color not changing when it is set in the AppBar-CodePudding

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 Scaffold(
      appBar: AppBar(
        title: Text('Foo'),
        systemOverlayStyle: SystemUiOverlayStyle(
          statusBarColor: Colors.black,
          systemNavigationBarColor: Colors.black,
        ),
      ),
    );
  }
}

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

As you can see, the status bar color changes but the navigation 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).

CodePudding user response：

I read here that this could require "a more recent version of Flutter as it references APIs added in June 2018.". Maybe updating Flutter helps.

CodePudding user response：

its better put your code in main method above of runApp() and run gain

  SystemChrome.setSystemUIOverlayStyle(
  SystemUiOverlayStyle(systemNavigationBarColor: Colors.black));