close

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

How to Change StatusBar Color in Flutter?

Faq

  1. How to Change StatusBar Color in Flutter?

    To Change StatusBar Color in Flutter 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.

  2. Change StatusBar Color in Flutter

    To Change StatusBar Color in Flutter 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.

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

Leave a Comment

%d bloggers like this: