Flutter如何获取TextFormField输入值传递给Firestore的updateUserData方法

实现步骤 #

你只需要按以下顺序修改3处代码即可完成参数传递：

1. 修改auth.dart的注册方法，新增name入参

给registerWithEmailAndPassword方法增加String name参数，调用updateUserData时将参数传入：

class AuthService{
  final FirebaseAuth _auth = FirebaseAuth.instance;
  // 新增name参数
  Future registerWithEmailAndPassword(String email, String password, String name) async {
    try{
      UserCredential result = await _auth.createUserWithEmailAndPassword(email: email, password: password);
      User? user = result.user;

      // 把name传入updateUserData方法
      await DatabaseService(uid: user!.uid).updateUserData(name);
      return _userFromFirebaseUser(user);
    }
    catch(e){
      print(e);
      return null;
    }
  }
}  

2. 完善register.dart的表单逻辑

补充表单全局key、提交按钮，提交时将已存储的name变量传入注册方法即可：

import 'package:flutter/material.dart';
// 记得引入你自己的auth.dart文件
import 'auth.dart';

class Register extends StatefulWidget {
  const Register({Key? key}) : super(key: key);

  @override
  _RegisterState createState() => _RegisterState();
}

class _RegisterState extends State<Register> {
  String name = '';
  String email = ''; // 补充你原本缺失的邮箱字段
  String password = ''; // 补充你原本缺失的密码字段
  // 新增表单全局key用于验证
  final _formKey = GlobalKey<FormState>();
  final AuthService _auth = AuthService();

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Form(
        key: _formKey, // 绑定表单key
        child: Column(
          children: <Widget>[
            // 姓名输入框
            TextFormField(
              decoration: InputDecoration(
                contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
                hintText: "Full Name",
                border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0))
              ),
              // 修正原来错误的验证提示
              validator: (val) => val!.isEmpty ? '请输入姓名' : null,
              onChanged: (val){
                setState(() => name = val);
              },
            ),
            // 补充你原本缺失的邮箱、密码输入框，逻辑和姓名输入框一致
            TextFormField(
              decoration: InputDecoration(
                contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
                hintText: "邮箱",
                border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0))
              ),
              validator: (val) => val!.isEmpty ? '请输入邮箱' : null,
              onChanged: (val){
                setState(() => email = val);
              },
            ),
            TextFormField(
              obscureText: true,
              decoration: InputDecoration(
                contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
                hintText: "密码",
                border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0))
              ),
              validator: (val) => val!.length < 6 ? '密码长度不能少于6位' : null,
              onChanged: (val){
                setState(() => password = val);
              },
            ),
            // 新增提交按钮
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                // 先验证表单所有字段是否合法
                if(_formKey.currentState!.validate()){
                  // 表单验证通过，调用注册方法，传入name参数
                  dynamic result = await _auth.registerWithEmailAndPassword(email, password, name);
                  if(result == null){
                    // 可自行添加注册失败的提示逻辑
                    print('注册失败');
                  }else{
                    // 可自行添加注册成功后的跳转逻辑
                    print('注册成功');
                  }
                }
              },
              child: Text('注册'),
            )
          ],
        ),
      ),
    );
  }
}

逻辑说明 #

• 你已经在onChanged回调里把输入的姓名存储到了_RegisterState的name变量中，表单验证通过后直接取这个变量值即可
• 给注册方法新增入参后，就可以把页面层拿到的姓名一路传递到DatabaseService的updateUserData方法中，完成用户数据写入

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