ElevatedButton、TextButton 和 OutlinedButton 渐变

Question

在使用默认的 ButtonThemeData 轻松制作渐变按钮之前……但现在我无法弄清楚如何使用新的 MaterialButtons 正确制作自定义渐变按钮。

我正在尝试制作一个三个自定义渐变按钮，它必须使用 AppTheme 中定义的 ButtonStyle（splashColor、elevation...）。

升高按钮

GradientElevatedButton 使用带有渐变背景的 ElevatedButtonThemeData

文本按钮

GradientTextButton 使用带有渐变文本的 TextButtonThemeData

轮廓按钮

GradientOutlinedButton 使用带有渐变边框和渐变文本的 OutlinedButtonThemeData

已经试过了

我曾尝试用 ShaderMask 包装 ElevatedButton，但它涵盖了墨迹动画，因此无法实现我的目标。

Answer 1

我不知道这是否有帮助，但我只是自己这样做。仍然不明白为什么他们必须让事情变得更加复杂。

import 'package:flutter/material.dart';
import 'package:my_app/src/utils/style_helper.dart';
import 'package:my_app/src/utils/themes.dart';

class SecondaryButtonState extends State<SecondaryButton> {

  setPressed(bool value) {
    setState(() {
      widget.pressed = value;
    });
  }

  getDecoration() {
    if (widget.disabled) {
      return BoxDecoration(
        borderRadius: BorderRadius.circular(SH.BORDER_RADIUS),
        color: ThemeColors.secondaryLight,
      );
    }
    if (!widget.pressed) {
      return BoxDecoration(
        borderRadius: BorderRadius.circular(16),
        gradient: LinearGradient(
            begin: FractionalOffset.topCenter,
            end: FractionalOffset.bottomCenter,
            colors: [ThemeColors.gradient, ThemeColors.secondary]),
      );
    } else {
      return BoxDecoration(
          borderRadius: BorderRadius.circular(SH.BORDER_RADIUS),
          color: ThemeColors.secondary);
    }
  }

  void onTapDown(TapDownDetails details) {
    if (!widget.disabled) {
      setPressed(true);
    }
  }

  void onTapUp(TapUpDetails details) {
    if (!widget.disabled) {
      setPressed(false);
      widget.onPressed();
    }
  }

  TextStyle getTextStyle(context, Set<MaterialState> states) {
    return Theme.of(context)
        .textButtonTheme
        .style
        .textStyle
        .resolve(states)
        .copyWith();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: onTapDown,
      onTapUp: onTapUp,
      child: Container(
          width: 400,
          decoration: getDecoration(),
          padding: EdgeInsets.symmetric(vertical: SH.PC, horizontal: SH.P3),
          child: Row(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                widget.icon != null ? widget.icon : Container(),
                Text(
                  widget.label,
                  style: Theme.of(context)
                      .elevatedButtonTheme
                      .style
                      .textStyle
                      .resolve(null)
                      .copyWith(),
                ),
              ])),
    );
  }
}

class SecondaryButton extends StatefulWidget {
  SecondaryButton(
      {@required this.onPressed,
      @required this.label,
      this.icon,
      this.disabled = false});

  final GestureTapCallback onPressed;
  final String label;
  bool disabled;
  final Icon icon;
  bool pressed = false;

  @override
  State<StatefulWidget> createState() {
    return SecondaryButtonState();
  }
}