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