Flutter中的无边框选择高亮效果

Question

背景：我正在使用 Flutter 重写我的 Android 应用程序。View在 Android 上，当将 clickable的background属性设置为 时，会出现这种有趣的触摸反馈效果?android:selectableItemBackgroundBorderless：

请注意，红色边框不在真正的 UI 中，它只是为了显示 的View边框。正如您所看到的，墨水形成了一个围绕矩形视图的圆圈。

我希望 Flutter 应用程序中的墨迹也围绕视图进行限制，即选择区域需要是圆形的并包围视图。我试图通过使用InkResponse组件来实现这一点，但结果看起来很悲惨：

Scaffold示例中使用的主体：

body: Center(
  // Center is a layout widget. It takes a single child and positions it
  // in the middle of the parent.
  child: Material(
    color: Color(0xff008080),
    child: Center(
      child: InkResponse(
        onTap: () {
          /* ... */
        },
        child: Container(
          child: Center(
            child: Text('BUTTON'),
          ),
          decoration: BoxDecoration(
            border: Border.all(color: Colors.red),
          ),
          width: 200.0,
          height: 200.0,
        ),
        highlightColor: Colors.transparent,
      ),
    ),
  ),
),

如果我使radius属性足够大InkResponse，它可以超出视图的边界，如果我的视图具有静态大小，我可以调整属性以达到所需的效果，但在我的真实应用程序中它是动态的。

是否可以在不制作自定义组件的情况下做到这一点？

Answer 1

你试过这个吗，它的点击被绑定到红色区域。

Center(
          // Center is a layout widget. It takes a single child and positions it
          // in the middle of the parent.
          child: Material(
            color: Color(0xff008080),
            child: Center(
              child: InkWell(
                onTap: () {
                  /* ... */
                },
                child: Container(
                  child: Center(
                    child: Text('BUTTON'),
                  ),
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.red),
                  ),
                ),
                highlightColor: Colors.transparent,
              ),
            ),
          ),
        ),