Search code examples
textfluttercolorsstatusbar

Flutter-How to change the Statusbar text color in Dark Mode?

I hope to control the statusbar text color in iOS 13 Dark Mode. I could change the statusbar color by setting the Scaffold's AppBar property "brightness" When not open the Dark Mode. Codes just like below:

return Scaffold(
      appBar: AppBar(
        brightness: Brightness.light,  //<--Here!!!
        title: Text(widget.title),
      ),
...

The effort just like this:

light brightness: enter image description here

dark brightness: enter image description here

But when I enable the simulator's Dark Mode, the method is not working. Open the simulator's "Dark Appearance": enter image description here

After opening the "Dark Appearance", the statusbar text color couldn't change any more by the method, it's just in white color(lightness mode). enter image description here

I have tried those method to change statusbar text color:

Method 1:

void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown
  ]);
  runApp(MyApp());
}

Method 2:

return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle.light,
      child: Material(
        child: Scaffold(
          appBar: AppBar(
            brightness: Brightness.light,
            title: Text(widget.title),
          ),
          body: Center(

But neither of them could work.

Hope your help! Thank you.

Solution

  • At first go to ios/Runner folder. Next open info.plist and add the following lines into the Dict section.

    <key>UIUserInterfaceStyle</key>
<string>Light</string>
<key>UIViewControllerBasedStatusBarAppearance</key>
<true/>

    Next. Make sure you have these lines in Theme settings of your MaterialApp:

    ...
MaterialApp(
    themeMode: ThemeMode.light, // Change it as you want
    theme: ThemeData(
        primaryColor: Colors.white,
        primaryColorBrightness: Brightness.light,
        brightness: Brightness.light,
        primaryColorDark: Colors.black,
        canvasColor: Colors.white,
        // next line is important!
        appBarTheme: AppBarTheme(brightness: Brightness.light)),
    darkTheme: ThemeData(
        primaryColor: Colors.black,
        primaryColorBrightness: Brightness.dark,
        primaryColorLight: Colors.black,
        brightness: Brightness.dark,
        primaryColorDark: Colors.black,      
        indicatorColor: Colors.white,
        canvasColor: Colors.black,
        // next line is important!
        appBarTheme: AppBarTheme(brightness: Brightness.dark)),
...

    Good luck!

    P.S. You don't have to set brightness Here!! anymore :)

    Scaffold(
    appBar: AppBar(
    brightness: Brightness.light,  //<--Here!!!
    title: Text(widget.title),
),