Flutter SearchDelegate如何修改文本光标和选中时的蓝色气泡颜色

你的实现方向正确，但存在两个可优化点：

• 直接返回全新的ThemeData会覆盖SearchDelegate默认的AppBar样式，可能导致AppBar背景色、文字样式等和预期不符，建议基于当前主题拷贝修改
• 你注释了cursorColor参数的配置，若要修改光标颜色需要放开注释并赋值

修正后的代码如下：

class DataSearch extends SearchDelegate<String> {
  @override
  ThemeData appBarTheme(BuildContext context) {
    // 继承原有主题，只修改需要的属性
    return Theme.of(context).copyWith(
      textSelectionTheme: const TextSelectionThemeData(
        cursorColor: Colors.red, // 文本光标颜色
        selectionHandleColor: Colors.red, // 选中文本时两端的气泡手柄颜色
        selectionColor: Colors.white10, // 选中文本的背景高亮色
      ),
      // 也可在这里同步配置AppBar其他样式，比如背景色、图标主题等
      appBarTheme: const AppBarTheme(
        backgroundColor: Colors.white,
        iconTheme: IconThemeData(color: Colors.black87),
      )
    );
  }
}

以上方案适配你使用的>=2.12.0 <3.0.0 SDK版本，无需额外引入依赖。

1. 全局主题统一配置 #

如果项目所有输入框的光标、选中样式都需要统一风格，可以直接在根节点MaterialApp的theme中配置，不需要单独给SearchDelegate做特殊处理：

MaterialApp(
  title: 'Demo',
  theme: ThemeData(
    textSelectionTheme: const TextSelectionThemeData(
      cursorColor: Colors.red,
      selectionHandleColor: Colors.red,
      selectionColor: Colors.white10,
    ),
  ),
  home: const MyHomePage(),
);

2. 调用showSearch时局部注入主题 #

不需要重写SearchDelegate的appBarTheme方法，在触发搜索时给showSearch的上下文外层包裹Theme组件即可：

IconButton(
  icon: const Icon(Icons.search),
  onPressed: () {
    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (context) => Theme(
          data: Theme.of(context).copyWith(
            textSelectionTheme: const TextSelectionThemeData(
              cursorColor: Colors.red,
              selectionHandleColor: Colors.red,
            ),
          ),
          child: Scaffold(
            body: SearchWidget(delegate: DataSearch()),
          ),
        ),
      ),
    );
  },
)

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