Flutter封装表单按钮组件出现onSubmit参数空值错误如何修复

核心错误原因 #

• 空安全适配问题：非必填的函数参数onSubmit、onChange没有声明为可空类型，Dart空安全规则下，默认不为null的参数如果没有默认值、也没有标记required就会抛出对应报错
• 函数传递逻辑错误：给组件回调传参时写了function()、onSubmit()，这是直接执行函数，不是把函数本身作为回调传递给组件触发
• 校验函数逻辑错误：邮箱校验的判断逻辑写法错误，不符合空安全处理要求

修改后的完整代码 #

components.dart #

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

Widget defaultButton({
  double width = double.infinity,
  Color background = Colors.blue,
  double radius = 10.0,
  required VoidCallback function,
  required String text,
  bool isUpperCase = true,
}) =>
    Container(
      height: 40.0,
      width: width,
      decoration: BoxDecoration(
        borderRadius: BorderRadiusDirectional.circular(radius),
        color: background,
      ),
      child: MaterialButton(
        onLongPress: () {},
        // 直接传递函数本身，不要加()执行
        onPressed: function,
        child: Text(
          isUpperCase ? text.toUpperCase() : text,
          style: const TextStyle(color: Colors.white),
        ),
      ),
    );

Widget defaultFormFeild({
  required TextEditingController controller,
  required TextInputType type,
  // 非必填参数声明为可空
  Function(String?)? onSubmit,
  Function(String?)? onChange,
  required String? Function(String?) validate,
  required String label,
  required IconData prefix,
}) =>
    TextFormField(
      controller: controller,
      keyboardType: type,
      // 类型匹配直接传递函数即可
      onFieldSubmitted: onSubmit,
      onChanged: onChange,
      validator: validate,
      decoration: InputDecoration(
        labelText: label,
        prefixIcon: Icon(prefix),
        border: const OutlineInputBorder(),
      ),
    );

login_screen.dart 关键修改点 #

仅需要修改邮箱输入框的校验逻辑即可：

defaultFormFeild(
    controller: emailController,
    label: 'Email',
    prefix: Icons.email,
    type: TextInputType.emailAddress,
    validate: (String? value){
      // 空安全下先判空再校验内容
      if(value == null || value.isEmpty){
        return 'Email Cannot Be Empty';
      }
      return null;
    }
),

优化说明 #

• 函数类型明确声明为VoidCallback或者带参数的函数类型，可以在编译期提前发现类型不匹配的问题
• 可空函数调用时使用?.call()可以避免空指针异常
• 表单校验函数保持和Flutter SDK内置的FormFieldValidator类型一致，避免类型不匹配报错

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