Flutter - How to set status bar color when AppBar not present

First, import services package:

import 'package:flutter/services.dart';

Next, simply put this in the build function of your App:

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.blue, //or set color with: Color(0xFF0000FF)
));

Additionally, you can set useful properties like: statusBarIconBrightness, systemNavigationBarColor or systemNavigationBarDividerColor


If you prefer a more flutter/widget way of doing the same thing, consider using the AnnotatedRegion<SystemUiOverlayStyle> widget.

The value: property can be set to a SystemUiOverlayStyle() object containing the same properties as shown above.


For more infos, head over to the API Docs


If you take a look at the source code of AppBar, you can see they use an AnnotatedRegion widget. AnnotedRegion widget gives you more control on System overlay style. This is a more fluttery way to configure the system styles when an app bar is not used.

From my understanding, this widget automatically sets the statusbar/navigationbar color when the widget wrapped in it gets overlaid by the statusbar/navigationbar.

You can wrap your widget like this:

import 'package:flutter/services.dart';

...    

Widget build(BuildContext context) {
   return Scaffold(
      body: AnnotatedRegion<SystemUiOverlayStyle>(
         value: SystemUiOverlayStyle.light,                
         child: ...,
      ),
   );
}

For more information about AnnotatedRegion widget head over to the API Docs