Skip to content

[Material] Create an InkSparkle that matches the Material 3 ripple effect #96598

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
Closed
clocksmith wants to merge 714 commits into from
Closed

[Material] Create an InkSparkle that matches the Material 3 ripple effect #96598

clocksmith wants to merge 714 commits into from

Conversation

@clocksmith
Copy link
Contributor

@clocksmith clocksmith commented Jan 13, 2022 •
edited
Loading

  • Create an InkSparkle effect that matches the Material 3 ripple on Android 12. Similar to InkRipple, but uses the new custom shader API.
  • Uses a generated SPIR-V Fragment Shader from a GLSL source.
  • Uses a generated FragmentShaderManager to make uniform updates and compilation more legible.

Android Samples:
black
pink
green

closes #82850

Note on performance:

Currently, the shader needs to be compiled at run time before the first InkSparkle can be painted. This takes 3-4 milliseconds on a Pixel 6 Pro and 30-35 milliseconds on a 2014 Moto E. The Moto E runs InkRipple at about 5 fps and the InkSparkle at about 5 fps. Even in the worst case, the async shader compilation is negligible, but it could be moved to MaterialApp or Theme creation instead.

Up next:

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.

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

@flutter-dashboard flutter-dashboard bot added f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. labels Jan 13, 2022
@clocksmith clocksmith mentioned this pull request Jan 13, 2022
Closed
@clocksmith clocksmith changed the title [WIP] [Material] Create an InkSparkle that matches the M3 Ripple on Android 12 [WIP] [Material] Create an InkSparkle that matches the M3 ripple on Android 12 Jan 13, 2022
@LasseRosenow
Copy link
Contributor

LasseRosenow commented Jan 13, 2022

In the gif above, I can see that the whole background immediately gets another color on touch, but as far as I know, the background should only change its color by the circular animation

@clocksmith
Copy link
Contributor Author

clocksmith commented Jan 13, 2022 •
edited
Loading

In the gif above, I can see that the whole background immediately gets another color on touch, but as far as I know, the background should only change its color by the circular animation

@LasseRosenow Good catch, I believe that is the InkHighlight for mouse input, need to verify that it does not show on touch only

@clocksmith clocksmith marked this pull request as ready for review January 13, 2022 17:19
@flutter-dashboard
Copy link

flutter-dashboard bot commented Jan 13, 2022

It looks like this pull request may not have tests. Please make sure to add tests before merging. If you need an exemption to this rule, contact Hixie on the #hackers channel in Chat.

If you are not sure if you need tests, consider this rule of thumb: the purpose of a test is to make sure someone doesn't accidentally revert the fix. Ask yourself, is there anything in your PR that you feel it is important we not accidentally revert back to how it was before your fix?

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

guidezpl
guidezpl reviewed Jan 14, 2022
View reviewed changes
guidezpl
guidezpl reviewed Jan 14, 2022
View reviewed changes
guidezpl
guidezpl reviewed Jan 14, 2022
View reviewed changes
guidezpl
guidezpl reviewed Jan 14, 2022
View reviewed changes
guidezpl
guidezpl reviewed Jan 14, 2022
View reviewed changes
guidezpl
guidezpl reviewed Jan 14, 2022
View reviewed changes
guidezpl
guidezpl reviewed Jan 14, 2022
View reviewed changes
guidezpl
guidezpl reviewed Jan 14, 2022
View reviewed changes
guidezpl
guidezpl reviewed Jan 14, 2022
View reviewed changes
@flutter-dashboard
Copy link

flutter-dashboard bot commented Feb 3, 2022

This pull request executed golden file tests, but it has not been updated in a while (20+ days). Test results from Gold expire after as many days, so this pull request will need to be updated with a fresh commit in order to get results from Gold.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

@flutter-dashboard
Copy link

flutter-dashboard bot commented Feb 17, 2022

It looks like this pull request may not have tests. Please make sure to add tests before merging. If you need an exemption to this rule, contact Hixie on the #hackers channel in Chat (don't just cc him here, he won't see it! He's on Discord!).

If you are not sure if you need tests, consider this rule of thumb: the purpose of a test is to make sure someone doesn't accidentally revert the fix. Ask yourself, is there anything in your PR that you feel it is important we not accidentally revert back to how it was before your fix?

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

@clocksmith clocksmith changed the title [WIP] [Material] Create an InkSparkle that matches the M3 ripple on Android 12 [Material] Create an InkSparkle that matches the M3 ripple on Android 12 Feb 17, 2022
@clocksmith clocksmith changed the title [Material] Create an InkSparkle that matches the M3 ripple on Android 12 [Material] Create an InkSparkle that matches the Material 3 Ripple Feb 17, 2022
@clocksmith clocksmith changed the title [Material] Create an InkSparkle that matches the Material 3 Ripple [Material] Create an InkSparkle that matches the Material 3 ripple effect Feb 17, 2022
@skia-gold
Copy link

