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 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.
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.
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!
Wrapping Up
Thanks for reading! If you enjoyed this article, please consider sharing it with others and becoming a sponsor on GitHub. ❤️