如何在Flutter的ThemeData（深色/浅色主题）中修改复制粘贴菜单样式

问题分析 #

你当前代码里用Theme(data: ThemeData())包裹TextFormField，会直接覆盖全局主题，导致TextSelectionThemeData失效。而且TextSelectionThemeData仅负责光标、选中文本颜色、选择手柄颜色，复制粘贴菜单属于上下文操作菜单，得用MenuThemeData来配置。

解决方案 #

1. 修复局部Theme覆盖问题 #

要么去掉LoginInfoFormField里的空ThemeData包裹，要么基于全局主题扩展局部样式，不要新建空主题：

return Theme(
  data: Theme.of(context).copyWith(
    // 只添加你需要的局部修改，比如文本样式
    textTheme: Theme.of(context).textTheme.copyWith(...),
  ),
  child: TextFormField(...),
);

2. 全局配置上下文菜单主题 #

在你的全局浅色/深色ThemeData中，通过menuTheme属性配置菜单样式：

// 浅色主题
ThemeData lightTheme() {
  return ThemeData(
    brightness: Brightness.light,
    // 保留原有的文本选择配置
    textSelectionTheme: TextSelectionThemeData(
      cursorColor: Colors.blue,
      selectionColor: Colors.blue.withOpacity(0.3),
      selectionHandleColor: Colors.blue,
    ),
    // 配置复制粘贴菜单样式
    menuTheme: MenuThemeData(
      style: MenuStyle(
        backgroundColor: MaterialStateProperty.all(Colors.white),
        shape: MaterialStateProperty.all(
          RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
        ),
        padding: MaterialStateProperty.all(EdgeInsets.symmetric(vertical: 4)),
      ),
      textStyle: MaterialStateProperty.all(
        TextStyle(color: Colors.black, fontSize: 14),
      ),
    ),
  );
}

// 深色主题
ThemeData darkTheme() {
  return ThemeData(
    brightness: Brightness.dark,
    textSelectionTheme: TextSelectionThemeData(
      cursorColor: Colors.lightBlueAccent,
      selectionColor: Colors.lightBlueAccent.withOpacity(0.3),
      selectionHandleColor: Colors.lightBlueAccent,
    ),
    menuTheme: MenuThemeData(
      style: MenuStyle(
        backgroundColor: MaterialStateProperty.all(Colors.grey[800]),
        shape: MaterialStateProperty.all(
          RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
        ),
      ),
      textStyle: MaterialStateProperty.all(
        TextStyle(color: Colors.white, fontSize: 14),
      ),
    ),
  );
}

3. Flutter 3.22.2版本特殊说明 #

在Flutter 3.x中，上下文菜单的样式完全由MenuThemeData控制。如果需要定制菜单项的hover/选中状态，可通过MaterialStateProperty.resolveWith实现：

style: MenuStyle(
  backgroundColor: MaterialStateProperty.resolveWith((states) {
    if (states.contains(MaterialState.hovered)) {
      return Colors.grey[200]; // 浅色主题hover背景
    }
    return Colors.white;
  }),
),

关键总结 #

• 禁止用空ThemeData()覆盖局部组件主题，应基于全局主题扩展
• 复制/粘贴菜单属于上下文菜单，需通过MenuThemeData配置，和TextSelectionThemeData无关
• 分别在浅色、深色ThemeData中配置menuTheme，即可实现全局生效

内容的提问来源于stack exchange，提问作者Nyein Chann Moe