Support for elevation based dark theme overlay color in the Material widget #35560

darrenaustin · 2019-07-04T00:23:00Z

Description

In dark themes, drop shadows used to indicate elevation in Material apps can be difficult to see. To help with this, the Material Dark theme specification, adds a new semi-transparent overlay on surfaces to lighten them according to their elevation. This PR adds support for this feature.

If a Material widget is in a theme where the new ThemeData.applyElevationOverlay flag is turned on, and the Material.color is the theme's surface color (i.e. ThemeData.colorScheme.surface), then a semi-transparent white will be composited over the Material.color for the background of the widget. The level of the transparency follows the values in the specification.

By default this feature is turned off to maintain backwards compatibility with apps built before the Dark theme spec was published.

To turn it on for your app, you can adjust your dark themes to have ThemeData.applyElevationOverlay set to true.

Related Issues

#35494 - A previous attempt at this PR.

Tests

I added a group of new tests in material_test.dart to exercise this feature.

Checklist

I read the Contributor Guide and followed the process outlined there for submitting PRs.
I signed the CLA.
I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
I updated/added relevant documentation (doc comments with ///).
All existing and new tests are passing.
The analyzer (flutter analyze --flutter-repo) does not report any problems on my PR.
I am willing to follow-up on review comments in a timely manner.

Breaking Change

Does your PR require Flutter developers to manually update their apps to accommodate your change?

No, this is not a breaking change.

… Also added a `darkThemeOverlay` boolean to turn it off in cases where it not wanted.

- Renamed Material.darkThemeOverlay -> Material.applyDarkThemeElevationOverlay - Added applyDarkThemeElevationOverlay to ThemeData - Modified Material to use the theme's overlay setting if none is provided to the widget. - Turned the overlay off by default

HansMuller

LGTM, mostly just some comments about the docs.

packages/flutter/lib/src/material/material.dart

packages/flutter/lib/src/material/theme_data.dart

rami-a

LGTM!

- Removed applyDarkThemeElevationOverlay from Material as it is covered by ThemeData. - Updated documentation based on feedback. - Made just the overlay color animate to get around issues with OutlineButton.

darrenaustin · 2019-07-11T21:59:20Z

The indentation looks off here

D'oh. Old habits die hard. Thanks.

- Only apply the overlays to Material widgets using the surface color. - Switched to using the elevation->opacity formula that Android is using. - Renamed applyDarkThemeElevationOverlay -> applyElevationOverlay. - No longer checking against ThemeData.brightness to dark as applyElevationOverlay should only be set to true on dark themes.

rami-a

LGTM!

rami-a · 2019-07-15T13:31:53Z

packages/flutter/test/material/material_test.dart

+          ),
+          child: buildMaterial(color: surfaceColor, elevation: 8.0))
+      );
+      final RenderPhysicalShape model = getShadow(tester);


Is there a reason the helper function is called getShadow? I was a little confused by this

HansMuller

LGTM

HansMuller · 2019-07-15T23:05:00Z

packages/flutter/lib/src/material/material.dart