skia-gold commented Feb 17, 2022

Gold has detected about 15 new digest(s) on patchset 3.
View them at https://flutter-gold.skia.org/cl/github/96598

@skia-gold
Copy link

skia-gold commented Feb 17, 2022

Gold has detected about 17 new digest(s) on patchset 5.
View them at https://flutter-gold.skia.org/cl/github/96598

@clocksmith clocksmith requested a review from darrenaustin March 1, 2022 17:22
@skia-gold
Copy link

skia-gold commented Mar 6, 2022

Gold has detected about 22 new digest(s) on patchset 8.
View them at https://flutter-gold.skia.org/cl/github/96598

engine-flutter-autoroll and others added 21 commits March 7, 2022 21:36
@engine-flutter-autoroll @clocksmith
Roll Engine from 1875f0a to 97302b9 (1 revision) (flutter#99657)
ebe5b7e
@engine-flutter-autoroll @clocksmith
Roll Engine from 97302b9 to 877bec3 (1 revision) (flutter#99660)
5e6a899
@engine-flutter-autoroll @clocksmith
Roll Engine from 877bec3 to 898fadf (1 revision) (flutter#99666)
13f0077
@markusaksli-nc @clocksmith
Re-invoke DismissIntent in Autocomplete if ignored (flutter#99403)
3d4bf42
@engine-flutter-autoroll @clocksmith
Roll Plugins from ab66a4bf3c4e to 675f91b3a3e2 (7 revisions) (flutter…
112a1b0 
…#99687)
@engine-flutter-autoroll @clocksmith
Roll Engine from 898fadf to 2664593 (2 revisions) (flutter#99690)
f72d3fa
@jonahwilliams @clocksmith
Remove package:typed_data from package:flutter dependencies (flutter#…
01ac3d8 
…99604)
@royarg02 @clocksmith
[flutter_tools] Add timeout duration to error and handle exceptions f…
03044dd 
…or HttpHostValidator. (flutter#98290)
@Jasguerrero @clocksmith
Support route on ios (flutter#99078)
f89e76b
@engine-flutter-autoroll @clocksmith
Roll Engine from 2664593 to f4e3f22 (2 revisions) (flutter#99696)
8fa7f9d
@engine-flutter-autoroll @clocksmith
Roll Engine from f4e3f22 to 1d581ab (4 revisions) (flutter#99705)
ad58d4e
@Piinks @clocksmith
Remove deprecated RenderObjectElement methods (flutter#98616)
09cb26c
@TahaTesser @clocksmith
CupertinoTabBar: Add clickable cursor on web (flutter#96996)
d7fc657
@engine-flutter-autoroll @clocksmith
Roll Engine from 1d581ab to 9e1594b (1 revision) (flutter#99709)
9b7cb2f
@dependabot @clocksmith
Bump github/codeql-action from 1.1.3 to 1.1.4 (flutter#99711)
e57e9f8
@christopherfujino @clocksmith
correct github account usernames (flutter#99716)
e63380d
@Piinks @clocksmith
Remove deprecated Overflow and Stack.overflow (flutter#98583)
ab80c31
@dependabot @clocksmith
Bump debian from bullseye-20220125-slim to bullseye-20220228-slim in …
ccd7bb2 
…/dev/ci/docker_linux (flutter#99708)
@engine-flutter-autoroll @clocksmith
Roll Engine from 9e1594b to 9c3f738 (2 revisions) (flutter#99721)
6646916
@Piinks @clocksmith
Remove deprecated CupertinoTextField, TextField, TextFormField maxLen…
999a1b9 
…gthEnforced (flutter#98539)
@clocksmith
rebase
3c04184
@clocksmith clocksmith closed this Mar 8, 2022
clocksmith added a commit to clocksmith/flutter that referenced this pull request Mar 8, 2022
@clocksmith
new commit based off flutter#96598
f4651fe
@clocksmith clocksmith mentioned this pull request Mar 8, 2022
Merged
8 tasks
@clocksmith
Copy link
Contributor Author

clocksmith commented Mar 8, 2022 •
edited
Loading

Reopened as #99731

@clocksmith clocksmith deleted the m3-ripple branch March 8, 2022 03:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@guidezpl guidezpl guidezpl left review comments

@Piinks Piinks Piinks left review comments

@nt4f04uNd nt4f04uNd nt4f04uNd left review comments

@chriscraws chriscraws Awaiting requested review from chriscraws

@HansMuller HansMuller Awaiting requested review from HansMuller

@darrenaustin darrenaustin Awaiting requested review from darrenaustin

@jmagman jmagman Awaiting requested review from jmagman

@christopherfujino christopherfujino Awaiting requested review from christopherfujino

@keyonghan keyonghan Awaiting requested review from keyonghan

@CaseyHillers CaseyHillers Awaiting requested review from CaseyHillers

Assignees

No one assigned

Labels

a: animation Animation APIs f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Introduce new Android 12 style ink ripple