How to Change the Color of the Status Bar in Flutter Application?

Flutter is an open-source UI toolkit developed and maintained by Google. It is used by big companies like Airbnb, Alibaba, and Google itself to serve billions of users around the globe. Status Bar is the topmost area of the screen which is home to the Battery Indicator, Network Status, Time, Notification Icons, etc. In this article, we will see how to change the color of the status bar in our application.

Approach

To change the color of the status bar, we will use SystemChrome.setSystemUIOverlayStyle() Method inside the main function of our application.

Syntax

SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    statusBarColor: Colors.green,
));

Implementation

The below example shows the use of the SystemChrome.setSystemUIOverlayStyle() method to change the color of the status bar in our flutter application.

Dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
      // Set the status bar color to blue
      SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
            statusBarColor: Colors.green,
      ));

      runApp(const MyApp());
}

class MyApp extends StatelessWidget {
      const MyApp({Key? key}) : super(key: key);

      @override
      Widget build(BuildContext context) {
        return MaterialApp(
              title: 'GFG - Flutter Status Bar Color',
              home: Scaffold(
                appBar: AppBar(
                      title: const Text('GFG - Flutter Status Bar Color'),
                ),
                body: const Center(
                      child: Text('Welcome to GeeksforGeeks'),
                    ),
              ),
        );
      }
}

Output: