Flutter System Navigation bar and Status bar color [duplicate]

Question

How do I change the system NavBar using Android Studio and flutter?

I presume it's not in the main.dart, and I need to go through the android system files, but when I tried to edit the style.xml, the theme editor didn't let me edit any of the colors.

Any help would be appreciated, I wanted to have a light NavBar to go with a light bottom AppBar.

Answer 1

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