Flutter中如何修改TextField光标底部指示器颜色？

在Flutter 3.16.0中，cursorColor仅控制光标竖线的颜色，你提到的选中文本/定位时的底部指示器（文本选择手柄）需要单独设置属性来修改，以下是两种实现方式：

方式1：单独配置单个TextField #

直接在TextField组件中添加selectionHandleColor属性，若同时需要修改输入框聚焦时的底部边框颜色，可在decoration中配置focusedBorder：

TextField(
  cursorColor: myBlueColor, // 控制光标竖线颜色
  selectionHandleColor: myBlueColor, // 控制文本选择手柄（定位/选中文本时的指示器）颜色
  decoration: InputDecoration(
    focusedBorder: UnderlineInputBorder(
      borderSide: BorderSide(color: myBlueColor), // 修改输入框聚焦时的底部边框颜色
    ),
    // 其他输入框装饰属性...
  ),
  // 其他TextField属性...
)

方式2：全局Theme统一配置 #

如果希望所有TextField都应用该颜色方案，可在ThemeData中配置textSelectionTheme和inputDecorationTheme：

MaterialApp(
  theme: ThemeData(
    textSelectionTheme: TextSelectionThemeData(
      cursorColor: myBlueColor,
      selectionHandleColor: myBlueColor,
      selectionColor: myBlueColor.withOpacity(0.2), // 可选：设置选中文本的背景高亮色
    ),
    inputDecorationTheme: InputDecorationTheme(
      focusedBorder: UnderlineInputBorder(
        borderSide: BorderSide(color: myBlueColor),
      ),
    ),
  ),
  // 其他应用配置...
)

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