如上圖参歹，這是一個(gè)比較常見的需求：
- 按鈕背景色漸變仰楚；
- 點(diǎn)擊按鈕會(huì)產(chǎn)生波浪特效。
代碼：
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);
// 標(biāo)題
final String textString;
// 標(biāo)題樣式
final TextStyle? textStyle;
// 漸變
final LinearGradient gradient;
// 點(diǎn)擊回調(diào)
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,
),
),
),
),
),
);
}
}
