How to Change StatusBar Color in Flutter?

· 3 min read
StatusBar Color in Flutter
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
  ));
}

Both iOS and Android:

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

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 Brightness.light for dark status bar 
    // or Brightness.dark for light status bar
    brightness: Brightness.light 
  ),
  body: ...
)

To apply for all app bars:

return MaterialApp(
  theme: Theme.of(context).copyWith(
    appBarTheme: Theme.of(context)
        .appBarTheme
        .copyWith(brightness: Brightness.light),
  ...
  ),

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 */
    )),
  ),
);

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.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply