Flutter:作为FAB的自定义widget，Inkwell不尊重圆形，波纹是矩形

Question

为了在按钮上添加发光效果，我使用了“Frankenstein-ed”这段代码:

floatingActionButton: Container(
      decoration: BoxDecoration(boxShadow: [
        new BoxShadow(
          color: Colors.pinkAccent,
          blurRadius: 50.0,
        ),
      ]),
      child: Material(
        shape: CircleBorder(),
        color: Colors.pink,
        child: InkWell(
          onTap: (){print('tap');},
          child: Padding(
              padding: const EdgeInsets.all(20.0), child: Icon(Icons.add)),
        ),
      ), //Icon(Icons.add),
    ),

Material 中的形状是圆形，但 Inkwell 处理的波纹效果超出了圆形。

我尝试用 Container 包装 Inkwell:

Container(
          decoration: BoxDecoration(shape: BoxShape.circle),
          child: InkWell(
            onTap: (){print('tap');},
            child: Padding(
                padding: const EdgeInsets.all(20.0), child: Icon(Icons.add)),
          ),
        ),

并用Container包装Padding:

floatingActionButton: Container(
      decoration: BoxDecoration(boxShadow: [
        new BoxShadow(
          color: Colors.pinkAccent,
          blurRadius: 50.0,
        ),
      ]),
      child: Material(
        shape: CircleBorder(),
        color: Colors.pink,
        child: InkWell(
          onTap: (){print('tap');},
          child: Container(
            decoration: BoxDecoration(shape: BoxShape.circle),
            child: Padding(
                padding: const EdgeInsets.all(20.0), child: Icon(Icons.add)),
          ),
        ),
      ), //Icon(Icons.add),
    ), 

但没有运气。

根据 Gaspard Merten 的回答进行编辑:

尝试此代码不会改变涟漪效应的行为:

Material(
  shape: CircleBorder(),
  color: Colors.pink,
  child: Container(
    decoration: BoxDecoration(boxShadow: [
      new BoxShadow(
        color: Colors.pinkAccent,
        blurRadius: 50.0,
      ),
    ]),
    child: InkWell(
      onTap: () {
        onClick();
      },
      child: Container(
        decoration: BoxDecoration(shape: BoxShape.circle),
        child: Padding(
            padding: const EdgeInsets.all(20.0), child: Icon(icon)),
      ),
    ), //Icon(Icons.add),
  ),
);

Answer 1

您可以使用 ClipRRect 并剪辑 Material 小部件而不是容器:

ClipRRect(
  borderRadius: BorderRadius.all(Radius.circular(7.0)),
  child: YourMaterialButton
)