Flutter中如何修改TextField光标颜色？Theme包裹后颜色未生效

一、直接修改光标颜色（最简单方法） #

无需依赖Theme，直接给TextField设置cursorColor属性即可，该属性优先级最高：

TextField(
  cursorColor: Colors.orange, // 自定义光标颜色
  decoration: InputDecoration(hintText: "输入内容"),
)

二、使用Theme组件批量修改（及失效排查） #

如果需要给多个TextField统一设置光标颜色，可通过Theme包裹，但需注意正确用法，否则会出现不生效的情况：

正确的Theme用法

通过copyWith继承现有主题，仅修改textSelectionTheme相关属性：

Theme(
  data: Theme.of(context).copyWith(
    textSelectionTheme: const TextSelectionThemeData(
      cursorColor: Colors.blue, // 光标颜色
      selectionColor: Colors.blue.withOpacity(0.2), // 选中文字背景色（可选）
      selectionHandleColor: Colors.blue, // 光标手柄颜色（可选）
    ),
  ),
  child: TextField(
    decoration: InputDecoration(hintText: "Theme包裹的输入框"),
  ),
)

常见失效原因及解决

1. TextField单独设置了cursorColor
   如果同时给TextField设置了cursorColor，会直接覆盖Theme中的配置，需移除TextField的cursorColor属性。

2. 未使用copyWith创建ThemeData
   若直接新建ThemeData()而非通过Theme.of(context).copyWith()，会丢失父级主题的所有配置，可能导致样式冲突。必须基于现有主题进行修改。

3. 上下文获取错误
   如果在同一个build方法中直接使用Theme.of(context)，获取的是父级Theme而非当前包裹的Theme。此时需用Builder组件包裹TextField，确保使用子级上下文：

   Theme(
     data: Theme.of(context).copyWith(
       textSelectionTheme: const TextSelectionThemeData(cursorColor: Colors.purple),
     ),
     child: Builder(
       builder: (childContext) {
         return TextField(
           decoration: InputDecoration(hintText: "使用Builder修复上下文问题"),
         );
       },
     ),
   )
   

三、全局统一设置光标颜色 #

如果希望整个应用的TextField光标颜色统一，可在MaterialApp的主题中配置：

MaterialApp(
  theme: ThemeData(
    textSelectionTheme: const TextSelectionThemeData(
      cursorColor: Colors.green,
    ),
  ),
  home: const YourHomePage(),
)

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