How to change the color of system navigation bar?

I’m working on a flutter web application. When I run the app on a mobile device the navigation bar stays white. I’ve tried suggestions for using SystemUiOverlayStyle as below but it has not helped.

void main() async {
  SystemChrome.setSystemUIOverlayStyle(
    const SystemUiOverlayStyle(
      systemNavigationBarColor: Colors.black12,
      systemNavigationBarIconBrightness: Brightness.dark,
      statusBarColor: Colors.black12,
    ),
  );  runApp(const MyApp());
}

System Navigation Bar

>Solution :

The SystemChrome.setSystemUIOverlayStyle doesn’t work on Flutter Web, it only applies to mobile platforms like Android and iOS.

for flutter web, you can manually add CSS and meta tags instead.

Try putting this in your index.html

<style>
  body {
    background-color: #FFFFFF;
  }
</style>

or

<meta name="theme-color" content="#FFFFFF" />

SystemUiOverlayStyle works by interacting with the native operating system’s UI controls, which are not present in web browsers.