Flutter DatePicker更新表单值但UI未同步的问题求助

问题原因 #

你的DOB字段使用initialValue绑定dob变量，但initialValue仅在组件首次构建时生效。后续通过setState更新dob变量时，组件重建不会重新读取initialValue，导致UI无法同步。其他输入字段能正常工作是因为用户直接输入触发onChanged，输入框内容是实时交互更新的，而DOB字段为只读状态，依赖initialValue就会失效。

修复方案 #

使用TextEditingController控制TextFormField的内容，更新controller的text属性即可直接刷新UI。

步骤1：添加并初始化TextEditingController

在RegistrationFormState类中定义controller，并在生命周期中处理初始化和释放：

class RegistrationFormState extends State<RegistrationForm> {
  // 新增DOB控制器
  final TextEditingController _dobController = TextEditingController();
  String errorMessage = "";
  String successMessage = "";
  bool _pwObscure = true;
  String firstName = "";
  String lastName = "";
  String codename = "";
  String email = "";
  String _password = "";
  String codenameStr = "https://app.xxxxxxxxxxxxxxx.com/codename";
  String dob = "";

  @override
  void initState() {
    super.initState();
    // 初始化控制器初始值
    _dobController.text = dob;
  }

  @override
  void dispose() {
    // 释放控制器资源
    _dobController.dispose();
    super.dispose();
  }
  // ... 其余代码
}

步骤2：修改DOB的TextFormField配置

移除initialValue，替换为controller，并在选择日期后更新controller的文本：

//* DOB Field
InputField(
    child: TextFormField(
  readOnly: true,
  controller: _dobController, // 替换initialValue为controller
  decoration: InputDecoration(
    border: InputBorder.none,
    labelText: 'Date of Birth',
    suffixIcon: IconButton(
      icon: const Icon(Icons.edit),
      onPressed: () => showDatePicker(
              initialDatePickerMode: DatePickerMode.year,
              context: context,
              initialDate: DateTime.now().subtract(
                  const Duration(days: 365 * 13)),
              firstDate: DateTime(1900),
              lastDate: DateTime.now().subtract(
                  const Duration(days: 365 * 13)))
          .then(
        (value) => {
          setState(() {
            dob =
                '${value!.month.toString()}/${value.day.toString()}/${value.year.toString()}';
            _dobController.text = dob; // 更新控制器文本，同步UI
          })
        },
      ),
    ),
  ),
)),

可选：处理用户初始DOB值

如果需要从user对象中读取初始DOB值，可在didChangeDependencies中处理：

@override
void didChangeDependencies() {
  super.didChangeDependencies();
  final user = context.watch<AuthModel>().user;
  final userDob = user['dob'] ?? '';
  if (_dobController.text.isEmpty && userDob.isNotEmpty) {
    _dobController.text = userDob;
    dob = userDob;
  }
}

原理说明 #

TextEditingController直接持有输入框的文本状态，修改其text属性会立即触发UI更新，不受initialValue的初始化限制，完美适配只读输入框通过外部操作更新内容的场景。

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