How to change status bar color in Flutter?

In this blog post, we will explore various ways to change the status bar color in a Flutter application.

Update Flutter 2.0 (Recommended)

On the latest Flutter version, you can use the

AppBar

widget to set the system overlay style and thus change the status bar color:

AppBar(
  systemOverlayStyle: SystemUiOverlayStyle(
    // Status bar color
    statusBarColor: Colors.red,

    // Status bar brightness (optional)
    statusBarIconBrightness: Brightness.dark, // For Android (dark icons)
    statusBarBrightness: Brightness.light, // For iOS (dark icons)
  ),
)

Only Android (more flexibility)

If you want to change the status bar color on only Android devices, you can use the

SystemChrome.setSystemUIOverlayStyle()

function:

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 can also change the status bar color by using the

AppBar

widget in conjunction with a

Scaffold

widget:

appBar: AppBar(
  backgroundColor: Colors.red, // Status bar color
)

A bit hacky but works on both iOS and Android

You can also use the

SafeArea

widget to change the status bar color in a somewhat hacky way:

Container(
  color: Colors.red, // Status bar color
  child: SafeArea(
    left: false,
    right: false,
    bottom: false,
    child: Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue, // App bar color
      ),
    ),
  ),
) 

Works totally fine in my app

You can also use the

flutter_statusbarcolor

package to change the status bar color:

import 'package:flutter_statusbarcolor/flutter_statusbarcolor.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    FlutterStatusbarcolor.setStatusBarColor(Colors.white);
    return MaterialApp(
      title: app_title,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(title: home_title),
    );
  }
}

UPD: Recommended solution (Flutter 2.0 and above)

The recommended solution is to use the

SystemChrome.setSystemUIOverlayStyle()

function with the

statusBarColor

property set:

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.white
));

Note that this package is not compatible with Flutter 3.0 or above.