Flutter：如何修改AppBar返回箭头悬停背景的颜色与位置

当你通过IconThemeData放大返回箭头尺寸后，默认的按钮容器大小未同步调整，导致悬停背景偏移。以下两种方式可解决该问题，同时自定义悬停颜色：

方案一：全局配置（推荐） #

在ThemeData中添加iconButtonTheme，统一设置按钮容器尺寸和悬停样式，所有AppBar的图标按钮都会生效：

修改后的完整代码：

@override
Widget build(BuildContext context) {
  return MaterialApp.router(
    routerConfig: _router,
    theme: ThemeData(
      colorSchemeSeed: Color.fromARGB(255, 131, 104, 52),
      useMaterial3: true,
      appBarTheme: const AppBarTheme(
        backgroundColor: Color.fromARGB(255, 240, 239, 237),
        iconTheme: IconThemeData(
          size: 70, 
          color: Colors.black, 
          fill: 0.5, 
          grade: 100, 
          applyTextScaling: false,
          shadows: [
            Shadow(
              blurRadius: 15.0,
              color: Colors.red,
              offset: Offset(3.0, 3.0),
            ),
          ],
        ),
        toolbarHeight: 70,
      ),
      // 新增IconButtonTheme配置，匹配图标尺寸并修改悬停颜色
      iconButtonTheme: IconButtonThemeData(
        style: IconButton.styleFrom(
          fixedSize: Size(70, 70), // 和图标尺寸一致，解决偏移问题
          hoverColor: Colors.grey[300], // 自定义悬停背景颜色
          shape: CircleBorder(), // 保持圆形背景（可按需改为圆角矩形）
        ),
      ),
      scaffoldBackgroundColor: Color.fromARGB(230, 230, 230, 230),
      inputDecorationTheme: const InputDecorationTheme(
        filled: true,
        fillColor: Colors.white,
      ),
    ),
  );
}

方案二：局部自定义单个AppBar #

如果仅需修改某页面的AppBar，直接在leading属性中自定义IconButton：

AppBar(
  leading: IconButton(
    icon: Icon(Icons.arrow_back, size: 70, 
      color: Colors.black,
      fill: 0.5,
      shadows: [
        Shadow(
          blurRadius: 15.0,
          color: Colors.red,
          offset: Offset(3.0, 3.0),
        ),
      ],
    ),
    onPressed: () => Navigator.pop(context),
    style: IconButton.styleFrom(
      fixedSize: Size(70, 70),
      hoverColor: Colors.grey[300],
      shape: CircleBorder(),
    ),
  ),
  backgroundColor: Color.fromARGB(255, 240, 239, 237),
  toolbarHeight: 70,
)

关键说明 #

• fixedSize必须与IconThemeData中的size保持一致，确保悬停背景与图标完全对齐
• hoverColor可直接设置目标颜色，也可使用ColorScheme内置颜色（如colorScheme.primaryContainer）
• 若需调整背景形状或圆角，修改shape属性即可

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