Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 808
Alexweng Avatar asked Oct 10 '19 14:10

Alexweng


3 Answers

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),
),
like image 154
Dmitry_Kovalov Avatar answered Oct 24 '22 01:10

Dmitry_Kovalov


Under ios/Runner in Info.plist add

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

it worked for me.

like image 41
m1416 Avatar answered Oct 24 '22 00:10

m1416


I found my question just the same as the flutter Issue#41067 ---"Flutter not automatically changing the status bar icons to black on devices running iOS 13.0 in Dark Mode it only does so when Dark Mode on iOS 13 is turned off #41067"

And the Issue state is Opening, so just hope it will be resolved as soon as possible. The issue link just below: flutter issue#41067

like image 3
Alexweng Avatar answered Oct 24 '22 00:10

Alexweng