close

How to Change StatusBar Color in Flutter?

Hello Guys How are you all? Hope you all are fine. Many times we need to change our StatusBar color according to our design. So In this tutorial, we are going to learn How to Change StatusBar Color in Flutter?

How to Change StatusBar Color in Flutter?

  1. How to Change StatusBar Color in Flutter?

    to Change StatusBar Color in Flutter After this, you need to add the following lines better place to put these lines is in your main() method. If you use AppBar then updating the status bar color is as simple as this.

  2. Change StatusBar Color in Flutter

    to Change StatusBar Color in Flutter After this, you need to add the following lines better place to put these lines is in your main() method. If you use AppBar then updating the status bar color is as simple as this.

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

So, It’s All About How to Change StatusBar Color in Flutter?. I hope this tutorial helps you to solve your error. Please Comment Below if You stucks anywhere with my code.

Also Check Out Below Tutorials

Leave a Comment