Flutter: Customizing Status Bar Color (Android, iOS)

Last updated on July 10, 2022 A Goodman Loading... Post a comment

This short post shows you how to change the status bar color (and control its text and icons brightness) in Flutter.

iOS

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

Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.indigo,
        title: const 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:

Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.indigo,
          title: const Text('Kindacode.com'),
        ),
      ),
    );
}

Screenshot:

Android

On Android, you can set the color of the status bar separately from the color of AppBar by using SystemChrome.setSystemUIOverlayStyle like so:

// you have to import this
import 'package:flutter/services.dart';

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

  runApp(const 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 systemOverlayStyle parameter:

// text and icons will be light color
systemOverlayStyle: SystemUiOverlayStyle.dark, 

// text and icons will be dark color
systemOverlayStyle: SystemUiOverlayStyle.light,

Complete Example

Screenshot:

The full code:

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

void main() {
  // set the status bar color (Android)
  SystemChrome.setSystemUIOverlayStyle(
      const SystemUiOverlayStyle(statusBarColor: Colors.indigoAccent));

  runApp(const MyApp());
}

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

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.indigo,
        title: const Text('Kindacode.com'),
        systemOverlayStyle: SystemUiOverlayStyle.light,
      ),
      body: const Center(),
    );
  }
}

What’s Next?

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

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

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

You May Also Like