flutter - ElevatedButton、TextButton 和 OutlinedButton 渐变

Question

在使用默认的 ButtonThemeData 制作渐变按钮之前很容易......但现在我无法弄清楚如何使用新的 MaterialButtons 正确制作自定义渐变按钮。
我正在尝试制作一个三个自定义渐变按钮，它必须使用 AppTheme 中定义的 ButtonStyle(splashColor、elevation...)。
升高按钮
GradientElevatedButton 使用带有渐变背景的 ElevatedButtonThemeData
文本按钮
GradientTextButton 使用带有渐变文本的 TextButtonThemeData
轮廓按钮
GradientOutlinedButton 使用带有渐变边框和渐变文本的 OutlinedButtonThemeData
已经试过了
我曾尝试用 ShaderMask 包装 ElevatedButton，但它涵盖了墨迹动画，因此无法实现我的目标。

Answer 1

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'),
)