Flutter: control ripple effect size on IconButton-CodePudding

I have an IconButton, when pressed the ripple effect is circular and larger than the button's area, how can I reduce the size of the ripple effect when the button is tapped ?

 IconButton(
                  constraints: const BoxConstraints(minWidth: 30),
                  icon: SvgPicture.asset(
                    'asset_path',
                    color: Colors.white,
                  ),
                  onPressed: () {
                    // do something
                  },
                )

CodePudding user response：

  splashRadius: 120,

 IconButton(
                        iconSize: 80,
                        splashRadius: 120,
                        splashColor: Colors.green,
                        tooltip: 'Répète le mot',
                        icon: Icon(
                          Icons.mic,
                          color: Colors.red[900],
                        ),

Use splashRadius to control

CodePudding user response：

I often use this wrapper widget for the IconButton, because usually you want to set the splashRadius to 1/2 * size:

class CircularIconButton extends StatelessWidget {
  /// The function that will be executed once the button has been pressed.
  final void Function()? onPressed;

  /// The icon that will be displayed in the middle of the button.
  final IconData iconData;

  /// The size of the entire button.
  final double size;

  /// The relative size of the icon compared to entire button's [size].
  ///
  /// By setting the [iconSizeRatio], you can define the size of the icon itself.
  /// The icon's size will be equal to `size / iconSizeRatio`.
  ///
  /// Allowed values range from 1.0 to 4.0.
  final double iconSizeRatio;

  /// The color of your icon.
  ///
  /// It is also used for the splash color (i.e. the background color of the icon button once it has been pressed) with an opacity of 0.5.
  ///
  /// The default is [Colors.black].
  final Color? iconColor;

  /// The background color of the circle that is enclosing your icon.
  final Color fillColor;

  /// The color that is used for the circle's border.
  final Color outlineColor;

  const CircularIconButton({
    Key? key,
    required this.iconData,
    this.onPressed,
    this.size = 36.0,
    this.iconSizeRatio = 1.5,
    this.fillColor = Colors.transparent,
    this.outlineColor = Colors.transparent,
    this.iconColor,
  })  : assert(
          iconSizeRatio >= 1.0 && iconSizeRatio <= 4.0,
          'The iconSizeRatio must be between 1.0 and 4.0.',
        ),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    final appliedIconColor = iconColor ?? IconTheme.of(context).color;
    return Ink(
      width: size,
      height: size,
      decoration: ShapeDecoration(
        color: fillColor,
        shape: CircleBorder(
          side: BorderSide(
            color: outlineColor,
          ),
        ),
      ),
      child: IconButton(
        // Adjust the splashRadius based on the icons size.
        // It defaults to 35.0.
        splashRadius: size / 2,
        iconSize: size / iconSizeRatio,
        padding: EdgeInsets.zero,
        onPressed: onPressed,
        icon: Icon(
          iconData,
          color: appliedIconColor,
        ),
        splashColor: appliedIconColor?.withOpacity(0.5),
      ),
    );
  }
}

CodePudding user response：

try this:

class CustomIconButton extends StatelessWidget {
  const CustomIconButton({ Key? key, required this.width, required this.child,  this.onPressed }) : super(key: key);
  final  double width; 
  final Widget child;
  final void Function()? onPressed; 
  @override
  Widget build(BuildContext context) {
    return InkWell(
        borderRadius: BorderRadius.all(Radius.circular(50)),
        child: SizedBox(
          height: 100,
          width: 100,
          child: child,
        ),
        onTap: onPressed
      );
  }
}