How to change status bar color using AnnotatedRegion?

Question

I want to change color of status bar using AnnotatedRegion, I got the below code from this answer but it is having no effect on status bar color.

AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle.light.copyWith(statusBarColor: Colors.white),
      child: Scaffold(
        appBar: AppBar(
          title: Text('Annotated Region'),
        ),
        body: Center(
          child:
              Text('Status Bar!'),
        ),
      ),
    )

To quickly get started with this code, you can use this Github repository.

Answer 1

If you check the code of the Appbar you will see it uses it's own AnnotatedRegion

final SystemUiOverlayStyle overlayStyle = brightness == Brightness.dark
      ? SystemUiOverlayStyle.light
      : SystemUiOverlayStyle.dark;

return Semantics(
      container: true,
      child: AnnotatedRegion<SystemUiOverlayStyle>(
        value: overlayStyle,
        child: Material(
          color: widget.backgroundColor
            ?? appBarTheme.color
            ?? theme.primaryColor,
          elevation: widget.elevation
            ?? appBarTheme.elevation
            ?? _defaultElevation,
          shape: widget.shape,
          child: Semantics(
            explicitChildNodes: true,
            child: appBar,
          ),
        ),
      ),
    );

to override the effect of the Appbar you will need to wrap your scaffold with a SafeArea, then you will see the change of your own AnnotatedRegion

return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle.light.copyWith(statusBarColor: Colors.white),
      child: SafeArea(
        child: Scaffold(
          primary: false,
          appBar: AppBar(
            title: Text('Annotated Region'),
          ),
          body: Center(
            child: Text('Status Bar!'),
          ),
        )
      )
    );