-
Notifications
You must be signed in to change notification settings - Fork 29.2k
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)