如何在Flutter中修改TextField文本输入框的光标气泡颜色

你要修改的光标气泡在Flutter中对应TextSelectionThemeData的selectionHandleColor属性，两种修改方式如下：

在项目根MaterialApp的theme配置中添加textSelectionTheme参数，全局所有输入框都会复用该配置：

MaterialApp(
  // 其他全局配置保持不变
  theme: ThemeData(
    textSelectionTheme: TextSelectionThemeData(
      // 选中文本的背景高亮色，可按需调整
      selectionColor: Colors.blue.shade100,
      // 输入光标竖线的颜色
      cursorColor: Colors.blue,
      // 光标气泡/选择手柄的颜色，即你要修改的目标属性
      selectionHandleColor: Colors.blue,
    ),
  ),
)

如果不需要全局生效，仅要给特定输入框自定义气泡颜色，用Theme组件包裹目标TextField单独覆盖主题即可：

Theme(
  data: Theme.of(context).copyWith(
    textSelectionTheme: const TextSelectionThemeData(
      selectionHandleColor: Colors.green, // 替换为你需要的自定义颜色
    ),
  ),
  child: const TextField(
    // 保留TextField的其他原有配置
    decoration: InputDecoration(hintText: "请输入内容"),
  ),
)

注意：如果项目开启了Material3设计规范，上述属性依然生效，无需额外调整其他配置。

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