Flutter System Navigation bar and Status bar color

Flutter 2.4+ (Update)

Use systemOverlayStyle property

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        systemOverlayStyle: SystemUiOverlayStyle(
          systemNavigationBarColor: Colors.blue, // Navigation bar
          statusBarColor: Colors.pink, // Status bar
        ),
      ),
    );
  }
}

Note: this requires a more recent version of Flutter as it references APIs added in June 2018.

You can create a custom SystemUiOverlayStyle using the default constructor. The color of the system nav bar is defined there. But to avoid setting a lot of null values, use the copyWith method to update the values from an existing light/dark theme.

const mySystemTheme= SystemUiOverlayStyle.light
 .copyWith(systemNavigationBarColor: Colors.red);

You can imperatively set the system nav color using the SystemChrome static methods.

SystemChrome.setSystemUiOverlayStyle(mySystemTheme);

However, if you have multiple widgets which set this value, or use the material AppBar or Cupertino NavBar your value may be overwritten by them. Instead, you could use the new AnnotatedRegion API to tell flutter to automatically switch to this style anytime certain widgets are visible. For example, if you wanted to use the theme above anytime you are in a certain route, you could wrap it in an AnnotatedRegion widget like so.

Widget myRoute(BuildContext context) {
  return new AnnotatedRegion<SystemUiOverlayStyle>(
    value: mySystemTheme,
    child: new MyRoute(),
  );
}

This won't change your theme back to the previous value if you pop the route however