Flutter 如何在App Bar中添加自定义返回按钮图标图片

方法1：单页面单独配置（最常用） #

直接给AppBar的leading参数赋值自定义组件即可，仅对当前页面生效：

AppBar(
  // 自定义返回按钮核心配置
  leading: IconButton(
    icon: Image.asset(
      'assets/images/custom_back_icon.png', // 替换为你的自定义图标资源路径
      width: 24,
      height: 24,
    ),
    // 默认点击执行返回上一页逻辑，有自定义返回需求可自行修改
    onPressed: () => Navigator.of(context).pop(),
  ),
  // 其余AppBar常规配置
  title: const Text('页面标题'),
)

注意事项： #

• 提前将图标资源放入项目assets目录，并在pubspec.yaml中正确声明资源路径，否则会出现资源加载失败的问题
• 如需路由带参返回，直接修改onPressed回调中pop方法的传参即可，示例：Navigator.of(context).pop({'return_data': '自定义返回数据'})

方法2：全局统一配置（适合全App复用自定义返回按钮） #

如果整个App的返回按钮需要统一用同一个自定义图标，可以直接在根组件MaterialApp的主题配置中一次性设置，全局生效：

MaterialApp(
  title: '你的应用名称',
  theme: ThemeData(
    appBarTheme: AppBarTheme(
      leading: IconButton(
        icon: Image.asset(
          'assets/images/custom_back_icon.png',
          width: 24,
          height: 24,
        ),
        onPressed: () {},
      ),
    ),
  ),
  home: const HomePage(),
)

注意事项： #

• 全局配置后如果个别页面需要使用不同的返回按钮，直接在对应页面的AppBar中单独设置leading参数即可覆盖全局配置

扩展：仅修改默认返回图标样式（无需自定义图片） #

如果不需要替换自定义图片，只想修改系统默认返回箭头的颜色、大小，直接配置AppBar的iconTheme参数即可：

AppBar(
  iconTheme: const IconThemeData(
    color: Colors.red, // 自定义返回箭头颜色
    size: 28, // 自定义返回箭头大小
  ),
  title: const Text('页面标题'),
)

小提示：如果当前页面是App的根路由（无上级页面），系统默认不会展示返回按钮，若手动添加了自定义leading组件，需自行处理对应的点击逻辑，避免出现无响应的问题。

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