在使用默认的 ButtonThemeData 制作渐变按钮之前很容易......但现在我无法弄清楚如何使用新的 MaterialButtons 正确制作自定义渐变按钮。
我正在尝试制作一个三个自定义渐变按钮,它必须使用 AppTheme 中定义的 ButtonStyle(splashColor、elevation...)。
升高按钮
GradientElevatedButton 使用带有渐变背景的 ElevatedButtonThemeData
文本按钮
GradientTextButton 使用带有渐变文本的 TextButtonThemeData
轮廓按钮
GradientOutlinedButton 使用带有渐变边框和渐变文本的 OutlinedButtonThemeData
已经试过了
我曾尝试用 ShaderMask 包装 ElevatedButton,但它涵盖了墨迹动画,因此无法实现我的目标。
最佳答案
ElevatedButton
DecoratedBox(
decoration: BoxDecoration(gradient: LinearGradient(colors: [Colors.red, Colors.blue])),
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(primary: Colors.transparent),
child: Text('Elevated Button'),
),
)
OutlinedButton
对于
OutlinedButton
,您需要执行一些额外的步骤。创建一个类(空安全):class MyOutlinedButton extends StatelessWidget {
final VoidCallback onPressed;
final Widget child;
final ButtonStyle? style;
final Gradient? gradient;
final double thickness;
const MyOutlinedButton({
Key? key,
required this.onPressed,
required this.child,
this.style,
this.gradient,
this.thickness = 2,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return DecoratedBox(
decoration: BoxDecoration(gradient: gradient),
child: Container(
color: Colors.white,
margin: EdgeInsets.all(thickness),
child: OutlinedButton(
onPressed: onPressed,
style: style,
child: child,
),
),
);
}
}
用法:MyOutlinedButton(
onPressed: () {},
gradient: LinearGradient(colors: [Colors.indigo, Colors.pink]),
child: Text('OutlinedButton'),
)
关于flutter - ElevatedButton、TextButton 和 OutlinedButton 渐变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66355441/