Flutter Web TextField空格键偶发失效问题求助

问题背景 #

• 生产环境下Flutter Web应用的TextField（如聊天消息输入框）偶尔出现空格键输入无效，刷新页面后恢复正常
• 异常发生时伴随字体显示异常，疑似字体未完成加载
• Chrome、Edge浏览器均会出现，开发环境无法复现
• Flutter环境信息：

核心原因推测 #

生产环境下字体异步加载延迟，导致Flutter Web的TextField组件字符度量初始化未完成，进而干扰空格键等输入事件的正常处理；Flutter Web在字体未就绪时，文本渲染与输入事件的绑定逻辑出现临时异常。

解决方案 #

1. 预加载自定义字体 #

若应用使用了自定义字体，在启动阶段通过FontLoader预加载，确保字体加载完成后再初始化UI：

import 'package:flutter/services.dart';

void main() async {
  // 替换为实际使用的字体名称和资源路径
  await FontLoader('CustomFontName')
      .addFont(rootBundle.load('assets/fonts/CustomFont-Regular.ttf'))
      .load();
  runApp(const YourApp());
}

2. 延迟渲染TextField，等待字体就绪 #

通过监听应用帧回调，确保字体加载完成后再渲染TextField：

bool _isFontReady = false;

@override
void initState() {
  super.initState();
  WidgetsBinding.instance.addPostFrameCallback((_) async {
    // 可根据实际情况替换为更可靠的字体就绪检测逻辑
    await Future.delayed(const Duration(milliseconds: 300));
    setState(() {
      _isFontReady = true;
    });
  });
}

@override
Widget build(BuildContext context) {
  return _isFontReady 
      ? TextField(
          minLines: 8,
          maxLines: 8,
          controller: _chatController,
          onChanged: (text) => setState(() => textValue = text),
          decoration: const InputDecoration(
            contentPadding: EdgeInsets.all(8),
            hintText: "Scrivi qui il tuo messaggio",
            border: InputBorder.none,
          ),
        )
      : const Center(child: CircularProgressIndicator());
}

3. 调整Web渲染器与字体加载策略 #

在项目根目录的index.html中添加配置，强制浏览器提前加载字体，并切换到HTML渲染器（部分场景下可改善兼容性）：

<script>
  window.flutterWebRenderer = 'html';
  window.addEventListener('load', function() {
    // 加载应用使用的字体
    const font = new FontFace('CustomFontName', 'url(assets/fonts/CustomFont-Regular.ttf)');
    document.fonts.add(font);
    // 强制浏览器加载字体
    document.fonts.load('16px CustomFontName');
  });
</script>

4. 升级Flutter版本 #

当前使用的Flutter版本（2.x系列）存在较多Web平台输入与字体相关的已知Bug，建议升级至最新稳定版：

flutter upgrade

官方参考方向 #

• Flutter官方文档中关于Web字体预加载的指导，明确字体就绪状态对UI组件渲染的影响
• Flutter Web输入事件处理逻辑说明，字体度量是文本输入组件正常工作的前提

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