Skip to content

Material 3 common buttons should use sparkle splash effect on Android. #101075

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
Merged
fluttergithubbot merged 2 commits into from
Mar 31, 2022
Merged

Material 3 common buttons should use sparkle splash effect on Android. #101075

fluttergithubbot merged 2 commits into from
Mar 31, 2022

Conversation

@darrenaustin
Copy link
Contributor

@darrenaustin darrenaustin commented Mar 30, 2022 •
edited
Loading

Part of: #91605

Part of the Material 3 migration for the common buttons is to use the sparkle splash effect if running on Android. This will be handled by the full button migration in #100794, but that is delayed due to an API issue we need to resolve. In the mean time this PR just turns on the sparkle effect (#99731) for buttons when ThemeData.useMaterial3 is turned on and the platform is non-web Android.

Added tests to check that the right splash factory is used for each button.

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.

@flutter-dashboard flutter-dashboard bot added a: text input Entering text in a text field or keyboard related problems f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. labels Mar 30, 2022
justinmc
justinmc approved these changes Mar 30, 2022
View reviewed changes
Copy link
Contributor

@justinmc justinmc left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✨ LGTM ✨

I need to try this out sometime, I still haven't seen Flutter actually do the sparkle live. Exciting.

Just one potential problem with the test text, and one question:

So if I've got an app that builds to both iOS and Android that uses Material buttons on both, and I set useMaterial3 to true, it will not sparkle on iOS? Just out of curiosity, is it not possible to get iOS to sparkle even if I want to?

@darrenaustin
Copy link
Contributor Author

darrenaustin commented Mar 30, 2022

So if I've got an app that builds to both iOS and Android that uses Material buttons on both, and I set useMaterial3 to true, it will not sparkle on iOS? Just out of curiosity, is it not possible to get iOS to sparkle even if I want to?

It is intended only for Android devices so that is why we have the defaults set up that way. I don't know enough about the implementation whether it would work on iOS. @clocksmith would know more about that.

@darrenaustin
Fixed some test descriptions.
7664b04 
Also changed the default for useMaterial3 splashFactory when it isn't sparkle to ripple instead of splash.
@fluttergithubbot fluttergithubbot merged commit a8e6fd5 into flutter:master Mar 31, 2022
@darrenaustin darrenaustin deleted the m3_button_ripple branch March 31, 2022 03:31
@clocksmith
Copy link
Contributor

clocksmith commented Mar 31, 2022

So if I've got an app that builds to both iOS and Android that uses Material buttons on both, and I set useMaterial3 to true, it will not sparkle on iOS? Just out of curiosity, is it not possible to get iOS to sparkle even if I want to?

It is intended only for Android devices so that is why we have the defaults set up that way. I don't know enough about the implementation whether it would work on iOS. @clocksmith would know more about that.

It will currently work on any platform that uses the non-web engine (try manually setting splashFactory for theme to InkSparkle), and eventually it will also work on the CanvasKit engine!

@clocksmith
Copy link
Contributor

clocksmith commented Mar 31, 2022

But yes, it is correct that the Material guidance is to only use on Android. I will be following up with a post on making custom ripples with the same tech

