Flutter: Change Statusbar Text Color not working properly

Question

Almost all the Q/A referred on Stackoverflow related to the same topic but didn't get proper solutions.

Main Question: My app having the primary color blue and I want to set Statusbar Text Color white.

What I have tried:

Using SystemChrome: (Using the following code, It's just changing the color of status bar text in the first screen only, other screens are having blue/black combination background/foreground.)

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: MaterialColor(0xFF084775, color), // status bar color
    statusBarBrightness: Brightness.light,//status bar brightness
    statusBarIconBrightness:Brightness.light , //status barIcon Brightness
));

Screenshots:

Splash Screen:

Dashboard Screen:

Using ThemeData : (This method gives the same result as the above screenshot).

 theme: ThemeData(
            brightness: Brightness.light, // ADDED THIS LINE..
            primarySwatch: MaterialColor(0xFF084775, color),
            accentColor: Color(0xffe46b10),
            unselectedWidgetColor: Colors.grey,
            fontFamily: 'SourceSansPro',
          ),

I have also checked github issue link but not worked for me.

I just need to change Statusbar Text Color to White. Any help?

You should try to add Brightness parameter in Appbar this might works. — Nilesh Senta, Apr 02 '21 at 11:02
For which appBar, I have 25 screen and all the screens have AppBar — Pratik Butani, Apr 02 '21 at 11:03

score 4 · Accepted Answer · answered Apr 02 '21 at 11:04

4

To apply for all appBar use

 return MaterialApp(
                theme: ThemeData(
                  appBarTheme: Theme.of(context).appBarTheme.copyWith(brightness: Brightness.dark),
                ),
                debugShowCheckedModeBanner: false,
                // home: InvoiceList(),
                home: widget());

I hope it will works.

Thank you.

answered Apr 02 '21 at 11:04

Kalp Shah

279
2
14

2

Thank you so much:) It's working perfectly. – Pratik Butani Apr 02 '21 at 11:07

score 0 · Answer 2 · answered Jan 26 '22 at 15:35

As of Flutter 2

return MaterialApp(
        theme: ThemeData(
            appBarTheme: Theme.of(context)
                .appBarTheme
                .copyWith(systemOverlayStyle: SystemUiOverlayStyle.light)),
        debugShowCheckedModeBanner: false,
        home: widget());

Flutter: Change Statusbar Text Color not working properly

2 Answers2