如何更改Flutter InkWell的highlightShape属性?

时间:2019-09-12 07:12:41

标签: flutter dart

我有以下Flutter小部件:

return SizedBox(
  height: 40.0,
  width: 40.0,
  child: InkWell(
    splashColor: Colors.grey,
    onTap: callback,
    child: Center(child: image),
  ),
);

问题在于此按钮上的突出显示为矩形。我想将其更改为圆形,但是highlightShape属性不可修改。如何为该按钮提供圆形高亮显示?

3 个答案:

答案 0 :(得分:1)

在@pskink的评论之后,我使用了customBorder

return SizedBox(
  height: 40.0,
  width: 40.0,
  child: InkWell(
    splashColor: Colors.grey,
    onTap: callback,
    child: Center(child: image),
    customBorder: CircleBorder(),
  ),
);

答案 1 :(得分:0)

    return ClipOval(
      child: Material(
        color: Colors.blue, // button color
        child: InkWell(
        splashColor: Colors.red, // inkwell color
        child: SizedBox(width: 56, height: 56, child: Icon(Icons.settings)),
        onTap: () {},
        ),
      ),
    );

enter image description here

答案 2 :(得分:0)

您可以使用ClipOval实现这一目标

ClipOval(
      child: Material(
        child: SizedBox(
          height: 40.0,
          width: 40.0,
          child: InkWell(
            splashColor: Colors.grey,
            onTap: () {},
            child: Center(child: Icon(Icons.directions_car)),
          ),
        ),
      ),
    )