CODEWITHSUNDEEP
flutter
Ben L
Ben L

Reputation: 135

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

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

Upvotes: 3

Views: 3732

Answers (2)

Color
Color

Reputation: 985

  // set status bar color with opacity
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light.copyWith(
      statusBarColor: Color(0x22CACACA)
  ));
  1. You can set status bar color(CACACA part after 0x22).
  2. You can set color opacity(22 part after 0x).

Upvotes: 1

Collin Jackson
Collin Jackson

Reputation: 116738

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.

Upvotes: 3

Related Questions