dart - Flutter InkResponse splash migrates to the center when containedInkWell is set true - Stack Overflow

Here is a simple flutter code:

  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          width: 600,
          height: 400,
          child: Material(
            color: Colors.amber,
            child: InkResponse(
              containedInkWell: true,
              splashColor: Colors.blue.shade500,
              radius: 40,
              onTap: () {},
            ),
          ),
        ),
      ),
    );

The output is

As per the containedInkWell docs

This flag also controls whether the splash migrates to the center of the InkResponse or not. If containedInkWell is true, the splash remains centered around the tap location. If it is false, the splash migrates to the center of the InkResponse as it grows.

So, the blue splash must grow and not migrate to the center as the the above code. However, the splash always migrates to the center whether containedInkWell is set true or false

Here is a simple flutter code:

  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          width: 600,
          height: 400,
          child: Material(
            color: Colors.amber,
            child: InkResponse(
              containedInkWell: true,
              splashColor: Colors.blue.shade500,
              radius: 40,
              onTap: () {},
            ),
          ),
        ),
      ),
    );

The output is

As per the containedInkWell docs

This flag also controls whether the splash migrates to the center of the InkResponse or not. If containedInkWell is true, the splash remains centered around the tap location. If it is false, the splash migrates to the center of the InkResponse as it grows.

So, the blue splash must grow and not migrate to the center as the the above code. However, the splash always migrates to the center whether containedInkWell is set true or false

• flutter
• dart
• flutter-animation

Share Improve this question Follow asked Nov 16, 2024 at 4:54 AnonymousAnonymous 36722 silver badges1313 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I explored this widget's functionality and experimented with its properties. I believe I have found a solution that aligns with what you're looking for. I hope this meets your requirements

 class NoRadiusInkSplashFactory 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 InkSplash(
  controller: controller,
  referenceBox: referenceBox,
  position: position,
  color: color,
  containedInkWell: true, // chnage this to false
  rectCallback: rectCallback,
  borderRadius: borderRadius,
  customBorder: customBorder,
  radius: 40,
  onRemoved: onRemoved,
  textDirection: textDirection,
);
  }
}

class SplashScreen extends StatelessWidget {
  const SplashScreen({super.key});

  @override
   Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
        width: 600,
      height: 400,
      child: Material(
        color: Colors.amber,
        child: InkWell(
          splashFactory: NoRadiusInkSplashFactory(),
          splashColor: Colors.blue.shade500,
          onTap: () {},
        ),
      ),
    ),
  ),
);
}
}