Flutter 文本按钮波纹效果

Question

我目前正在使用 Flutter for Android 制作应用程序，但遇到了一些问题。所以我目前正在使用 TextButton 在我的应用程序中制作按钮，这是代码：

class RevisedButton extends StatelessWidget {
  final String descButton;
  final Function press;
  final Color color, textColor;
  const RevisedButton({
    Key key,
    this.descButton,
    this.press,
    this.color,
    this.textColor,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
      padding: EdgeInsets.all(5),
      width: size.width * 0.88,
      margin: EdgeInsets.fromLTRB(10, 13, 10, 0),
      decoration: BoxDecoration(
        color: color,
        borderRadius: BorderRadius.circular(10),
        boxShadow: [
          BoxShadow(
            color: Colors.black45,
            offset: Offset(4, 4),
            blurRadius: 4.0,
          ),
        ],
      ),
      child: TextButton(
        style: TextButton.styleFrom(
          padding: EdgeInsets.symmetric(vertical: 4),
        ),
        onPressed: press,
        child: Text(
          descButton,
          style: TextStyle(
            color: textColor,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}

一切正常，除了当我按下按钮时，我似乎无法完全正确地获得涟漪效果。

正如您在图片中看到的，当我按下按钮时，效果不会覆盖整个按钮本身（我正在使用容器来制作按钮本身）。我也尝试过使用填充（EdgeInsets.all 和 EdgeInsets.symmetric）添加 ButtonStyle 和 TextStyle，但仍然没有运气。欢迎任何答案，提前谢谢:)

Answer 1

似乎问题与在多个位置设置的color 有关。由于波纹效果应该只覆盖按钮的表面而不是阴影本身，因此您可以使用TextButton.styleFrom() 的backgroundColor 属性并在TextButton 本身内使用Container 来设置大小。这应该有效：

@override
Widget build(BuildContext context) {
  Size size = MediaQuery.of(context).size;
  return Container(
    padding: EdgeInsets.all(5),
    margin: EdgeInsets.fromLTRB(10, 13, 10, 0),
    decoration: BoxDecoration(
      // color: color, <-- Don't need the color here, will cause the above issue
      borderRadius: BorderRadius.circular(10),
      boxShadow: [
        BoxShadow(
          color: Colors.black45,
          offset: Offset(4, 4),
          blurRadius: 4.0,
        ),
      ],
    ),
    child: TextButton(
      style: TextButton.styleFrom(
        backgroundColor: color,
        padding: EdgeInsets.symmetric(vertical: 4),
      ),
      onPressed: press,
      child: Container(
        width: size.width * 0.88, // <-- set the sizing here
        height: 50,
        alignment: Alignment.center,
        child: Text(
          descButton,
          style: TextStyle(
            color: textColor,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    ),
  );
}

结果：