Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[material_3_demo] Elevations show wrong elevation dp #1752

Closed
rydmike opened this issue Apr 28, 2023 · 0 comments · Fixed by #1753
Closed

[material_3_demo] Elevations show wrong elevation dp #1752

rydmike opened this issue Apr 28, 2023 · 0 comments · Fixed by #1753
Assignees
@QuncCccccc

Comments

@rydmike
Copy link
Contributor

rydmike commented Apr 28, 2023

Elevations show wrong elevation dp value

Actual results

The Flutter dp based elevation and Material 3 elevation levels are not the same thing.

https://m3.material.io/styles/elevation/tokens#7f8c10e0-6d56-4d9f-9525-9ca875758b20

The Material 3 demo shows them as being the same:

image

Expected results

The Material 3 demo already contains a class ElevationInfo with correct corresponding values for level, elevation, and % (alpha blend value as opacity %).

The actual used elevation value is however not being used when the elevated Material is displayed. Instead it shows the level value where elevation value is indicated:

samples/material_3_demo/lib/elevation_screen.dart

Line 149 in 4e09aa2

'${widget.info.level.toInt()} dp',

FIX:

Change the line to:

      Text(
        '${widget.info.elevation.toInt()} dp',
        style: Theme.of(context).textTheme.labelMedium,
      ),

to get expected and correct elevation actual used elevation dp info on the elevated surfaces, that also match the M3 spec.

Screenshot 2023-04-28 at 17 58 51
rydmike added a commit to rydmike/samples that referenced this issue Apr 28, 2023
@rydmike
FIX: flutter#1752 and flutter#1751
b7ba7d8
@rydmike rydmike mentioned this issue Apr 28, 2023
Merged
5 tasks
rydmike added a commit to rydmike/samples that referenced this issue Apr 29, 2023
@rydmike
Apply fixes also to material_3_demo experimental
d879a21 
Apply FIX for:
FIX: flutter#1751
FIX: flutter#1752
to experimental version of material_3_demo
domesticmouse pushed a commit that referenced this issue May 2, 2023
@rydmike
FIX: #1752 and https://githu… (#1753)
faade5f 
…b.com//issues/1751

Fixes for:

The screen that shows Material elevation and row that says "Surface Tint
Color Only" has shadow and shown elevation dp is wrong.

FIX: #1751
FIX: #1752

## Pre-launch Checklist

- [x] I read the [Flutter Style Guide] _recently_, and have followed its
advice.
- [x] I signed the [CLA].
- [x] I read the [Contributors Guide].
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] All existing and new tests are passing.

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

<!-- Links -->
[Flutter Style Guide]:
https://github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo
[CLA]: https://cla.developers.google.com/
[Discord]: https://github.com/flutter/flutter/wiki/Chat
[Contributors Guide]:
https://github.com/flutter/samples/blob/main/CONTRIBUTING.md
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@QuncCccccc QuncCccccc

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

FIX: https://github.com/flutter/samples/issues/1752 and https://githu… rydmike/samples
2 participants
@QuncCccccc @rydmike