Flutter自定义defaultFormField组件出现3个错误，求解决方案

原始代码 #

Widget defaultFormField ({
  @required TextEditingController? controller,
  @required TextInputType? keyboardType,
  @required IconData? prefix,
  @required String? label,
  VoidCallback? onChange,
  @required VoidCallback? validate,

}) => TextFormField(
    style: const TextStyle(
      color: Colors.amber,
    ),
    cursorHeight: 25.0,
    cursorColor: Colors.amber,
    controller: controller,
    keyboardType: keyboardType,
    decoration: const InputDecoration(
      prefixIcon: Icon(Icons.person_outline),
      labelText: label,
      labelStyle: TextStyle(
        color: Colors.amber,
      ),
      border: OutlineInputBorder(),
      enabledBorder: OutlineInputBorder(
        borderSide: BorderSide(
            color: Colors.amber
        ),
      ),
      focusedBorder: OutlineInputBorder(
        borderSide: BorderSide(
          color: Colors.amber,
        ),
      ),
    ),
    onChanged: onChange,
    validator : validate,
);

遇到的错误 #

• 错误1：Invalid constant value（无效常量值）
• 错误2：参数类型void Function()?无法分配给参数类型void Function(String)?
• 错误3：参数类型void Function()?无法分配给参数类型String? Function(String?)?

错误修复方案 #

1. 解决「无效常量值」问题

InputDecoration被标记为const，但内部使用了变量label，同时prefixIcon写死成固定图标，没有使用传入的prefix参数。const修饰的对象不能包含变量，且需要动态使用传入的图标，所以：

• 移除InputDecoration前的const关键字
• 将prefixIcon: Icon(Icons.person_outline)改为prefixIcon: Icon(prefix)

2. 解决「回调参数类型不匹配」问题

TextFormField的onChanged要求接收带字符串参数的回调，validator要求接收带输入内容参数并返回错误信息的回调，所以需要修正自定义函数的参数类型：

• 将VoidCallback? onChange改为void Function(String)? onChange
• 将@required VoidCallback? validate改为required String? Function(String?)? validate（注：新版本Flutter建议用required替代@required）

修正后的完整代码 #

Widget defaultFormField ({
  required TextEditingController? controller,
  required TextInputType? keyboardType,
  required IconData? prefix,
  required String? label,
  void Function(String)? onChange,
  required String? Function(String?)? validate,
}) => TextFormField(
    style: const TextStyle(
      color: Colors.amber,
    ),
    cursorHeight: 25.0,
    cursorColor: Colors.amber,
    controller: controller,
    keyboardType: keyboardType,
    decoration: InputDecoration(
      prefixIcon: Icon(prefix),
      labelText: label,
      labelStyle: const TextStyle(
        color: Colors.amber,
      ),
      border: const OutlineInputBorder(),
      enabledBorder: const OutlineInputBorder(
        borderSide: BorderSide(
            color: Colors.amber
        ),
      ),
      focusedBorder: const OutlineInputBorder(
        borderSide: BorderSide(
          color: Colors.amber,
        ),
      ),
    ),
    onChanged: onChange,
    validator : validate,
);

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