Flutter中如何为所有页面自动设置自定义返回按钮BackButtonCustomize

方法1：通过全局Theme配置（无需修改原有页面AppBar代码） #

Flutter的ThemeData中提供了appBarTheme配置项，可直接全局指定所有AppBar默认的leading组件，无需逐个页面修改：

MaterialApp(
  title: '你的应用名称',
  // 全局主题配置
  theme: ThemeData(
    appBarTheme: AppBarTheme(
      // 全局指定默认leading为自定义返回按钮
      leading: BackButtonCustomize(),
    ),
    // 其他主题配置...
  ),
  home: const HomePage(),
)

• 注意：如果部分页面单独给AppBar配置了leading属性，会优先使用页面单独配置的内容，不会被全局配置覆盖，可满足差异化需求。
• 如果要禁用个别页面的自动返回按钮，单独给对应页面的AppBar设置automaticallyImplyLeading: false即可。

方法2：封装通用AppBar组件（灵活度更高，适合多全局配置需求场景） #

如果除了自定义返回按钮，你还有其他全局AppBar统一配置需求（比如统一标题样式、统一动作栏样式等），可以直接封装自定义的CommonAppBar组件，后续所有页面都使用该组件代替原生AppBar：

// 定义通用AppBar组件
class CommonAppBar extends PreferredSizeWidget {
  final Widget? title;
  final List<Widget>? actions;
  final bool? automaticallyImplyLeading;
  // 其他需要透传的AppBar参数...

  const CommonAppBar({
    super.key,
    this.title,
    this.actions,
    this.automaticallyImplyLeading = true,
  });

  @override
  Widget build(BuildContext context) {
    return AppBar(
      leading: automaticallyImplyLeading == true ? const BackButtonCustomize() : null,
      title: title,
      actions: actions,
      automaticallyImplyLeading: automaticallyImplyLeading,
      // 其他全局统一配置的AppBar属性，比如背景色、标题样式等
    );
  }

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

// 页面中使用时替换原生AppBar即可
CommonAppBar(
  title: const Text('页面标题'),
  actions: [/* 页面单独的动作按钮 */],
)

• 该方案后续如果要修改全局AppBar的配置，仅需修改CommonAppBar一处即可，维护成本更低。

内容的提问来源于stack exchange，提问作者Trần Văn Hiếu