flutter - Flutter：一个自定义的widget，充当FAB，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 处理的涟漪效果超出了圆形。

我试过Inkwell用 a包装Container：

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

Padding并由 a包装Container：

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),
    ), 

但没有运气。

在加斯帕德默滕的回答后编辑：

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

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),
  ),
);

标签： flutter

Answer 1

发生这种情况是因为材质小部件是墨水瓶的直接祖先。尝试将 Material 小部件放在容器之前，并指定 de coloris 和材质的边框半径，并从容器中删除颜色参数。