How to Change the Status Bar Color in Flutter

Photo by Krzysztof Hepner / Unsplash

On mobile devices, the status bar appears along the upper edge of the screen and displays useful information about the device’s current state, like the time, cellular carrier, and battery level. Setting the color of the status bar can better align your application with your brand. With Flutter, there are several ways we can color the status bar.

The Android status bar

The Status Bar Color Hierarchy

We'll cover 3 different ways to color the status bar. In increasing order of specificity they are:

  • Scaffold backgroundColor
  • AppBar backgroundColor
  • AppBar systemOverlayStyle (Android only!)

Scaffold Background Color

By setting a background color of a Scaffold without an AppBar the status bar will inherit from the specified color.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.green,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(
          Icons.add,
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
Coloring the status bar with the Scaffold background color

AppBar Background Color

By setting a background color of an AppBar the status bar will inherit from the specified color, regardless of if the Scaffold has a background color.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.green,
      appBar: AppBar(
        backgroundColor: Colors.purple,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(
          Icons.add,
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
Coloring the status bar with the AppBar background color

AppBar Background Color + System Overlay Style

On Android, the status bar actually takes on a slightly darker color that what's specified by the Scaffold and AppBar. This is by design, but if you'd like to specify the exact color value you can set it via the systemOverlayStyle property on an AppBar.

ℹ️
If you want to color the status bar but don't want to use and AppBar you can set the toolbarHeight to 0!
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.green,
      appBar: AppBar(
        backgroundColor: Colors.purple,
        elevation: 0,
        toolbarHeight: 0,
        systemOverlayStyle: const SystemUiOverlayStyle(
          statusBarColor: Colors.purple,
        ),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(
          Icons.add,
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
Coloring the status bar with the AppBar background color and system overlay style

Wrapping Up

Thanks for reading! If you enjoyed this article, please consider sharing it with others and becoming a sponsor on GitHub. ❤️

Join our Discord to continue your learning journey

Join the MagsAI Discord Server!
Check out the MagsAI community on Discord - hang out with 4 other members and enjoy free voice and text chat.
Mags
Founder of Mags.ai. Building an open community of motivated learners