Fixing elevation issues with Material 3

[darrenaustin]

This PR attempts to alleviate some of the issues described in: #107190.

Previously we had two colors that controlled the presentation of elevation on a Material widget: shadowColor and the new surfaceTintColor. The defaults for both of these when useMaterial3 is true was null which meant to turn off that presentation (either a drop shadow or surface tint overlay). However, there are a lot of widgets that assume that the default shadow color will be non-null which caused a lot of the issues described in the issue. This especially impacted widgets that depended on this default, but hadn't yet been migrated to M3.

To address these issues, this PR makes the following changes to the defaults for useMaterial3: true:

• Material.shadowColor will default to ThemeData.colorScheme.shadow if it is null. So by default there will be a drop shadow. You can turn this off by setting it to Colors.transparent.
• Material.surfaceTintColor will default to null. So by default no surface tint overlay will be applied.
• The surface tint feature can also be disabled if you set the surfaceTintColor to Colors.transparent.
• Added surfaceTint and shadowColor properties to Dialog and Drawer widgets.

Here is @rydmike's example showing Material 2 and Material 3 with these changes:

Fixes: #107190.
Fixes: #107423.

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], including [Features we expect every widget to implement].
• I signed the [CLA].
• I listed at least one issue that this PR fixes in the description above.
• I updated/added relevant documentation (doc comments with ///).
• I added new tests to check the change I am making, or this PR is [test-exempt].
• All existing and new tests are passing.

[guidezpl]

Looks great, love this! Just some small notes about using Colors.transparent, and documentation improvements and consistency

[HansMuller]

Once Pierre's feedback has been addressed, LGTM. As he noted, it's important to differentiate between recognizing a special value, Colors.transparent, vs any color with alpha 0. Either version works (you could even say "any color whose alpha is 0, like Colors.transparent), just need to be consistent.

This is a nice PR BTW; appreciate all the new const values.

[darrenaustin]

Once Pierre's feedback has been addressed, LGTM. As he noted, it's important to differentiate between recognizing a special value, Colors.transparent, vs any color with alpha 0. Either version works (you could even say "any color whose alpha is 0, like Colors.transparent), just need to be consistent.

Yeah, I wasn't sure if we should keep it more general (alpha == 0) or just have it require exactly Colors.transparent. I am open to either, but perhaps going with Colors.transparent is simpler to describe and understand.

This is a nice PR BTW; appreciate all the new const values.

Thx!

[guidezpl]

  _    ___ _____ __  __ 
 | |  / __|_   _|  \/  |
 | |_| (_ | | | | |\/| |
 |____\___| |_| |_|  |_|
                        

[rydmike]

This is nice @darrenaustin, much appreciated. It will also help with migration to M3, widgets composed with Material will get shadow as before when opting in on M3. If you want tint, you can add it yourself, logical.

Would be nice if it could be snuck into a hotfix in 3.3 at some point, it makes opting on on Material3 in its current incomplete state a much more viable option.

Did you try it with PopupMenuButton? It is also quite a problematic case. Sure like all others it will get fixed when it gets its M3 implementation. Plus at least with this is gets elevation shadow in light and dark mode in M3 as it should.

Light mode is fine without tint, even in M3 in a clinch, but dark mode is a bit more challenging, since it wont get the M2 dark mode overlay color, in M3 mode when it is elevated, and it has no tint color we could set for M3 tint, so it wont be very distinguishable on dark backgrounds.

Problematic since popup overlays has no scrim like dialogs typically do, so it melts into the background in dark mode where shadow is it hard to see. Well yes, it has background color, even in theme, and I could certainly theme it based on themed elevation to give its surface color a tint in M3 mode, using the M3 tint algo on its background color theme tint color. I might just do that until support for it arrives in stable, at least if this PR and/or popup's tint will take a while to land in stable.

Any thoughts on when you plan to land this PR in stable? Next stable release in 3...4 months, or in a hotfix to 3.3, like 3.3.1 in near future?