Repository navigation
InkWell and InkResponse not close enough to the real thing #20922
Description
Activity
both InkRipple.splashFactory and InkRipple.splashFactory
seems you meant to mention something else instead of
InkRipple.splashFactorytwice.Please add the output of
flutter doctor -v.- added this to the milestone
on Aug 23, 2018 Fixed.
[√] Flutter (Channel dev, v0.7.2, on Microsoft Windows [versão 10.0.17134.228], locale pt-BR) [!] Android toolchain - develop for Android devices (Android SDK 28.0.0) X Android license status unknown. [√] Android Studio (version 3.1) [√] IntelliJ IDEA Ultimate Edition (version 2018.2) [!] VS Code, 64-bit edition (version 1.21.1) [√] Connected devices (1 available)There's no documentation about the animation of the ripple effect. At least I see nothing on https://material.io/design/interaction/states.html#pressed
But from this doc we can see that the highlight color is a black with 16/32% opacity. Which is currently not value used by Flutter.
I feel you, the whole behavior of InkWell is way off, it doesn't seem similar at all to any default android native inkwell.
More importantly, in Android native the splash is shown when I REMOVE my finger, while in Flutter it's shown when I hold my finger down.
That is a great point! It is so annoying that the ripple effect is like old Material style
Observations when comparing a
material.button.MaterialButtonin Android to aFlatButton(or other buttons) in Flutter are the following. I'm not saying which one is correct, just that these are the differences:- Flutter has a
highlightand asplashlayer and that doesn't seem to be the case for the Android implementation. It just has aripplelayer. For comparisons sake,splash(Flutter) ==ripple(Android). - The
splashanimation is "slower" than therippleanimation. - The
splashanimation is starts with a much smaller initial radius than therippleanimation. This could be why it seems like it is slower. - The
splashanimation doesn't always fully animate (in my experience) when your finger is lifted off the button. Maybe becausehighlight+splashcompete for animation time (have to double confirm on release)? On Android theripplealways completes.
It's pretty noticeable when you go back to working on Android for sure. If I had to subjectively choose, I'd say the Flutter implementation is "wrong".
Reacted by Miguel Mato, Tobias Marschall, ipcjs and stinekamau- Flutter has a
I'm new to Flutter and to native development in general, and I can definitely see where you all are coming from.
Here is my 2 cents on this issue, as I'm creating my application in Flutter:
-
The
splashspeed is not mentioned (at least nowhere I could find) on the Material docs, but I do agree with some of you here that says both the default implementationInkSplash.splashFactoryand the alternativeInkRipple.splashFactoryare too slow (even though the later is better than the default). What I think would be helpful is to allow developers to change the speed as aThemeDataproperty as well as a widget parameter (the same wayhightlightColorworks). I know we can create a customsplashFactory(here is a link on how it could be accomplished) that has a fastersplash, but it seems a lot of work to control only the speed. -
The
highlightbehaviour shouldn't be there by default. This would be inline with the material design docs: https://material.io/design/interaction/states.html. -
Showing the
splashwhen pressed and not when released as it is currently implemented in Flutter seems to be the right behaviour following the material docs (https://material.io/design/interaction/states.html#pressed).
Comparing the Material implementation for Flutter with the Material implementation for Android might not be the best comparison. We should be comparing it to the Material guidelines, and if Android's implementation is not following it open a ticket on the Android project.
-
@marcos-abreu But users couldn't care less about the Material guidelines. They want a consistent experience, and they will judge your app according to that. Besides, if what you say is true, the current Android implementation is much better. I'd suggest Flutter follows Android and you may open a ticket on the Material guidelines instead.
Reacted by RamiNhu, ritar, Claudio Felber, Tobias Marschall, Plantake, Max Yablochkin, Liloupar, Батмэнд Ганбаатар and danielRiWhat I did was that at ink_well.dart I moved the splash from _handleTapDown to _handleTap and _handleTapCancel and then added a future delayed to cancel of the splash and a _currentTapDownDetails variable to get the latest TapDownDetails.
void _handleTapDown(TapDownDetails details) { _currentTapDownDetails = details; if (widget.onTapDown != null) { widget.onTapDown(details); } updateKeepAlive(); updateHighlight(_HighlightType.pressed, value: true); } void _handleTap(BuildContext context) { _showSplash(); if (widget.onTap != null) { if (widget.enableFeedback) Feedback.forTap(context); widget.onTap(); } } void _handleTapCancel() { _showSplash(); if (widget.onTapCancel != null) { widget.onTapCancel(); } } void _showSplash() { updateHighlight(_HighlightType.pressed, value: true); final InteractiveInkFeature splash = _createInkFeature(_currentTapDownDetails); _splashes ??= HashSet<InteractiveInkFeature>(); _splashes.add(splash); _currentSplash = splash; Future<void>.delayed(const Duration(milliseconds: 250), () { _currentSplash?.cancel(); _currentSplash = null; updateHighlight(_HighlightType.pressed, value: false); }); }Then I changed ink_splash.dart at line 139:
_radiusController = AnimationController(duration: _kUnconfirmedSplashDuration, vsync: controller.vsync) ..addListener(controller.markNeedsPaint) ..forward(); _radius = _radiusController.drive(CurveTween(curve: _kSplashCurve));And added _kSplashCurve:
const Curve _kSplashCurve = Curves.easeOutCubic;
And at the bottom:
canvas.drawCircle(center, _radius.value * _targetRadius, paint);PS C:\Users\User\flutter> flutter doctor -v [√] Flutter (Channel beta, v1.6.3, on Microsoft Windows [Version 10.0.17134.765], locale sv-SE) • Flutter version 1.6.3 at C:\Users\User\flutter • Framework revision bc7bc94083 (3 weeks ago), 2019-05-23 10:29:07 -0700 • Engine revision 8dc3a4cde2 • Dart version 2.3.2 (build 2.3.2-dev.0.0 e3edfd36b2)I think this gave a somewhat similar appearance to android.
@martinory Why don't you publish a plugin with your solution?
https://flutter.dev/docs/development/packages-and-plugins/developing-packagesOkay, so I made some changes and I think it turned out really well and cleaner.
Here is the GitHub repository with an example https://github.com/martinory/Androidish-InkWell.
And here is the pub repo: https://pub.dev/packages/androidish_ink_well.Reacted by Ryan Ramchandar, İhsan Işık, LX, Tamim Arafat, Amine LAHRIM and Dolev FrancoReacted by Amine LAHRIM8 remaining items
- removed this from the milestone
on Aug 17, 2020 This is still an issue. Any update?
Reacted by Tamim Arafat, ritar, Nicholas Ray, SAGAR SURI, Claudio Felber, Tobias Marschall, Akar Jaza, vaderr and Dominik RoszkowskiLooks like this is and #49957 are duplicates; on the other issue I've been tracking some additional thoughts. I'm working on an implementation now and will open a PR soon that would get Flutter back in line with Android's higher API versions. Currently, it seems like the best path forward might be just to create a new InkFeature factory and set it as the new default, but I'm open to being convinced otherwise.
There is a public doc being worked on to address this issue, and others related to Ink, check it out here:
https://docs.google.com/document/d/1mtt4nIlK-9-HrjBagwTmyk3b-52kLyv-3rjnPzgcI24
Reacted by MakoThere is a public doc being worked on to address this issue, and others related to Ink, check it out here:
https://docs.google.com/document/d/1mtt4nIlK-9-HrjBagwTmyk3b-52kLyv-3rjnPzgcI24
Hi @clocksmith is the document still public? I cant seem to access it without permission
Is this still being worked on?
Reacted by danielRi, Ajibola Akinmosin and Dominik Roszkowski
When I briefly tap stuff on native Android, I usually can see the highlight and splash very easily. However, in Flutter, both
InkRipple.splashFactoryandInkSplash.splashFactoryare slower to show/hide.InkRipple.splashFactoryis better in my opinion, should be the default, but it's not quite right also.More importantly, in Android native the splash is shown when I REMOVE my finger, while in Flutter it's shown when I hold my finger down.
I wish splash/highlight were tweaked to obtain the exact same effect of native Android.