@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Mar 31, 2022
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Mar 31, 2022
@engine-flutter-autoroll
a8e6fd5 Material 3 common buttons should use sparkle splash effect on…
375d03a 
… Android. (flutter/flutter#101075)
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Mar 31, 2022
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Mar 31, 2022
@engine-flutter-autoroll
a8e6fd5 Material 3 common buttons should use sparkle splash effect on…
0625991 
… Android. (flutter/flutter#101075)
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Mar 31, 2022
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Mar 31, 2022
@engine-flutter-autoroll
a8e6fd5 Material 3 common buttons should use sparkle splash effect on…
cf8f453 
… Android. (flutter/flutter#101075)
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Mar 31, 2022
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Mar 31, 2022
@engine-flutter-autoroll
a8e6fd5 Material 3 common buttons should use sparkle splash effect on…
ae1b3a4 
… Android. (flutter/flutter#101075)
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Apr 1, 2022
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Apr 1, 2022
@engine-flutter-autoroll
a8e6fd5 Material 3 common buttons should use sparkle splash effect on…
154bcac 
… Android. (flutter/flutter#101075)
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Apr 1, 2022
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Apr 1, 2022
@engine-flutter-autoroll
a8e6fd5 Material 3 common buttons should use sparkle splash effect on…
777db9f 
… Android. (flutter/flutter#101075)
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Apr 1, 2022
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Apr 1, 2022
@engine-flutter-autoroll
a8e6fd5 Material 3 common buttons should use sparkle splash effect on…
3d38822 
… Android. (flutter/flutter#101075)
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Apr 1, 2022
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Apr 1, 2022
@engine-flutter-autoroll
a8e6fd5 Material 3 common buttons should use sparkle splash effect on…
b745b28 
… Android. (flutter/flutter#101075)
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Apr 1, 2022
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Apr 1, 2022
@engine-flutter-autoroll
a8e6fd5 Material 3 common buttons should use sparkle splash effect on…
40327d4 
… Android. (flutter/flutter#101075)
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Apr 2, 2022
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Apr 2, 2022
@engine-flutter-autoroll
a8e6fd5 Material 3 common buttons should use sparkle splash effect on…
fe5b3f5 
… Android. (flutter/flutter#101075)
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Apr 2, 2022
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Apr 2, 2022
@engine-flutter-autoroll
a8e6fd5 Material 3 common buttons should use sparkle splash effect on…
9987ba3 
… Android. (flutter/flutter#101075)
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Apr 4, 2022
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Apr 4, 2022
@engine-flutter-autoroll
a8e6fd5 Material 3 common buttons should use sparkle splash effect on…
495595f 
… Android. (flutter/flutter#101075)
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Apr 4, 2022
Merged
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Apr 4, 2022
@engine-flutter-autoroll
a8e6fd5 Material 3 common buttons should use sparkle splash effect on…
aa8b999 
… Android. (flutter/flutter#101075)
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Apr 4, 2022
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Apr 4, 2022
@engine-flutter-autoroll
a8e6fd5 Material 3 common buttons should use sparkle splash effect on…
4eea369 
… Android. (flutter/flutter#101075)
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Apr 4, 2022
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Apr 4, 2022
@engine-flutter-autoroll
a8e6fd5 Material 3 common buttons should use sparkle splash effect on…
3e5662e 
… Android. (flutter/flutter#101075)
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Apr 4, 2022
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Apr 4, 2022
@engine-flutter-autoroll
a8e6fd5 Material 3 common buttons should use sparkle splash effect on…
468c6ef 
… Android. (flutter/flutter#101075)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Apr 4, 2022
@engine-flutter-autoroll
a8e6fd5 Material 3 common buttons should use sparkle splash effect on…
2992bc4 
… Android. (flutter/flutter#101075)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Apr 4, 2022
@engine-flutter-autoroll
a8e6fd5 Material 3 common buttons should use sparkle splash effect on…
055bc9d 
… Android. (flutter/flutter#101075)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Apr 4, 2022
@engine-flutter-autoroll
a8e6fd5 Material 3 common buttons should use sparkle splash effect on…
749ec0a 
… Android. (flutter/flutter#101075)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Apr 5, 2022
@engine-flutter-autoroll
a8e6fd5 Material 3 common buttons should use sparkle splash effect on…
b76208f 
… Android. (flutter/flutter#101075)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Apr 5, 2022
@engine-flutter-autoroll
a8e6fd5 Material 3 common buttons should use sparkle splash effect on…
71f93f3 
… Android. (flutter/flutter#101075)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Apr 5, 2022
@engine-flutter-autoroll
a8e6fd5 Material 3 common buttons should use sparkle splash effect on…
e7e38a3 
… Android. (flutter/flutter#101075)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Apr 5, 2022
@engine-flutter-autoroll
a8e6fd5 Material 3 common buttons should use sparkle splash effect on…
35540ec 
… Android. (flutter/flutter#101075)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Apr 5, 2022
@engine-flutter-autoroll
a8e6fd5 Material 3 common buttons should use sparkle splash effect on…
339a3ff 
… Android. (flutter/flutter#101075)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Apr 5, 2022
@engine-flutter-autoroll
a8e6fd5 Material 3 common buttons should use sparkle splash effect on…
bc8b262 
… Android. (flutter/flutter#101075)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Apr 5, 2022
@engine-flutter-autoroll
a8e6fd5 Material 3 common buttons should use sparkle splash effect on…
d0926e1 
… Android. (flutter/flutter#101075)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Apr 5, 2022
@engine-flutter-autoroll
a8e6fd5 Material 3 common buttons should use sparkle splash effect on…
0877093 
… Android. (flutter/flutter#101075)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Apr 5, 2022
@engine-flutter-autoroll
a8e6fd5 Material 3 common buttons should use sparkle splash effect on…
b96b61d 
… Android. (flutter/flutter#101075)
@darshankawar darshankawar mentioned this pull request Oct 6, 2022
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@justinmc justinmc justinmc approved these changes

@HansMuller HansMuller Awaiting requested review from HansMuller

@guidezpl guidezpl Awaiting requested review from guidezpl

@clocksmith clocksmith Awaiting requested review from clocksmith

Assignees

No one assigned

Labels

a: text input Entering text in a text field or keyboard related problems 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.

4 participants

@darrenaustin @clocksmith @justinmc @fluttergithubbot