How to disable default Widget splash effect in Flutter?

Question

How can I disable the default splash/ripple/ink effect on a Widget? Sometimes the effect is unwanted, such as in the following TextField case:

Answer 1

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, ); 

Answer 2

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(), ); 

Answer 3

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.

Answer 4

Use NoSplash.splashFactory

Set to a theme

final yourTheme = ThemeData.light();
...
Theme(
  data: yourTheme.copyWith(
    splashFactory: NoSplash.splashFactory,
  ),
  ...
)

Set to a material widget

ElevatedButton(
  style: ElevatedButton.styleFrom(
    splashFactory: NoSplash.splashFactory,
  ),
  onPressed: () { },
  child: Text('No Splash'),
)