如何修改Flutter Web应用中TextFormField的光标颜色

TextFormField本身支持光标颜色配置，不需要额外引入第三方依赖，分两种场景配置即可：

• 单组件局部改色
  直接在TextFormField的构造参数里传入cursorColor即可，同时支持配套调整光标样式：

  TextFormField(
    // 自定义光标颜色
    cursorColor: Colors.deepPurple,
    // 可选配置：光标粗细
    cursorWidth: 1.5,
    // 可选配置：光标圆角
    cursorRadius: const Radius.circular(1),
    // 其余原有业务配置（校验规则、输入装饰、回调等）
    decoration: const InputDecoration(
      border: OutlineInputBorder(),
      hintText: '输入内容',
    ),
  )
  

• 全局统一改色
  如果需要应用内所有输入框统一光标颜色，直接在MaterialApp的主题数据中配置TextSelectionThemeData即可，不需要给每个输入框单独传参：

  MaterialApp(
    theme: ThemeData(
      textSelectionTheme: const TextSelectionThemeData(
        cursorColor: Colors.deepPurple,
        // 可选：同步配置文本选中高亮色、选择手柄颜色，保持交互风格统一
        selectionColor: Color(0x4D6750A4),
        selectionHandleColor: Colors.deepPurple,
      ),
    ),
    home: const YourHomePage(),
  )
  

注意：Flutter Web 3.10以下的旧版本曾存在光标颜色读取主题不生效的兼容问题，升级到3.10及以上稳定版后上述配置可直接生效，无需单独写Web端兼容逻辑。

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