CODEWITHSUNDEEP
flutterflutter-layout
rahul Kushwaha
rahul Kushwaha

Reputation: 2819

Can't change the status bar Icon Brightness in flutter app?

In main.dart

void main() {
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle(
  statusBarColor: Colors.black.withOpacity(0), //top bar color
  statusBarIconBrightness: Brightness.dark, //top bar icons
  systemNavigationBarColor: Colors.black, //bottom bar color
  systemNavigationBarIconBrightness: Brightness.light, //bottom bar icons
),
);
runApp(MyApp());
}

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
 Widget build(BuildContext context) {
return MaterialApp(
  theme: ThemeData(
    //primaryColor: Color.fromRGBO(113, 201, 206, 1),
    fontFamily: 'Montserrat',
    textTheme: TextTheme(
      headline: TextStyle(
        fontSize: 40,
        fontWeight: FontWeight.w500,
      ),
      title: TextStyle(
        fontWeight: FontWeight.w700,
        fontSize: 16,
      ),
      body1: TextStyle(
        fontSize: 12,
      ),
    ),
  ),
  home: Test(),
  routes: {
    MainScreen.routeName: (context) => MainScreen(),
  },
);
}
}

I am using the above code to change the color of the status bar, statusBarIconBrightness: Brightness.dark has no effect. It becomes black but after a few seconds it switches back to `Brightness.light'. What's wrong?

Running on Android Emulator. I don't want to have appBar int the Test() widget.

Upvotes: 7

Views: 6045

Answers (4)

王东升
王东升

Reputation: 1

I think it is systemNavigationBarColor making statusBarIconBrightness no effect.

Upvotes: 0

abene42
abene42

Reputation: 47

@CopsOnRoad's answer worked for me with a little twist. You see sometimes the Brightness class has this funny way of creating a confusion. Meaning, if you want to make the status bar icons color white, you have to go with Brightness.dark instead of Brightness.light. I did exactly that and boom! It started working. Just take @CopsOnRoad's answer and change light to dark. At leas that is what worked for me. I concluded that in this particular case, setting Brightness.light means "change the status bar icons' color to some color that is suitable for light colored status bar (White or similar color status bar background) which means that the system will set the icons to black in order for the user to be able to see the icons. Hope this helped!

Upvotes: 0

user4383363
user4383363

Reputation:

I was trying something similar, but the status bar was transparent instead of blue. I added the following and it worked:

theme: ThemeData(
  appBarTheme: AppBarTheme(
    brightness: Brightness.light,

Upvotes: 1

CopsOnRoad
CopsOnRoad

Reputation: 267594

That's because you're not explicitly changing AppBar's brightness in your Test page. Run this code and see the difference:

void main() {
  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle(
      statusBarColor: Colors.black.withOpacity(0), //top bar color
       // statusBarIconBrightness: Brightness.dark, // don't use this
    ),
  );
  runApp(MyApp2());
}

class MyApp2 extends StatelessWidget {
// This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("AppBar"),
          brightness: Brightness.light, // use this instead
        ),
      ),
    );
  }
}

Output-1 (Brightness.dark):

enter image description here

Output-2 (Brightness.light):

enter image description here

Upvotes: 8

Related Questions