Flutter: Change Statusbar Text Color not working properly

Issue

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:

enter image description here

Dashboard Screen:

enter image description here


  • 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?

Solution

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 By – Kalp Shah

Answer Checked By – Terry (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *