Flutter如何为全应用统一设置AppBar返回按钮的自定义图标？

有两种成熟的实现方案，都可以做到一次配置全局生效： #

方案1：通过ThemeData全局配置（推荐，适配Flutter 3.0+） #

Flutter 3.0及以上版本已经支持在全局主题中直接配置返回按钮样式，无需额外封装组件，配置逻辑如下：

MaterialApp(
  // 全局主题配置
  theme: ThemeData(
    appBarTheme: AppBarTheme(
      // 统一设置全局返回按钮样式
      backIconButton: IconButton(
        // 替换为你需要的自定义图标
        icon: Icon(Icons.arrow_back_ios, size: 20, color: Colors.black87),
        // 此处onPressed留空即可，AppBar会自动覆盖为系统默认的返回逻辑
        onPressed: () {},
      ),
      // 也可以同步配置AppBar全局图标主题
      iconTheme: IconThemeData(color: Colors.black87, size: 20),
    ),
    // 其他主题配置...
  ),
  home: const HomePage(),
)

该方案优先级低于页面单独配置的AppBar参数，如果某一页面需要单独使用特殊返回图标，直接在当前页的AppBar中指定leading属性即可覆盖全局配置。 #

方案2：封装通用自定义AppBar（兼容所有Flutter版本） #

如果使用的Flutter版本较低不支持backIconButton配置，可以封装全局通用的CustomAppBar组件，所有页面统一使用该组件即可：

1. 首先封装CustomAppBar组件：

class CustomAppBar extends PreferredSizeWidget {
  final Widget title;
  final List<Widget>? actions;
  final Color? backgroundColor;
  // 可根据需求扩展其他AppBar支持的参数

  const CustomAppBar({
    super.key,
    required this.title,
    this.actions,
    this.backgroundColor,
  });

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: title,
      actions: actions,
      backgroundColor: backgroundColor,
      // 统一处理返回图标逻辑，仅当可以返回时展示返回按钮
      leading: Navigator.canPop(context)
          ? IconButton(
              icon: const Icon(Icons.arrow_back_ios, size: 20),
              onPressed: () => Navigator.pop(context),
            )
          : null,
      // 其他统一配置的AppBar参数...
    );
  }

  @override
  Size get preferredSize => const Size.fromHeight(kToolbarHeight);
}

2. 页面中使用：

Scaffold(
  // 所有页面统一使用CustomAppBar代替原生AppBar即可
  appBar: CustomAppBar(
    title: const Text("详情页"),
  ),
  body: const SizedBox(),
)

注意事项 #

• 两种方案都不会影响iOS端默认的右滑返回手势逻辑，仅修改返回按钮的图标样式
• 若需要自定义返回事件，可在对应页面的AppBar中单独指定leading的onPressed逻辑

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