如何为Flutter的InkResponse组件设置点击时的矩形高亮效果？

原因说明 #

InkResponse的高亮效果需要基于父级Material组件渲染，你当前外层用Container包裹，Container的背景装饰会直接挡住Ink系列的墨水效果，所以就算设置了highlightShape也不会生效。

修复方案 #

把外层的Container替换为Material组件，直接通过Material的属性配置尺寸、圆角、背景色等样式即可，修改后的代码如下：

Material(
  clipBehavior: Clip.antiAliasWithSaveLayer,
  height: 11.h,
  width: 10.h,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.all(Radius.circular(1.w)),
  ),
  color: const Color(accentColor),
  child: InkResponse(
    highlightShape: BoxShape.rectangle,
    highlightColor: const Color(greyColor),
    onTap: () async {},
    child: BlocBuilder<HomeCubit, HomeState>(
      buildWhen: (previousState, currentState) =>
          previousState != currentState,
      builder: (context, state) {
        return Icon(
          state is OpenBottomSheet ? Icons.save : Icons.add,
          color: const Color(whiteColor),
          size: 9.h,
        );
      },
    ),
  ),
)

如果有场景必须保留外层Container，也可以在Container和InkResponse之间插入一层Material(color: Colors.transparent)，同样可以让高亮效果正常渲染。

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