[web] change status bar color based on SystemUiOverlayStyle

[maRci002]

Closes flutter/flutter#123365

In my example code I'm using SystemUiOverlayStyle.dark which has null statusBarColor by default (which can be changed via Change status bar color button) in this case we do not override browser's default status bar color.

Old behaviour	New behaviour
web_output.mp4	web_new_output.mp4

In case of PWA the when statusBarColor is null it will use theme_color property from manifest.json (I don't know from where does flutter generate manifest.json).

The default status bar color for PWA is: "theme_color": "#0175C2",
https://github.com/flutter/flutter/blob/f4caee6efbc0b0094f3cee9e31a7486e3d030819/examples/api/web/manifest.json#L7

Old PWA behaviour	New PWA behaviour
pwa_old_output.mp4	pwa_new_output.mp4

Pre-launch Checklist

• I read the Contributor Guide and followed the process outlined there for submitting PRs.
• I read the Tree Hygiene wiki page, which explains my responsibilities.
• I read and followed the Flutter Style Guide and the C++, Objective-C, Java style guides.
• I listed at least one issue that this PR fixes in the description above.
• I added new tests to check the change I am making or feature I am adding, or Hixie said the PR is test-exempt. See testing the engine for instructions on writing and running engine tests.
• I updated/added relevant documentation (doc comments with ///).
• I signed the CLA.
• All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

[ditman]

Thanks for the contribution @maRci002!

I only have a couple of nitpicks about this. My biggest concern is that this might break some behavior unexpectedly, and this may need to warn users on where to find the functionality.

[ditman]

Do I need any build before using fest test command?

@maRci002 now that you mention this, you probably do, but I'm not sure that our wasm build works in windows yet, I normally use a (g)Linux machine for development.

If you don't mind, I'm going to check out your branch and maybe push a fix to get it mergeable again.

[ditman]

I did a small change, the error in tests was causing because the wrong platform_dispatcher_test.dart was moved into the new directory (there's TWO tests named that in the repo, one inside canvaskit, the other inside engine). My apologies for the confusion, tests here should pass now!

I'll update the branch to the latest changes from main to see how it goes.

[maRci002]

If you don't mind, I'm going to check out your branch and maybe push a fix to get it mergeable again.

Thanks for the modifications.

Once this PR is merged I'm going to update Stackoverflow answers, here are some of them:

• https://stackoverflow.com/questions/70990963/flutter-web-status-bar-in-ios-safari
• https://stackoverflow.com/questions/67895593/how-to-change-status-bar-colour-in-flutter-web-after-saving-as-a-bookmark
• https://stackoverflow.com/questions/70230285/is-there-any-way-to-change-the-status-bar-color-via-flutter-in-a-pwa
• https://stackoverflow.com/questions/61201189/how-to-change-the-color-of-menu-bar-when-flutter-web-app-installs-as-a-pwa
• https://stackoverflow.com/questions/68317046/how-to-change-chrome-header-color-in-flutter-web

It seems everyone is creating <meta name="theme-color" content="#000000"> a meta element as a workaround and it worked even if the engine created it's own when SystemChrome.setApplicationSwitcherDescription called, this means we don't break anything.

[ditman]

@maRci002 I gave this another thought, and I don't think we should tell people to "disregard this warning if...", so I made this PR backwards compatible.

The old API will continue to work until we fix the offending widgets in the framework. THEN we will be able to nag users that are using the platform message directly (or through some 3p widget) so they can fix it before it stops working altogether.

(I've also moved a random "ui" test that was testing the title to the "platform_dispatcher" directory that was created for this PR, and I think it makes more sense than before)

I hope you don't mind this change. Please, let me know if your use case is still working as intended, so I can land this!

(PS: the stack overflow updates are still good, so people know what's coming, but they should be done carefully because this is going to take a while to land in master, which it seems is what most people are using!)

[maRci002]

(PS: the stack overflow updates are still good, so people know what's coming, but they should be done carefully because this is going to take a while to land in master, which it seems is what most people are using!)

I was going to mention that there are currently two ways to set the color of the browser's status and address bars: by setting the primaryColor property of the MaterialApp theme, or by setting the color property of MaterialApp. Another solution available on the master channel is to use SystemUiOverlayStyle. I will update the answer and specify the exact version that includes this update once it is available on the dev and stable channels.

The old API will continue to work until we fix the offending widgets in the framework.

Since the old API did not specify its behavior on the web, the behavior exhibited by the old API on the web was considered a bug

https://api.flutter.dev/flutter/widgets/Title/color.html

A color that the window manager should use to identify this app. Must be an opaque color (i.e. color.alpha must be 255 (0xFF)), and must not be null.

https://api.flutter.dev/flutter/widgets/WidgetsApp/color.html

The primary color to use for the application in the operating system interface.

For example, on Android this is the color used for the application in the application switcher.

https://api.flutter.dev/flutter/services/ApplicationSwitcherDescription-class.html

Specifies a description of the application that is pertinent to the embedder's application switcher (also known as "recent tasks") user interface.

Used by SystemChrome.setApplicationSwitcherDescription.

https://api.flutter.dev/flutter/services/SystemChrome/setApplicationSwitcherDescription.html

Specifies the description of the current state of the application as it pertains to the application switcher (also known as "recent tasks").

Any part of the description that is unsupported on the current platform will be ignored.

https://github.com/flutter/flutter/blob/f72efea43c3013323d1b95cff571f3c1caa37583/packages/flutter/lib/src/material/app.dart#L967-L974

used on old Android OSes to color the app bar in Android's switcher UI.

I am very pleased with these changes. The RenderView._updateSystemChrome function calls SystemChrome.setSystemUIOverlayStyle, which triggers a microtask to update the system UI overlay style so it is always superior to the SystemChrome.setApplicationSwitcherDescription which is triggered by Title widget.

[ditman]

Let's land this version then, and then we can experiment to remove the color changing support from the Title widget, maybe even remove it first from the flutter/flutter widget itself!

[ditman]

LGTM! Let's go with this new platform method first!

[auto-submit]

auto label is removed for flutter/engine, pr: 40599, due to This PR has not met approval requirements for merging. You have project association NONE and need 1 more review(s) in order to merge this PR.

• Merge guidelines: You need at least one approved review if you are already a MEMBER or two member reviews if you are not a MEMBER before re-applying the autosubmit label. Reviewers: If you left a comment approving, please use the "approve" review action instead.

[auto-submit]

auto label is removed for flutter/engine, pr: 40599, due to Validations Fail.