How to change the statuts bar color for android in a flutter app?

Question

I use a Scafold which has an app bar with grey background and black as text color. I want to have the status bar transparent and the text also black. Unfortunately the text color is white not matter what I've treid. After reading this post and this one, I've tried the code below, but the text color is still white.

  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light.copyWith(
      statusBarColor: Colors.black.withOpacity(0.0), // Color for Android
      statusBarIconBrightness: Brightness.light,
      statusBarBrightness: Brightness.light, 
  ));

Update:

To make it more clear: In the emulator the bar looks like this which is fine:

On my phone the text color is white, so you can't see it:

Use `appBar: AppBar` widget and set color `transparent` – Salim Murshed Sep 20 '20 at 11:44 — Salim Murshed, Sep 20 '20 at 11:44

score 0 · Answer 1 · answered Sep 20 '20 at 11:48

To change the app bar theme, you can use appBarTheme property of ThemeData class and to change the text color of AppBar, you can use the textTheme property and set it as you want. The textstyle used for the text in AppBar is headline6, so you can do something like this.

    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          debugShowCheckedModeBanner: false,
          theme: ThemeData(
            primarySwatch: Colors.blue,
             //here we are applying the theme to appbar.
            appBarTheme: AppBarTheme(
              color: Colors.black.withOpacity(0.0),
              brightness: Brightness.dark,
            ),
             //here we are setting the theme to the text
            primaryTextTheme: TextTheme(
                headline6: TextStyle(
              color: Colors.black,
            )),
          ),
          home: MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    }

score 0 · Answer 2 · answered Sep 20 '20 at 12:30

You can check the below simple code.

 Scaffold(
    backgroundColor: Colors.red,
    appBar: AppBar(
      backgroundColor: Colors.transparent,
      title: Text(
        "Demo",
        style: TextStyle(color: Colors.black),
      ),
      centerTitle: true,
    ),
   body:....,)

How to change the statuts bar color for android in a flutter app?

2 Answers2