How to Change StatusBar Color in Flutter?

Hello Guys how are you all? Hope you all are fine. SomeTimes we need to change statusbar colour in our flutter app. So in this tutorial we are going to learn How to Change StatusBar Color in Flutter?

How to Change StatusBar Color in Flutter?

How to Change StatusBar Color in Flutter using AppBar?

Only Android

You need to add the following lines better place to put these lines is in your main() method.

import 'package:flutter/services.dart';

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

Both iOS and Android:

You just need to use systemOverlayStyle property of the AppBar Widget and systemOverlayStyle use systemOverlayStyle widget and systemOverlayStyle has statusBarColor property and then you can directly give color to statusBarColor. Here is my Example.

      appBar: new AppBar(
        title: new Text('Change StatusBar Color in Flutter - FlutterCorner'),
        backgroundColor: Colors.green,
        systemOverlayStyle: SystemUiOverlayStyle(statusBarColor: Colors.orange),
      ),

OR You can Also Use

appBar: AppBar(
  title: new Text('Change StatusBar Color in Flutter - FlutterCorner'),
  backgroundColor: Colors.red, // status bar color
  brightness: Brightness.light, // status bar brightness
)

For those who don’t use AppBar

Wrap your content with AnnotatedRegion and set value to SystemUiOverlayStyle.light or SystemUiOverlayStyle.dark: just like below.

return AnnotatedRegion<SystemUiOverlayStyle>(
  value: SystemUiOverlayStyle.light,
  child: Scaffold(...),
);

Output

Faq

Summery

So, It’s All About this tutorial. 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

• How to Dismiss the Keyboard in Flutter?
• How to Disable Button In Flutter?
• Also Read How to supply an Initialvalue to TextField Widget in Flutter?
• How to change the appBar back button color in flutter
• Flutter Countdown Timer