如何使用Flutter Go Router禁用错误页并改用Snackbar提示？

可以通过GoRouter的errorBuilder配置完全替换默认错误页，并用Snackbar展示错误信息，具体实现如下：

核心思路 #

redirect回调在路由解析阶段触发，此时路由不存在的错误尚未被捕获，因此无法通过它获取相关错误信息。而errorBuilder是路由解析失败后的专属回调，能直接拿到完整的错误状态，适合用来自定义错误处理逻辑。

实现步骤 #

1. 定义全局ScaffoldMessengerKey
   确保在任何上下文都能调用Snackbar：

   final GlobalKey<ScaffoldMessengerState> _scaffoldMessengerKey = GlobalKey<ScaffoldMessengerState>();
   

2. 配置MaterialApp的ScaffoldMessengerKey
   将全局key绑定到MaterialApp：

   MaterialApp.router(
     scaffoldMessengerKey: _scaffoldMessengerKey,
     routerConfig: _router,
     // 其他配置...
   );
   

3. 自定义GoRouter的errorBuilder
   在errorBuilder中处理错误、显示Snackbar，并导航到指定页面：

   final GoRouter _router = GoRouter(
     routes: [
       GoRoute(
         path: '/',
         builder: (context, state) => const HomePage(),
       ),
       // 你的其他路由定义...
     ],
     errorBuilder: (context, state) {
       // 处理路由不存在的错误
       if (state.error is GoRouteError && (state.error as GoRouteError).type == GoRouteErrorType.notFound) {
         _scaffoldMessengerKey.currentState?.showSnackBar(
           const SnackBar(
             content: Text('页面不存在，请检查访问路径'),
             duration: Duration(seconds: 2),
           ),
         );
       } else {
         // 处理其他类型错误
         _scaffoldMessengerKey.currentState?.showSnackBar(
           SnackBar(
             content: Text('发生未知错误：${state.error.toString()}'),
             backgroundColor: Colors.red,
           ),
         );
       }
   
       // 延迟导航回首页（避免上下文冲突）
       WidgetsBinding.instance.addPostFrameCallback((_) {
         GoRouter.of(context).go('/');
       });
   
       // 返回空组件，完全替代默认错误页
       return const SizedBox.shrink();
     },
   );
   

注意事项 #

• 使用addPostFrameCallback延迟导航，避免在构建阶段直接调用路由跳转引发上下文异常。
• 可以根据GoRouteErrorType细分不同错误场景，比如权限不足、路由参数错误等，针对性展示Snackbar信息。

内容的提问来源于stack exchange，提问作者anonymous-dev