Flutter自定义ButtonStyle的ThemeExtension类报错及修复咨询

错误1：参数类型'ButtonStyle?'无法分配给参数类型'ButtonStyle' #

原因 #

ButtonStyle.lerp()方法返回值为ButtonStyle?（可空类型），但你的DecisionButtonStyle构造函数要求style为非空的ButtonStyle类型，导致类型不匹配。

解决方法 #

由于构造函数中style是required参数，实例中的style和other.style必然非空，因此可以安全用!强制解包：

style: ButtonStyle.lerp(style, other.style, t)!

错误2：参数'style'类型不允许为null，但隐式默认值为null #

原因 #

copyWith的style参数被定义为非空ButtonStyle类型，但作为可选参数未设置默认值，Dart会隐式将默认值设为null，与非空类型要求冲突。

解决方法 #

将参数类型改为ButtonStyle?（可空类型），并显式设置默认值为null：

@override
DecisionButtonStyle copyWith({ButtonStyle? style}) => DecisionButtonStyle(
      style: style ?? this.style,
    );

修正后的完整代码 #

class DecisionButtonStyle extends ThemeExtension<DecisionButtonStyle> {
  const DecisionButtonStyle({
    required this.style,
    //this.foregroundColor,
    //this.backgroundColor,
  });

  final ButtonStyle style;
  //final Color? backgroundColor;
  //final Color? foregroundColor;

  @override
  DecisionButtonStyle lerp(
      ThemeExtension<DecisionButtonStyle> other, double t) {
    if (other is! DecisionButtonStyle) {
      return this;
    }

    return DecisionButtonStyle(
      style: ButtonStyle.lerp(style, other.style, t)!,
      //foregroundColor: Color.lerp(foregroundColor, other.foregroundColor, t),
      //backgroundColor: Color.lerp(backgroundColor, other.backgroundColor, t),
    );
  }

  @override
  DecisionButtonStyle copyWith({ButtonStyle? style}) => DecisionButtonStyle(
        style: style ?? this.style,
        //backgroundColor: backgroundColor ?? this.backgroundColor,
        //foregroundColor: foregroundColor ?? this.foregroundColor,
      );
}

关于实现思路 #

你的思路是正确的：通过ThemeExtension封装自定义ButtonStyle是Flutter实现主题化按钮样式的标准方案之一。这种方式可以在ThemeData中注册自定义样式，支持不同主题模式（亮/暗）的差异化配置，使用时通过Theme.of(context).extension<DecisionButtonStyle>()?.style获取样式，还可结合默认样式兜底：

ElevatedButton(
  style: Theme.of(context).extension<DecisionButtonStyle>()?.style ?? ElevatedButton.styleFrom(),
  onPressed: () {},
  child: const Text("Button"),
)

内容的提问来源于stack exchange，提问作者raimtoon