Flutter Dart实现Firestore数据填充至TextField并支持修改

你的代码目前存在几个关键问题，导致无法实现需求：

• TextEditingController在build方法内定义，每次组件重建都会被重新初始化，不仅会丢失输入内容，也无法正确填充初始用户名
• 用hintText显示用户名，这只是输入框的提示文本，不会真正填充到输入框中，用户看不到当前用户名的实际内容
• 缺少提交按钮和修改Firestore数据的核心逻辑

下面是修正后的完整代码，完美实现进入页面自动填充当前用户名、编辑后提交修改的功能：

class ModifyScreen extends Stateful Widget {
  final String uid;
  const ModifyScreen({
    super.key,
    required this.uid,
  });

  @override
  State<ModifyScreen> createState() => _ModifyScreenState();
}

class _ModifyScreenState extends State<ModifyScreen> {
  var userData = {};
  bool isLoading = false;
  // 将控制器提升为类成员变量，避免每次build重建
  late TextEditingController _namecon;

  @override
  void initState() {
    super.initState();
    _namecon = TextEditingController();
    getData();
  }

  @override
  void dispose() {
    // 销毁控制器，避免内存泄漏
    _namecon.dispose();
    super.dispose();
  }

  getData() async {
    setState(() => isLoading = true);
    try {
      var userSnap = await FirebaseFirestore.instance
          .collection('users')
          .doc(widget.uid)
          .get();

      userData = userSnap.data()!;
      // 获取到用户名后，直接填充到输入框
      _namecon.text = userData['username'] ?? '';
      setState(() => isLoading = false);
    } catch (e) {
      setState(() => isLoading = false);
      showSnackBar(
        context,
        e.toString(),
      );
    }
  }

  // 提交修改的核心方法
  void submitModify() async {
    final newName = _namecon.text.trim();
    if (newName.isEmpty) {
      showSnackBar(context, '用户名不能为空');
      return;
    }
    setState(() => isLoading = true);
    try {
      await FirebaseFirestore.instance
          .collection('users')
          .doc(widget.uid)
          .update({
        'username': newName,
      });
      showSnackBar(context, '用户名修改成功');
      // 修改完成后返回上一页
      Navigator.pop(context);
    } catch (e) {
      showSnackBar(context, e.toString());
    } finally {
      setState(() => isLoading = false);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('修改用户名')),
      body: isLoading
          ? const Center(child: CircularProgressIndicator())
          : Padding(
              padding: const EdgeInsets.all(18),
              child: Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    TextField(
                      controller: _namecon,
                      decoration: const InputDecoration(
                        labelText: '用户名',
                        border: OutlineInputBorder(),
                      ),
                    ),
                    const SizedBox(height: 20),
                    ElevatedButton(
                      onPressed: isLoading ? null : submitModify,
                      child: const Text('提交修改'),
                    )
                  ],
                ),
              ),
            ),
    );
  }
}

关键修改说明： #

1. 控制器优化：把TextEditingController改为类成员变量，在initState初始化、dispose销毁，避免内存泄漏和输入内容丢失。
2. 自动填充实现：获取到Firestore的用户数据后，直接设置_namecon.text，让输入框显示当前用户名，用户可直接编辑。
3. 加载状态处理：添加isLoading状态，在获取数据和提交时显示加载指示器，防止用户重复操作。
4. 提交逻辑完善：实现submitModify方法，先验证输入非空，再调用Firestore的update修改用户名，操作完成后给出提示并返回上一页。
5. UI体验提升：新增AppBar、提交按钮，完善输入框样式，让页面交互更完整。

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