Flutter TextField输入自动消失及无法输入问题（含getTextBeforeCursor警告）

问题根源 #

你遇到的输入内容丢失、首次点击金额框无法输入，以及终端的InputConnection警告，核心原因是**TextEditingController被重复创建**——如果你的titleController和amountController是定义在build方法内部，每次Widget重建（比如切换输入框触发状态更新）都会生成新的控制器实例，旧输入内容直接丢失，同时系统会因旧的输入连接失效抛出警告。

修复步骤 #

1. 将TextEditingController定义为State类的成员变量（仅适用于StatefulWidget），确保整个Widget生命周期内控制器实例唯一。
2. 在dispose方法中销毁控制器，避免内存泄漏。

修正后的完整代码示例 #

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

  @override
  State<TransactionInputWidget> createState() => _TransactionInputWidgetState();
}

class _TransactionInputWidgetState extends State<TransactionInputWidget> {
  // 控制器作为State类成员，全局唯一
  final titleController = TextEditingController();
  final amountController = TextEditingController();

  void submitData() {
    final enteredTitle = titleController.text;
    // 用tryParse替代parse，避免非数字输入导致崩溃
    final enteredAmount = double.tryParse(amountController.text);

    if (enteredTitle.isEmpty || enteredAmount == null || enteredAmount <= 0) {
      return;
    }
    addTx(enteredTitle, enteredAmount);
    // 可选：提交后清空输入框
    titleController.clear();
    amountController.clear();
  }

  void addTx(String title, double amount) {
    // 这里填写你的添加交易逻辑，比如更新列表等
    setState(() {
      // 示例：更新状态
    });
  }

  @override
  void dispose() {
    // 销毁控制器，释放资源
    titleController.dispose();
    amountController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          controller: titleController,
          decoration: const InputDecoration(labelText: 'Title'),
          onSubmitted: (_) => submitData(),
        ),
        TextField(
          controller: amountController,
          decoration: const InputDecoration(labelText: 'Amount'),
          // 适配小数金额输入
          keyboardType: TextInputType.numberWithOptions(decimal: true),
          onSubmitted: (_) => submitData(),
        ),
        TextButton(
          child: const Text('Add Transaction'),
          style: TextButton.styleFrom(
            foregroundColor: Colors.purple,
          ),
          onPressed: submitData,
        ),
      ],
    );
  }
}

额外优化建议 #

• 金额输入框使用TextInputType.numberWithOptions(decimal: true)，更符合金额输入场景
• 用double.tryParse替代double.parse，避免用户输入非数字内容时直接崩溃
• 提交成功后调用controller.clear()清空输入框，提升操作流畅度

内容的提问来源于stack exchange，提问作者Najmul.myself