How can I target status bar color or opacity in a Flutter app?

Question

I couldn't find an attribute in the Scaffold or AppBar classes to do this. Is it possible?

Answer 1

You can change the text color of the status bar from light to dark using SystemChrome.setSystemUIOverlayStyle. For example, to make the status bar font black:

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);

However, the AppBar widget also calls setSystemUIOverlayStyle in its build function and may interfere with you. If you're building an app that uses AppBar widget, you should probably set the brightness on your AppBar to be Brightness.dark (if you want a light text status bar) or Brightness.light (if you want a dark text status bar).

To hide the status indicator entirely, use SystemChrome.setEnabledSystemUIOverlays.

I'm not sure if Flutter has an API for customize the text opacity or background color. There isn't a background at all on iOS, but you could draw one yourself.