TextFormField同时使用controller和initialValue失效，如何加载Firestore存储值并支持编辑？

Flutter 中 TextFormField 的 initialValue 和 controller 不能同时使用，是因为 TextEditingController 本身已经承担了控制输入框内容的能力，直接通过 controller 的 text 属性设置初始值即可，不需要额外配置 initialValue。

两种实现场景 #

• 场景1：进入编辑页前已经获取到 Firestore 存储的用户数据
  直接在初始化控制器时传入初始值：

// 此处的 storedPhone 为你从 Firestore 中拿到的已存储用户手机号
final TextEditingController phone_controller = TextEditingController(text: storedPhone);

• 场景2：进入编辑页后异步请求 Firestore 获取用户数据
  在 State 的 initState 生命周期中请求数据，拿到后给 controller 的 text 属性赋值，完整可运行代码如下：

class EditProfilePage extends StatefulWidget {
  const EditProfilePage({super.key});

  @override
  State<EditProfilePage> createState() => _EditProfilePageState();
}

class _EditProfilePageState extends State<EditProfilePage> {
  final TextEditingController phone_controller = TextEditingController();

  @override
  void initState() {
    super.initState();
    // 异步拉取Firestore用户数据
    _fetchUserProfile();
  }

  Future<void> _fetchUserProfile() async {
    // 这里替换为你自己的Firestore拉取逻辑
    final userDoc = await FirebaseFirestore.instance.collection('users').doc('当前用户uid').get();
    final storedPhone = userDoc.data()?['phone'] ?? '';
    // 给输入框赋值初始值
    setState(() {
      phone_controller.text = storedPhone;
    });
  }

  @override
  void dispose() {
    // 页面销毁时释放控制器，避免内存泄漏
    phone_controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      controller: phone_controller,
      keyboardType: TextInputType.number,
      decoration: const InputDecoration(
        icon: Icon(Icons.phone),
        hintText: "请输入手机号",
        floatingLabelBehavior: FloatingLabelBehavior.never,
      ),
      validator: (value) {
        String pattern = r'(^(?:[+0]9)?[0-9]{10,12}$)';
        RegExp regExp = RegExp(pattern);
        if (value == null || value.isEmpty || !regExp.hasMatch(value)) {
          return '请输入有效的手机号，例如 01001234567';
        }
        return null;
      },
    );
  }
}

后续要获取用户修改后的新值，直接读取 phone_controller.text 即可拿到最新输入内容，提交到 Firestore 完成更新即可。

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