Skip to content

AppBar ignores Brightness and AnnotatedRegion doesn't work #67497

@feinstein

Description

@feinstein

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:

image

Same thing setting the brightness as Brightness.dark:

image

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:

  • AppBar is ignoring its brightness parameter.
  • AppBar doesn't document how brightness affects the OS Status Bar (But AnnotatedRegion does make a reference to it.
  • AnnotatedRegion doesn't change the Android Status Bar.
  • SystemChrome.setSystemUIOverlayStyle partly 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!

Metadata

Metadata

Assignees

Labels

a: layoutSystemChrome and Framework's Layout Issuesa: qualityA truly polished experiencef: material designflutter/packages/flutter/material repository.found in release: 1.22Found to occur in 1.22frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work on

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions