StatusBar Color in Flutter

How to Change StatusBar Color in Flutter?

When users create a Flutter Application the user will get the default Color for StatusBar in Flutter. Today we will be discussing How to Change StatusBar Color in Flutter.

How to Change StatusBar Color in Flutter?

Only Android

import 'package:flutter/services.dart';

After this, you need to add the following lines better place to put these lines is in your main() method.

void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.blue, // navigation bar color
    statusBarColor: Colors.pink, // status bar color
  ));
}

For those who use the AppBar Widget.

If you use AppBar then updating the status bar color is as simple as this.

Scaffold(
  appBar: AppBar(
    // Use SystemUiOverlayStyle.dark for dark status bar 
    // or SystemUiOverlayStyle.light for light status bar
  ),
  body: ...
)

Both iOS and Android:

appBar: AppBar(
 backgroundColor: Colors.red,  // status bar color
 systemOverlayStyle: SystemUiOverlayStyle.light, // status bar brightness
),

To apply for all app bars:

return MaterialApp(

theme:  Theme.of(context).copyWith(
 appBarTheme: Theme.of(context)
     .appBarTheme
     .copyWith(backgroundColor: Colors.red),

);

For those who don’t use AppBar

Wrap your content with AnnotatedRegion and set statusBarIconBrightness for Android and statusBarBrightness for iOS.

return AnnotatedRegion<SystemUiOverlayStyle>(
  value: const SystemUiOverlayStyle(
    // For Android.
    // Use [light] for white status bar and [dark] for black status bar.
    statusBarIconBrightness: Brightness.light,
    // For iOS.
    // Use [dark] for white status bar and [light] for black status bar.
    statusBarBrightness: Brightness.dark,
  ),
  child: Scaffold(...),
);

To change the status bar color in iOS when you are using SafeArea

Scaffold(
  body: Container(
    color: Colors.red, /* Set your status bar color here */
    child: SafeArea(child: Container(
      /* Add your Widget here */
    )),
  ),
);

Output

 

Change StatusBar Col
Change StatusBar Col

 

Conclusion:

In this article, we have learned about How to  Change StatusBar Color in Flutter.

Thanks for Reading!!!
Keep Fluttering.

Do let us know if you need any assistance with Flutter Development?

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

Nirali Patel

Written by Nirali Patel

Nirali Patel is a dedicated Flutter developer with over two years of experience, specializing in creating seamless mobile applications using Dart. With a passion for crafting user-centric solutions, Nirali combines technical proficiency with innovative thinking to push the boundaries of mobile app development.

ready to get started?

Fill out the form below and we will be in touch soon!

"*" indicates required fields

✓ Valid number ✕ Invalid number
our share of the limelight

as seen on