-
Notifications
You must be signed in to change notification settings - Fork 29.7k
Description
For what I could find in the docs AppBar should automatically set the status bar style according to it's brightness. Not only it fails to do so, but this behavior isn't documented on the brightness parameter, only on the SystemChrome.setSystemUIOverlayStyle (that I could find at least).
This code shows the issue:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
appBarTheme: AppBarTheme(
elevation: 0,
color: Theme.of(context).canvasColor,
brightness: Brightness.light,
),
),
home: Scaffold(
appBar: AppBar(title: Text('Test Text')),
body: Center(
child: Text('Content'),
),
),
);
}
}And here's what we get:
Same thing setting the brightness as Brightness.dark:
As you can see the AppBar Text is just white, no matter what the brightness is, also the Android Status Bar doesn't change colors and style at all. I even tried wrapping the Scaffold on a Builder as to see if it just couldn't find the Theme because of the context, but it didn't make any differences.
Adding a color scheme to the ThemeData does change the Text color, but this only shows one more time that the AppBar's brightness isn't being used.
This is running on an Android AVD with Android API 29.
Now, further investigating this (as my main goal was to change the status bar color and icons color) I can't make AnnotatedRegion work:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
appBarTheme: AppBarTheme(
elevation: 0,
color: Theme.of(context).canvasColor,
brightness: Brightness.light,
),
),
home: AnnotatedRegion(
value: SystemUiOverlayStyle.dark.copyWith(
statusBarColor: Colors.red,
statusBarIconBrightness: Brightness.dark,
),
child: Scaffold(
appBar: AppBar(title: Text('Test Text')),
body: Center(
child: Text('Content'),
),
),
),
);
}
}This is a standard flutter create App, nothing fancy on the Android side of things, I just changed the Dart code. I tried to set the SystemUiOverlayStyle in the AnnotatedRegion with statusBarIconBrightness: Brightness.dark and statusBarIconBrightness: Brightness.light, with no success.
Trying to use the "not recommended" SystemChrome.setSystemUIOverlayStyle works a bit:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
appBarTheme: AppBarTheme(
elevation: 0,
color: Theme.of(context).canvasColor,
brightness: Brightness.light,
),
),
// home: MyHomePage(title: 'Flutter Demo Home Page'),
home: Scaffold(
appBar: AppBar(title: Text('Test Text')),
body: Center(
child: RaisedButton(
child: Text('Content'),
onPressed: () =>
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light),
),
),
),
);
}
}Changing the SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light) to SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark) makes no visual difference. But setting it to
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light.copyWith(statusBarColor: Colors.red))Does change the Status Bar color to red, but I can't find any configuration that gets to change the Status Bar Icon color to a dark one. Bear in mind this code worked just fine on Flutter 1.20.4, but now it doesn't make any differences:
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle.light.copyWith(
statusBarColor: Colors.transparent,
statusBarIconBrightness: Brightness.light),
);My experience with the SystemUiOverlayStyle throughout several Flutter versions have been pretty bad, sometimes it works and sometimes it doesn't, while we can't find much examples or documentations on this.
So to summarize:
AppBaris ignoring itsbrightnessparameter.AppBardoesn't document howbrightnessaffects the OS Status Bar (ButAnnotatedRegiondoes make a reference to it.AnnotatedRegiondoesn't change the Android Status Bar.SystemChrome.setSystemUIOverlayStylepartly changes the Android Status Bar.
flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 1.22.0, on Microsoft Windows [Version 10.0.19041.508], locale pt-BR)
[√] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[√] Android Studio (version 4.0)
[√] IntelliJ IDEA Ultimate Edition (version 2019.3)
[√] VS Code (version 1.48.2)
[√] Connected device (1 available)
• No issues found!

