Flutter TextFormField预填充数据后如何让光标默认定位在文本末尾

编辑个人资料页面中，TextFormField需要预填充已有的用户数据，预期交互为点击输入框时，输入光标默认定位在预加载文本的末尾；实际表现为点击后光标自动跳转至文本起始位置。
原有实现存在光标定位异常的代码如下：

TextFormField(
  decoration: const InputDecoration(hintText: "First Name"),
  validator: (value) {
    if (value == null || value.isEmpty) {
      return "Please enter your first name";
    } else {
      return null;
    }
  },
  onChanged: (value) {
    firstName = firstNameController.text;
    if (firstName.isNotEmpty) {
      firstName = "${firstName[0].toUpperCase()}${firstName.substring(1)}";
      firstNameController.selection = TextSelection.fromPosition(
        TextPosition(offset: firstName.length)
      );
    }
  },
  controller: firstNameController..text = firstName,
)

• 预填充文本赋值时机错误：在build阶段通过级联操作给controller.text赋值，每次组件重建都会重置文本状态，且赋值时未同步设置光标选区，光标默认落在文本起始位置。
• 光标设置触发时机不全：仅在onChanged回调中设置光标位置，但首次点击输入框获取焦点时不会触发onChanged，无法触发光标定位逻辑。

1. 正确初始化控制器与焦点监听 #

在组件初始化阶段（如StatefulWidget的initState生命周期）完成控制器文本赋值、初始光标定位，同时添加焦点监听，兜底聚焦时的光标位置：

late final TextEditingController firstNameController;
late final FocusNode firstNameFocusNode;

@override
void initState() {
  super.initState();
  // 初始化控制器，传入预填充的用户数据
  firstNameController = TextEditingController(text: firstName);
  // 初始状态下将光标定位到文本末尾
  firstNameController.selection = TextSelection.collapsed(
    offset: firstNameController.text.length
  );

  // 初始化焦点节点
  firstNameFocusNode = FocusNode();
  // 监听焦点变化，输入框聚焦时强制将光标移动到文本末尾
  firstNameFocusNode.addListener(() {
    if (firstNameFocusNode.hasFocus && firstNameController.text.isNotEmpty) {
      firstNameController.selection = TextSelection.collapsed(
        offset: firstNameController.text.length
      );
    }
  });
}

// 组件销毁时释放资源，避免内存泄漏
@override
void dispose() {
  firstNameController.dispose();
  firstNameFocusNode.dispose();
  super.dispose();
}

2. 修正输入回调中的文本与光标同步逻辑 #

onChanged中修改文本格式时，需要同时更新文本内容和光标位置，避免文本修改后光标重置：

onChanged: (value) {
  if (value.isEmpty) {
    firstName = '';
    return;
  }
  // 处理首字母大写格式
  final formattedValue = "${value[0].toUpperCase()}${value.substring(1)}";
  // 仅当格式化后内容与原输入不一致时更新，避免循环触发onChanged
  if (formattedValue != value) {
    firstNameController.value = TextEditingValue(
      text: formattedValue,
      selection: TextSelection.collapsed(offset: formattedValue.length)
    );
  }
  firstName = formattedValue;
},

3. 修正TextFormField配置 #

移除build阶段对controller的级联赋值操作，绑定提前初始化的焦点节点：

TextFormField(
  focusNode: firstNameFocusNode,
  controller: firstNameController,
  decoration: const InputDecoration(hintText: "First Name"),
  validator: (value) {
    if (value == null || value.isEmpty) {
      return "Please enter your first name";
    }
    return null;
  },
  onChanged: (value) {
    if (value.isEmpty) {
      firstName = '';
      return;
    }
    final formattedValue = "${value[0].toUpperCase()}${value.substring(1)}";
    if (formattedValue != value) {
      firstNameController.value = TextEditingValue(
        text: formattedValue,
        selection: TextSelection.collapsed(offset: formattedValue.length)
      );
    }
    firstName = formattedValue;
  },
)

• 禁止在build方法中直接给controller的text属性赋值：build方法会在组件每次刷新时执行，重复赋值会重置文本状态和光标位置。
• 光标定位需要覆盖两个场景：组件初始化加载预填充数据的场景、输入框首次获取焦点的场景，仅靠onChanged回调无法覆盖全场景。
• 任何通过代码修改输入框文本的操作，都需要同步设置selection属性指定光标位置，否则光标会默认回到文本起始位置。

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