+// indicate the level of elevation.
+Color _elevationOverlayColor(BuildContext context, Color background, double elevation) {
+  final ThemeData theme = Theme.of(context);
+  if (elevation > 0.0 &&


Conventional formatting for this would be one-line or:

if (elevation > 0.0 && theme.applyElevationOverlay && background == theme.colorScheme.surface) {

HansMuller · 2019-07-15T23:07:01Z

packages/flutter/lib/src/material/theme_data.dart

    ChipThemeData chipTheme,
    TargetPlatform platform,
    MaterialTapTargetSize materialTapTargetSize,
+    bool applyElevationOverlay,


Maybe applyElevationOverlayColor?

HansMuller · 2019-07-15T23:08:50Z

packages/flutter/lib/src/material/theme_data.dart

+  ///
+  /// Material drop shadows can be difficult to see in a dark theme, so the
+  /// elevation of a surface should be portrayed with an "overlay" in addition
+  /// to the shadow. As the elevation of the component increases, the bright


the bright => the white

HansMuller · 2019-07-15T23:11:48Z

packages/flutter/lib/src/material/theme_data.dart

+  /// Note: this setting is here to maintain backwards compatibility with
+  /// apps that were built before the Material Dark theme specification
+  /// was published. New apps should set this to [true] for dark themes
+  /// (where [brightness] is [Brightness.dark].


(where => where

HansMuller · 2019-07-15T23:12:08Z

packages/flutter/lib/src/material/theme_data.dart

+  ///
+  /// See also:
+  ///
+  ///  * [Material.elevation], which effects how transparent the overlay is.


the overlay => the white overlay

HansMuller · 2019-07-15T23:13:30Z

packages/flutter/lib/src/material/theme_data.dart

+  /// See also:
+  ///
+  ///  * [Material.elevation], which effects how transparent the overlay is.
+  ///  * [Material.color], which if it matches [colorScheme.surface] an overlay


[Material.color], the white color overlay will only be applied of the material's color is [colorScheme.surface].

Much clearer. Thx.

HansMuller · 2019-07-15T23:18:32Z

packages/flutter/test/material/material_test.dart

+              ),
+            )
+        );
+        await tester


this can be one line

- Minor formatting and doc changes - Renamed ThemeData.applyElevationOverlay -> ThemeData.applyElevationOverlayColor

…widget (flutter#35560) Added support for a semi-transparent white overlay color for `Material` widgets to indicate their elevation in a dart theme. A new `ThemeData.applyElevationOverlayColor` flag was added to control this behavior, which is off by default for backwards compatibility reasons.

darrenaustin added 2 commits July 3, 2019 17:07

Added support for dark theme overlay colors to the Material widget.…

564aac9

… Also added a `darkThemeOverlay` boolean to turn it off in cases where it not wanted.

darrenaustin added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels Jul 4, 2019

darrenaustin requested review from HansMuller and rami-a July 4, 2019 00:23

googlebot added the cla: yes label Jul 4, 2019

darrenaustin mentioned this pull request Jul 4, 2019

Added support for elevation based dark theme overlay color in the Material widget #35494

Closed

8 tasks

HansMuller approved these changes Jul 4, 2019

View reviewed changes

rami-a approved these changes Jul 9, 2019

View reviewed changes

darrenaustin added 2 commits July 11, 2019 12:49

Updated from review comments

8f4e39b

- Removed applyDarkThemeElevationOverlay from Material as it is covered by ThemeData. - Updated documentation based on feedback. - Made just the overlay color animate to get around issues with OutlineButton.

Fixed an indent problem.

f85b5bd

darrenaustin requested review from HansMuller, johnsonmh and rami-a July 12, 2019 22:10

darrenaustin added 4 commits July 12, 2019 15:14

Minor comment fixes.

999edb1

Minor comment fixes.

043086c

Fixed a formatting issue.

84aac29

Fixed some missing const constructors.

33ba77e

rami-a approved these changes Jul 15, 2019

View reviewed changes

HansMuller approved these changes Jul 15, 2019

View reviewed changes

Updated with feedback from review

ff55601

- Minor formatting and doc changes - Renamed ThemeData.applyElevationOverlay -> ThemeData.applyElevationOverlayColor

darrenaustin merged commit e17f8d3 into flutter:master Jul 16, 2019

darrenaustin deleted the material_dark_elevation_overlay branch July 16, 2019 17:51

This was referenced Sep 6, 2019

Planned Material Library Features Jul-Sept 2019 #35088

Closed

BottomAppBar should respect applyElevationOverlayColor #40122

Closed

HansMuller mentioned this pull request Oct 18, 2019

AppBar changes Android Navigation Bar color when scrolling #42979

Closed

github-actions bot locked as resolved and limited conversation to collaborators Aug 5, 2021

Support for elevation based dark theme overlay color in the Material widget #35560

Support for elevation based dark theme overlay color in the Material widget #35560

Uh oh!

Conversation

darrenaustin commented Jul 4, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related Issues

Tests

Checklist

Breaking Change

Uh oh!

HansMuller left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

rami-a left a comment

Choose a reason for hiding this comment

Uh oh!

darrenaustin commented Jul 11, 2019

Uh oh!

rami-a left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

HansMuller left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

darrenaustin commented Jul 4, 2019 •

edited

Loading