Changing speed of InkWell


Asked by Cole W on June 30, 2018 (source).

I am having trouble replicating a normal settings menu in Flutter. I am using an InkWell to try to create the splash effect that normally occurs when you tap on a settings option. The problem is that the splash effect appears way too fast compared to how it normally is. Basically, I just want to slow down the InkWell.

GIF of what I'm getting in Flutter

GIF of what I want to get


Question answered by salihgueler (source).

It's possible to create what you wanted but it requires a custom splashFactory under InkWell class.

As you see in the variables below, these are meant to be private values and they are not open to modification within classes.

const Duration _kUnconfirmedSplashDuration = const Duration(seconds: 1);
const Duration _kSplashFadeDuration = const Duration(milliseconds: 200);

const double _kSplashInitialSize = 0.0; // logical pixels
const double _kSplashConfirmedVelocity = 1.0; 

To answer your question, yes you can do it. I just copied and pasted everything from the source code and change the animation values. After the code below just use it in splashFactory.

///Part to use within application
new InkWell(
     onTap: () {},
     splashFactory: CustomSplashFactory(),
     child: Container(
     padding: EdgeInsets.all(12.0),
     child: Text('Flat Button'),

//Part to copy from the source code.
const Duration _kUnconfirmedSplashDuration = const Duration(seconds: 10);
const Duration _kSplashFadeDuration = const Duration(seconds: 2);

const double _kSplashInitialSize = 0.0; // logical pixels
const double _kSplashConfirmedVelocity = 0.1;
class CustomSplashFactory extends InteractiveInkFeatureFactory {
  const CustomSplashFactory();

  InteractiveInkFeature create({
    @required MaterialInkController controller,
    @required RenderBox referenceBox,
    @required Offset position,
    @required Color color,
    bool containedInkWell = false,
    RectCallback rectCallback,
    BorderRadius borderRadius,
    double radius,
    VoidCallback onRemoved,
  }) {
    return new CustomSplash(
      controller: controller,
      referenceBox: referenceBox,
      position: position,
      color: color,
      containedInkWell: containedInkWell,
      rectCallback: rectCallback,
      borderRadius: borderRadius,
      radius: radius,
      onRemoved: onRemoved,

class CustomSplash extends InteractiveInkFeature {
  /// Used to specify this type of ink splash for an [InkWell], [InkResponse]
  /// or material [Theme].
  static const InteractiveInkFeatureFactory splashFactory = const CustomSplashFactory();

  /// Begin a splash, centered at position relative to [referenceBox].
  /// The [controller] argument is typically obtained via
  /// `Material.of(context)`.
  /// If `containedInkWell` is true, then the splash will be sized to fit
  /// the well rectangle, then clipped to it when drawn. The well
  /// rectangle is the box returned by `rectCallback`, if provided, or
  /// otherwise is the bounds of the [referenceBox].
  /// If `containedInkWell` is false, then `rectCallback` should be null.
  /// The ink splash is clipped only to the edges of the [Material].
  /// This is the default.
  /// When the splash is removed, `onRemoved` will be called.
    @required MaterialInkController controller,
    @required RenderBox referenceBox,
    Offset position,
    Color color,
    bool containedInkWell = false,
    RectCallback rectCallback,
    BorderRadius borderRadius,
    double radius,
    VoidCallback onRemoved,
  }) : _position = position,
        _borderRadius = borderRadius ??,
        _targetRadius = radius ?? _getTargetRadius(referenceBox, containedInkWell, rectCallback, position),
        _clipCallback = _getClipCallback(referenceBox, containedInkWell, rectCallback),
        _repositionToReferenceBox = !containedInkWell,
        super(controller: controller, referenceBox: referenceBox, color: color, onRemoved: onRemoved) {
    assert(_borderRadius != null);
    _radiusController = new AnimationController(duration: _kUnconfirmedSplashDuration, vsync: controller.vsync)
    _radius = new Tween<double>(
        begin: _kSplashInitialSize,
        end: _targetRadius
    _alphaController = new AnimationController(duration: _kSplashFadeDuration, vsync: controller.vsync)
    _alpha = new IntTween(
        begin: color.alpha,
        end: 0


  final Offset _position;
  final BorderRadius _borderRadius;
  final double _targetRadius;
  final RectCallback _clipCallback;
  final bool _repositionToReferenceBox;

  Animation<double> _radius;
  AnimationController _radiusController;

  Animation<int> _alpha;
  AnimationController _alphaController;

  void confirm() {
    final int duration = (_targetRadius / _kSplashConfirmedVelocity).floor();
      ..duration = new Duration(milliseconds: duration)

  void cancel() {

  void _handleAlphaStatusChanged(AnimationStatus status) {
    if (status == AnimationStatus.completed)

  void dispose() {
    _alphaController = null;

  RRect _clipRRectFromRect(Rect rect) {
    return new RRect.fromRectAndCorners(
      topLeft: _borderRadius.topLeft, topRight: _borderRadius.topRight,
      bottomLeft: _borderRadius.bottomLeft, bottomRight: _borderRadius.bottomRight,

  void _clipCanvasWithRect(Canvas canvas, Rect rect, {Offset offset}) {
    Rect clipRect = rect;
    if (offset != null) {
      clipRect = clipRect.shift(offset);
    if (_borderRadius != {
    } else {

  void paintFeature(Canvas canvas, Matrix4 transform) {
    final Paint paint = new Paint()..color = color.withAlpha(_alpha.value);
    Offset center = _position;
    if (_repositionToReferenceBox)
      center = Offset.lerp(center,, _radiusController.value);
    final Offset originOffset = MatrixUtils.getAsTranslation(transform);
    if (originOffset == null) {;
      if (_clipCallback != null) {
        _clipCanvasWithRect(canvas, _clipCallback());
      canvas.drawCircle(center, _radius.value, paint);
    } else {
      if (_clipCallback != null) {;
        _clipCanvasWithRect(canvas, _clipCallback(), offset: originOffset);
      canvas.drawCircle(center + originOffset, _radius.value, paint);
      if (_clipCallback != null)

double _getTargetRadius(RenderBox referenceBox, bool containedInkWell, RectCallback rectCallback, Offset position) {
  if (containedInkWell) {
    final Size size = rectCallback != null ? rectCallback().size : referenceBox.size;
    return _getSplashRadiusForPositionInSize(size, position);
  return Material.defaultSplashRadius;

double _getSplashRadiusForPositionInSize(Size bounds, Offset position) {
  final double d1 = (position - bounds.topLeft(;
  final double d2 = (position - bounds.topRight(;
  final double d3 = (position - bounds.bottomLeft(;
  final double d4 = (position - bounds.bottomRight(;
  return math.max(math.max(d1, d2), math.max(d3, d4)).ceilToDouble();

RectCallback _getClipCallback(RenderBox referenceBox, bool containedInkWell, RectCallback rectCallback) {
  if (rectCallback != null) {
    return rectCallback;
  if (containedInkWell)
    return () => & referenceBox.size;
  return null;