How to make the color of the status bar the same as the AppBar?

Viewed 212

I have a page with an AppBar. In Android, the background color of the status bar is rendered in a darker shade of the color of my AppBar.

Status Bar in darker shade of white

I want the status bar to be the same color as the AppBar.

I've tried to wrap the entire Scaffold in an AnnotatedRegion but that didn't work:

AnnotatedRegion(
  value: SystemUiOverlayStyle.light.copyWith(
    statusBarColor: Colors.white, // status bar color
    statusBarIconBrightness: Brightness.dark, // status bar icon color
  ),
  child: Scaffold(appBar: AppBar()),
);

Changing the SystemChrome did work, but that changes the color of the status bar for the entire application.

@override
Widget build(BuildContext context) {
  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle.light.copyWith(
      statusBarColor: Colors.white, // status bar color
      statusBarIconBrightness: Brightness.dark, // status bar icon color
    ),
  );
  //Actual code
}

But i want the color changed for just the one route. Changing the System Chrome isn't an option coz i have other routes in my app which need a different status bar color.

enter image description here

I would've expected the AnnotatedRegion to work since doing literally the same thing to the SystemChrome works. Thanks in advance for the help!

EDIT:

I tried the flutter_statusbarcolor package, but that sets the color for the entire app.

FlutterStatusbarcolor.setStatusBarColor(Colors.white);

I could potentially work around it by setting the status bar color again and again whenever i navigate to a new page in the app, but some pages have gradients and images as their background, so that won't work

0 Answers
Related