如上图，这是一个比较常见的需求：
- 按钮背景色渐变；
- 点击按钮会产生波浪特效。
代码：
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,
),
),
),
),
),
);
}
}
