Flutter 文字按鈕波紋效果

Question

我目前正在使用 Flutter 為 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,
          ),
        ),
      ),
    ),
  );
}

結果：