Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – 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

Tags:

2

Answers


  1. 0

    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
      ),
    ),
  );
 }
}
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search