10

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.

7 Answers 7

8

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),
),
1
  • 'brightness' is deprecated and shouldn't be used, use systemOverlayStyle instead.
    – M Karimi
    Aug 24, 2022 at 9:06
3

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

3

Under ios/Runner in Info.plist add

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

it worked for me.

0

If your app is a materialApp you can set the darkTheme property of your MaterialApp:

return new MaterialApp(
  darkTheme: ThemeData.dark(),
);

Here is the link to the doc: https://api.flutter.dev/flutter/material/MaterialApp-class.html

If it don't solve your problem you can create your own Dark theme using:

return new MaterialApp(
  darkTheme: ThemeData(
    // Your theme config
  ),
);

Link to ThemeData doc: https://api.flutter.dev/flutter/material/ThemeData-class.html

3
  • First, thanks your reply. I have tried your method, set the "darkTheme", but whatever I set darkTheme: ThemeData.light() //(I need the black statusbar text color) or I set darkTheme: ThemeData( //brightness: Brightness.light, primaryColorBrightness: Brightness.light, //textTheme: Typography().black, primaryTextTheme: Typography().black, ), I can change the Appbar background color, the Appbar text Color, and all of the app color and brightness ,but the Statusbar Text Color. So what can I try any more.
    – Alexweng
    Oct 11, 2019 at 1:13
  • Maybe considering the User Experience, it is forbidden changing the status bar text color in Dark Mode. But I don't think it make sense. Feel some helpless.
    – Alexweng
    Oct 11, 2019 at 1:47
  • Hello. Did you find a solution? Jan 10, 2020 at 15:39
0
import 'package:flutter_statusbarcolor/flutter_statusbarcolor.dart';

This worked for me. If you want black text use:

@override
  Widget build(BuildContext context) {
    FlutterStatusbarcolor.setStatusBarWhiteForeground(false);
    return MaterialApp();
  } 

For white text use:

@override
  Widget build(BuildContext context) {
    FlutterStatusbarcolor.setStatusBarWhiteForeground(true);
    return MaterialApp();
  } 
0

change status bar text color/icon brightness.flutter 2.2.3

MaterialApp( title: 'Flutter Demo', theme: ThemeData( appBarTheme: Theme.of(context).appBarTheme.copyWith( brightness: Brightness.dark, systemOverlayStyle: SystemUiOverlayStyle( statusBarIconBrightness: Brightness.light, ), ), primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Flutter Demo Home Page'), );

0

In my case I wanted a dark font in my status bar on my light themed app. The problem is that my app bar's background color is transparent so the status bar default font color is white (I tried setting the app bars color to white and voilà - the status bar text font was black). Since I wanted to keep my transparent status bar, my solution was to add systemOverlayStyle to my theme's appBarTheme like this.:

 AppBarTheme(
        systemOverlayStyle: SystemUiOverlayStyle(
          statusBarBrightness: Brightness.light,
        ),

The app_bar_theme.dart file told me this solution in the brightness' deprecation notes:

@Deprecated( 'This property is no longer used, please use systemOverlayStyle instead. ' 'This feature was deprecated after v2.4.0-0.0.pre.', ) this.brightness,

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.