Flutter Change Status Bar Color

Status bar presents in every mobile including Android iOS devices. Their main purpose is to display device Battery, Network Tower, Bluetooth, WiFi, Hotspot information show to the user all time when they are activated. In flutter we will change Status bar color with SystemChrome.setSystemUIOverlayStyle() method which provide us many system UI overlay styling options.

Flutter Change Status Bar Color

1. Import material.dart and services.dart package in your project.

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

2. Creating SystemChrome.setSystemUIOverlayStyle() method in Widget Build area of our main Root Class. When we apply these setting to the Root it will automatically applied on all the Children screens globally in the whole app.

Note:

• In iOS we cannot set color of Status bar. We can only make Status bar brightness. 

   SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
      // Set Status bar color in Android.
      statusBarColor: Color.fromARGB(255, 102, 0, 102),
      // Set Status Bar Icon Brightness in Android.
      statusBarIconBrightness: Brightness.light,
      // Set Status Bar Brightness in iOS.
      statusBarBrightness: Brightness.light,
    ));

Screenshot:

Source code for main.dart file:

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

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
      // Set Status bar color in Android.
      statusBarColor: Color.fromARGB(255, 102, 0, 102),
      // Set Status Bar Icon Brightness in Android.
      statusBarIconBrightness: Brightness.light,
      // Set Status Bar Brightness in iOS.
      statusBarBrightness: Brightness.light,
    ));
    return const MaterialApp(
        debugShowCheckedModeBanner: false, home: Scaffold(body: MyApp()));
  }
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State {
  @override
  Widget build(BuildContext context) {
    return const Center(
        child: Text(
      'Status Bar Color Change',
      style: TextStyle(fontSize: 28),
    ));
  }
}