如何在flutter_login: ^5.0.0登录表单中添加额外文本字段

注册页面添加额外字段 #

flutter_login自带additionalSignupFields参数，可直接添加注册所需的额外字段（比如用户名、手机号），无需自定义整个表单。修改你的代码如下：

FlutterLogin(
  logo: const AssetImage('assets/xxxxxx.png'),
  onLogin: _authUser,
  theme: LoginTheme(
    primaryColor: const Color(0xFFe69597)
  ),
  onSignup: (signupData) {
    // 从additionalSignupData中获取额外字段值，比如用户名、手机号
    String username = signupData.additionalSignupData['username'] ?? '';
    String phone = signupData.additionalSignupData['phone'] ?? '';
    return _signupUser(signupData, username, phone); // 传给你的注册逻辑
  },
  // 配置注册额外字段
  additionalSignupFields: [
    UserFormField(
      keyName: 'username',
      displayName: '用户名',
      icon: const Icon(Icons.person),
      fieldValidator: (value) {
        if (value == null || value.length < 3) {
          return '用户名至少3个字符';
        }
        return null;
      },
    ),
    UserFormField(
      keyName: 'phone',
      displayName: '手机号',
      icon: const Icon(Icons.phone),
      keyboardType: TextInputType.phone,
      fieldValidator: (value) {
        if (value == null || !RegExp(r'^1[3-9]\d{9}$').hasMatch(value)) {
          return '请输入有效的手机号';
        }
        return null;
      },
    ),
  ],
  onSubmitAnimationCompleted: () {
    Navigator.of(context).pushReplacement(MaterialPageRoute(
      builder: (context) => Home(),
    ));
  },
  onRecoverPassword: _recoverPassword,
);

在onSignup回调里，通过signupData.additionalSignupData[keyName]就能拿到对应字段的输入值，直接传入你的注册业务逻辑即可。

登录页面添加额外字段 #

如果需要在登录页面加额外字段（比如验证码、企业ID），需要用loginFormBuilder自定义整个登录表单：

FlutterLogin(
  logo: const AssetImage('assets/xxxxxx.png'),
  // 自定义登录表单结构
  loginFormBuilder: (loginData, errorMessages, updateError, updateLoading) {
    // 用控制器保存额外字段的值
    final captchaController = TextEditingController();
    
    return Column(
      children: [
        // 保留默认邮箱字段
        TextFormField(
          controller: loginData.email,
          decoration: InputDecoration(
            labelText: '邮箱',
            icon: const Icon(Icons.email),
            errorText: errorMessages.email,
          ),
          keyboardType: TextInputType.emailAddress,
          onChanged: (_) => updateError('email', null),
        ),
        // 保留默认密码字段
        TextFormField(
          controller: loginData.password,
          decoration: InputDecoration(
            labelText: '密码',
            icon: const Icon(Icons.lock),
            errorText: errorMessages.password,
          ),
          obscureText: true,
          onChanged: (_) => updateError('password', null),
        ),
        // 添加额外字段：验证码
        TextFormField(
          controller: captchaController,
          decoration: const InputDecoration(
            labelText: '验证码',
            icon: Icon(Icons.security),
          ),
          keyboardType: TextInputType.number,
        ),
        // 登录按钮
        ElevatedButton(
          onPressed: () {
            updateLoading(true);
            // 触发登录逻辑，把验证码传进去
            _authUser(loginData, captchaController.text).then((result) {
              updateLoading(false);
              if (result != null) {
                updateError('password', result);
              }
            });
          },
          child: const Text('登录'),
        ),
      ],
    );
  },
  theme: LoginTheme(
    primaryColor: const Color(0xFFe69597)
  ),
  onSignup: _signupUser,
  onSubmitAnimationCompleted: () {
    Navigator.of(context).pushReplacement(MaterialPageRoute(
      builder: (context) => Home(),
    ));
  },
  onRecoverPassword: _recoverPassword,
);

自定义表单时，你可以完全控制字段的布局、验证逻辑，登录按钮的点击事件里直接把额外字段的值传给你的登录逻辑即可。

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