How to disable the default Widget splash effect in Flutter?

How to disable the default Widget splash effect in Flutter?

Sometimes, the splash effect is unwanted and it is a default effect. So Learn how to disable the Splash or ink effect on the widget. Also, check this article for Passing messages from Flutter to native.

How to disable the default Widget splash effect in Flutter?

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) {}
}

Then wrap your widget with it :

child: new Theme(
  data: new ThemeData(splashFactory: const NoSplashFactory()),
  child: new TextField(...),
),

You can only set hoverColor:Colors.transparent

By setting both highlightColor and splashColor in your theme to Colors.transparent removed the ripple.
You can hold some concerns that setting highlightColor might have some knock-on effects.

This is modified Camilo’s approach just to be sure you don’t override other properties of the parent theme:

var color = Colors.transparent;
Theme(
  data: Theme.of(context).copyWith(
    highlightColor: color,
    splashColor: color,
    hoverColor: color,
  ),
  child: YourWidget(),
)

Before Hover

After Hover

Conclusion:

In this article, We have Learned How to disable the default Widget splash effect in Flutter?

Keep Learning !!! Keep Fluttering !!!

You can also learn about getting the path of flutter SDK.

Still, need Support for Flutter Development? You know where to find us.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.