Skip to content

InkRipple should respect rectCallback more #81652

@nt4f04uNd

Description

@nt4f04uNd

Use case

I want that set custom rectCallback to InkRipple, but if I do, and the size is less than the referenceBox size, ink ripple will receive a border radius, when it's supposed to be 0.

Thet sample code below demonstrates that.

Code sample
import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

const imageHeight = 220.0;

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'App',
      home: Scaffold(
        body: Center(
          child: Stack(
            children: [
              Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Image.network(
                    'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
                    height: imageHeight,
                  ),
                  Text('Click here!'),
                  Text('Click here!'),
                  Text('Click here!'),
                  Text('Click here!'),
                  Text('Click here!'),
                  Text('Click here!'),
                  Text('Click here!'),
                  Text('Click here!'),
                ],
              ),
              Positioned.fill(
                child: Material(
                  color: Colors.transparent,
                  child: InkWell(
                    onTap: () {},
                    highlightColor: Colors.transparent,
                    splashColor: Colors.red,
                    splashFactory: _InkRippleFactory(),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class _InkRippleFactory extends InteractiveInkFeatureFactory {
  @override
  InteractiveInkFeature create({
    required MaterialInkController controller,
    required RenderBox referenceBox,
    required Offset position,
    required Color color,
    required TextDirection textDirection,
    bool containedInkWell = false,
    RectCallback? rectCallback,
    BorderRadius? borderRadius,
    ShapeBorder? customBorder,
    double? radius,
    VoidCallback? onRemoved,
  }) {
    return InkRipple(
      controller: controller,
      referenceBox: referenceBox,
      position: position,
      color: color,
      containedInkWell: containedInkWell,
      rectCallback: () => Offset.zero & Size(imageHeight, imageHeight),
      borderRadius: borderRadius,
      customBorder: customBorder,
      radius: radius,
      onRemoved: onRemoved,
      textDirection: textDirection,
    );
  }
}

The first video demonstrates current results, the second - desired

video.mp4
desired.mp4

Proposal

Make InkRipple to respect the rectCallback more, and recalculate the center with it

@override
void paintFeature(Canvas canvas, Matrix4 transform) {
final int alpha = _fadeInController.isAnimating ? _fadeIn.value : _fadeOut.value;
final Paint paint = Paint()..color = color.withAlpha(alpha);
// Splash moves to the center of the reference box.
final Offset center = Offset.lerp(
_position,
referenceBox.size.center(Offset.zero),
Curves.ease.transform(_radiusController.value),
)!;
paintInkCircle(
canvas: canvas,
transform: transform,
paint: paint,
center: center,
textDirection: _textDirection,
radius: _radius.value,
customBorder: _customBorder,
borderRadius: _borderRadius,
clipCallback: _clipCallback,
);
}
}

Metadata

Metadata

Assignees

Labels

a: qualityA truly polished experiencec: proposalA detailed proposal for a change to Flutterf: material designflutter/packages/flutter/material repository.frameworkflutter/packages/flutter repository. See also f: labels.r: fixedIssue is closed as already fixed in a newer version

Type

No type

Projects

Status

Done (PR merged)

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions