Flutter Web多TextField切换时触发scheduler库空值异常

1. 核心问题根源 #

你的代码逻辑存在明显的不规范操作，是触发异常的主要原因：

• 你在build方法中重复给TextEditingController添加监听，每次页面重绘都会新增一个updateAllTexts监听回调，不仅会导致内存泄漏、回调多次触发，还会打乱输入框的状态同步逻辑。
• 你在build方法中强制给控制器的text属性赋值，这个操作会覆盖输入框的光标位置，切换焦点时Flutter触发重绘，赋值操作会打断输入框语义层的状态更新，直接触发空值异常。
• 你没有给控制器做销毁处理，会产生内存泄漏隐患。

另外该空值报错在2.0早期版本的Flutter Web上确实存在相关语义层的框架bug，修复代码逻辑后如果还出现报错，升级到Flutter 3.0以上稳定版本即可解决。

2. 修复后可运行代码 #

import 'package:flutter/material.dart';
class TextExample extends StatefulWidget {
  const TextExample({Key? key}) : super(key: key);

  @override
  _TextExampleState createState() => _TextExampleState();
}

class _TextExampleState extends State<TextExample> {
  List<String> texts = ["", "", ""];
  List<TextEditingController> controllers = [];

  @override
  void initState() {
    super.initState();
    // 控制器初始化和监听绑定只执行一次
    for (int i = 0; i < 3; i++) {
      controllers.add(TextEditingController(text: texts[i]));
      controllers[i].addListener(() {
        texts[i] = controllers[i].text;
        setState(() {});
      });
    }
  }

  @override
  void dispose() {
    // 页面销毁时销毁所有控制器释放资源
    for (var controller in controllers) {
      controller.dispose();
    }
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Text eingeben"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(12.0),
        child: Column(
          children: [
            TextField(controller: controllers[0],),
            Text(texts[0]),
            TextField(controller: controllers[1],),
            Text(texts[1]),
          ],
        ),
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者Thomas W.