How to prevent AppBar from overriding custom status bar color

Question

I cannot change the status bar color, seemingly because the AppBar keeps overriding it.

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(), // this component sets a status bar color and brightness
    body: AnnotatedRegion<SystemUiOverlayStyle>( // this component fails to
                                                 // override the status bar color
                                                 // and brightness set by the AppBar
      value: SystemUiOverlayStyle(
        statusBarColor: Colors.blue,
        statusBarIconBrightness: Brightness.light
      ),
      child: Container()
    )
  );
}

When I comment out the AppBar, the status color becomes blue. When I un-comment it, the status bar color stays blue but it is impossible to change it again. It seems like the AppBar locks the current color.

In the child widget, I tried using setSystemUIOverlayStyle before returning my component but it doesn't help:

Widget build(BuildContext context) {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.blue,
    statusBarIconBrightness: Brightness.light
  ));
  return Container();
}

How do I set the status bar color when there is an AppBar?

Solution

Wrap your root widget with SafeArea
for more details about the widget click here