Flutter技术问题：如何增大InkResponse的点击区域且不放大图标

以下是几个实用方案，不用修改图标尺寸就能扩大点击区域：

方案1：给InkResponse添加内边距 #

直接给InkResponse设置padding，点击区域会被内边距撑开，内部SVG图标保持原有尺寸。开启containedInkWell还能让水波纹限制在点击区域内：

Container(
  margin: EdgeInsets.only(right: 55),
  child: InkResponse(
    onTap: () {},
    containedInkWell: true,
    padding: EdgeInsets.all(16.w), // 调整数值控制点击区域大小
    child: SvgPicture.asset(
      "assets/svg/regular/bell.svg",
      alignment: Alignment.centerRight,
      height: 24.w,
      width: 24.w,
    ),
  ),
)

方案2：用SizedBox包裹SVG图标 #

用SizedBox设置更大的宽高作为点击区域，把SVG图标放在里面居中显示，点击区域就是SizedBox的尺寸，图标本身大小不变：

Container(
  margin: EdgeInsets.only(right: 55),
  child: InkResponse(
    onTap: () {},
    child: SizedBox(
      width: 56.w, // 点击区域宽度
      height: 56.w, // 点击区域高度
      child: SvgPicture.asset(
        "assets/svg/regular/bell.svg",
        alignment: Alignment.center,
        height: 24.w,
        width: 24.w,
      ),
    ),
  ),
)

方案3：调整外层Container尺寸并居中内容 #

如果允许调整外层Container的尺寸，直接放大Container，让内部的InkResponse和SVG图标居中，点击区域就会变成Container的大小：

Container(
  margin: EdgeInsets.only(right: 55),
  width: 56.w,
  height: 56.w,
  child: InkResponse(
    onTap: () {},
    child: SvgPicture.asset(
      "assets/svg/regular/bell.svg",
      alignment: Alignment.center,
      height: 24.w,
      width: 24.w,
    ),
  ),
)

注意：想要水波纹效果更贴合点击区域，建议搭配containedInkWell: true使用，避免水波纹溢出到不必要的区域。

内容的提问来源于stack exchange，提问作者lophix