-
Notifications
You must be signed in to change notification settings - Fork 29.7k
Closed
Labels
a: qualityA truly polished experienceA truly polished experiencec: proposalA detailed proposal for a change to FlutterA detailed proposal for a change to Flutterf: material designflutter/packages/flutter/material repository.flutter/packages/flutter/material repository.frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.r: fixedIssue is closed as already fixed in a newer versionIssue is closed as already fixed in a newer version
Description
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
flutter/packages/flutter/lib/src/material/ink_ripple.dart
Lines 228 to 250 in 96e4b47
| @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 experienceA truly polished experiencec: proposalA detailed proposal for a change to FlutterA detailed proposal for a change to Flutterf: material designflutter/packages/flutter/material repository.flutter/packages/flutter/material repository.frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.r: fixedIssue is closed as already fixed in a newer versionIssue is closed as already fixed in a newer version
Type
Projects
Status
Done (PR merged)