How to change Status bar Color in Flutter

In any application, the status bar is located at the top of your layout. It displays important information about the phone such as time, network connection, and battery status in this article we are going to learn How to change Status bar Color in Flutter. Let's see how to change the status bar color like below.

How to Change Status Bar background Color in Flutter :

import 'package:flutter/services.dart';
SystemChrome.setSystemUIOverlayStyle(
       SystemUiOverlayStyle(
         statusBarColor: Colors.pinkAccent //Change color here
      )
);

 

How to Set Status Bar Color Transparent :

We can make the status bar transparent easily by just set the status bar color transparent. You can see the below example.

SystemChrome.setSystemUIOverlayStyle(
   SystemUiOverlayStyle(
      statusBarColor: Colors.transparent //Change color
      statusBarIconBrightness: Brightness.dark, 
      )
);

 

Full example : 

class Errorgram extends StatefulWidget {
  const Errorgram({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<Errorgram> createState() => _ErrorgramState();
}

class _ErrorgramState extends State<Errorgram> {
  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
        statusBarColor: Colors.pinkAccent //Change color here
        ));
    return Scaffold(
        appBar: AppBar(
          title: Text("Errorgram"),
        ),
        body: Container(alignment: Alignment.center, child: Text("Errorgram")));
  }
}

 

How to Change Status Bar Color Entire App :

We can easily change status bar color globally for Android and IOS like in the below example. Put the below code in MaterialApp.

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Errorgram',
      theme: ThemeData(
          primarySwatch: Colors.blue,
          appBarTheme: AppBarTheme(
            color: Colors.amber,
            systemOverlayStyle: SystemUiOverlayStyle(
              statusBarColor: Colors.redAccent,// Change Status bar color
            ),
          )),
      home: const Errorgram(title: 'Errorgram'),
    );
  }
}

Conclusion:

In this article, we saw How to change Status bar Color in Flutter step by step with an example. I hope this article may help you and you can see other more interesting articles here.