如何扩展Flutter TextButton并解决invalid constant value报错

错误原因 #

你为KMTextButton声明了const构造函数，但向父类TextButton传递的onPressed参数是动态创建的匿名函数，Dart中匿名函数不属于编译时常量，无法在const构造的初始化列表中使用，因此触发常量值非法的报错。

解决方案 #

方案1：移除构造函数的const修饰 #

如果你的KMTextButton不需要作为常量组件使用，直接删除构造函数前的const关键字即可，修改后代码如下：

class KMTextButton extends TextButton {
  // 移除const修饰
  KMTextButton({
    Key? key,
    required VoidCallback? onPressed,
    VoidCallback? onLongPress,
    ButtonStyle? style,
    FocusNode? focusNode,
    bool autofocus = false,
    Clip clipBehavior = Clip.none,
    required Widget child,
  }) : super(
    key: key,
    onPressed: (){
      print('onPressedFuncInvoked');
      if (onPressed != null) {
        onPressed();
      }
    },
    onLongPress: onLongPress,
    style: style,
    focusNode: focusNode,
    autofocus: autofocus,
    clipBehavior: clipBehavior,
    child: child,
  );
}

方案2：改用组合方式封装组件（更推荐） #

Flutter官方优先推荐使用组合而非继承的方式自定义组件，这种方式可以保留const构造的能力，后续扩展逻辑也更灵活，代码实现如下：

class KMTextButton extends StatelessWidget {
  final VoidCallback? onPressed;
  final VoidCallback? onLongPress;
  final ButtonStyle? style;
  final FocusNode? focusNode;
  final bool autofocus;
  final Clip clipBehavior;
  final Widget child;

  const KMTextButton({
    Key? key,
    required this.onPressed,
    this.onLongPress,
    this.style,
    this.focusNode,
    this.autofocus = false,
    this.clipBehavior = Clip.none,
    required this.child,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextButton(
      onPressed: () {
        print('onPressedFuncInvoked');
        onPressed?.call();
      },
      onLongPress: onLongPress,
      style: style,
      focusNode: focusNode,
      autofocus: autofocus,
      clipBehavior: clipBehavior,
      child: child,
    );
  }
}

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