Flutter: Customizing Status Bar Color (Android, iOS)

This short post shows you how to change the status bar color in Flutter.

iOS

On iOS, the background color of the status bar is the same as the background color of the AppBar widget:Advertisements

Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.indigo,
        title: Text('Kindacode.com'),
      ),
;

Screenshot:

If you wrap the Scaffold widget within a SafeArea widget, the status bar will turn dark no matter what color the AppBar is:

 Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.indigo,
          title: Text('Kindacode.com'),
        ),
      ),
    );

Screenshot:

Android

AdvertisementsOn Android, you can set the color of the status bar separately from the AppBar like so:

void main() {
  SystemChrome.setSystemUIOverlayStyle(
      SystemUiOverlayStyle(statusBarColor: Colors.amber));

  runApp(MyApp());
}

Text and Icons Brightness

You can control the brightness of the status bar’s text and icons (time, wifi, battery, etc) by using the brightness parameter:

brightness: Brightness.dark, // text and icons will be light color
brightness: Brightness.light, // text and icons will be dark color

Complete Example

Screenshot:Advertisements

The full code:

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

void main() {
  SystemChrome.setSystemUIOverlayStyle(
      SystemUiOverlayStyle(statusBarColor: Colors.indigoAccent));

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        // Remove the debug banner
        debugShowCheckedModeBanner: false,
        title: 'Kindacode.com',
        home: HomePage());
  }
}

class HomePage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.indigo,
        brightness: Brightness.dark,
        title: Text('Kindacode.com'),
      ),
      body: Center(),
    );
  }
}

Final Words

Continue exploring more about Flutter by taking a look at the following tutorials:

• Flutter: Customize the Android System Navigation Bar
• Flutter: Hiding the Status Bar on iOS and Android
• Flutter: Global Styles for AppBar using AppBarTheme
• Example of CupertinoSliverNavigationBar in Flutter
• Flutter SliverAppBar Example (with Explanations)

You can also check out our Flutter category page, or Dart category page for the latest tutorials and examples.