How to disable default Widget splash effect in Flutter?
You can replace the Theme's splashFactory
with one that doesn't paint anything:
class NoSplashFactory extends InteractiveInkFeatureFactory {
const NoSplashFactory();
@override
InteractiveInkFeature create({
MaterialInkController controller,
RenderBox referenceBox,
Offset position,
Color color,
TextDirection textDirection,
bool containedInkWell = false,
Rect Function() rectCallback,
BorderRadius borderRadius,
ShapeBorder customBorder,
double radius,
VoidCallback onRemoved,
}) {
return NoSplash(
controller: controller,
referenceBox: referenceBox,
);
}
}
class NoSplash extends InteractiveInkFeature {
NoSplash({
@required MaterialInkController controller,
@required RenderBox referenceBox,
}) : assert(controller != null),
assert(referenceBox != null),
super(
controller: controller,
referenceBox: referenceBox,
);
@override
void paintFeature(Canvas canvas, Matrix4 transform) {}
}
And wrap your widget with it:
child: new Theme(
data: new ThemeData(splashFactory: const NoSplashFactory()),
child: new TextField(...),
),
Originally answered by HansMuller on a GitHub PR.
Per @hunter's suggestion above, I found that by setting both highlightColor
and splashColor
in my theme to Colors.transparent
removed the ripple.
I do hold some concerns that setting highlightColor
might have some knock-on effects, but I haven't noticed any yet.
Edit: While my original answer has loads of up-votes, the more I learn, the more I've realised that it really isn't the right way to do it. As several people have pointed out below, a better solution is to use the splashFactory
. For example, the code below shows it being set directly via the style, or you can set it in your theme too:
ElevatedButton(
onPressed: onPressed,
style: ElevatedButton.styleFrom(
splashFactory: NoSplash.splashFactory,
),
child: child,
);
You can wrap the component into Theme
and set the properties splashColor
and highlightColor
to transparent on ThemeData
Theme(
data: ThemeData(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
),
child: YourWidget(),
);