2

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

alokraop
  • 853
  • 1
  • 11
  • 29
  • Have a look at this package: [flutter_statusbarcolor](https://pub.dev/packages/flutter_statusbarcolor) – Joy Terence Nov 21 '20 at 08:22
  • Hey i did. The package has the same problem as SystemChrome. It sets the color to all routes. I need it for one particular page. – alokraop Nov 21 '20 at 08:31
  • Does the following page helps you? https://stackoverflow.com/questions/52489458/how-to-change-status-bar-color-in-flutter – bananagag Nov 21 '20 at 16:02
  • Oh i went through those answers already. Most answers there are suggesting either the flutter_statusbarcolor package, or changing of `SystemChrome`. Neither of those work for just one route. – alokraop Nov 21 '20 at 16:51

0 Answers0