如上图，这是一个比较常见的需求：

1. 按钮背景色渐变；
2. 点击按钮会产生波浪特效。

代码：

class GradientTextButton extends StatelessWidget {
  const GradientTextButton({
    Key? key,
    required this.gradient,
    required this.onTap,
    required this.textString,
    this.textStyle,
    this.width,
    this.height,
    this.radius,
  }) : super(key: key);

  // 标题
  final String textString;
  // 标题样式
  final TextStyle? textStyle;
  // 渐变
  final LinearGradient gradient;
  // 点击回调
  final VoidCallback onTap;
  // 宽
  final double? width;
  // 高
  final double? height;
  // 圆角
  final double? radius;

  @override
  Widget build(BuildContext context) {
    return Material(
      clipBehavior: Clip.hardEdge,
      borderRadius: radius == null ? null : BorderRadius.circular(radius!),
      child: Ink(
        width: width,
        height: height,
        decoration: BoxDecoration(
          gradient: gradient,
        ),
        child: InkWell(
          onTap: onTap,
          child: Center(
            child: Text(
              textString,
              style: textStyle ??
                  const TextStyle(
                    fontWeight: FontWeight.w500,
                    fontSize: 16,
                    color: Colors.white,
                  ),
            ),
          ),
        ),
      ),
    );
  }
}