使用go_router打开Dialog时底层内容无法显示的问题求助

问题场景 #

通过自定义DialogScreen继承Page，结合go_router展示弹窗（目的是让地址栏对应弹窗URL），但弹窗打开后，底层页面内容完全无法显示。

提供的代码 #

DialogScreen类实现 #

class DialogScreen<T> extends Page<T> {
  final Offset? anchorPoint;
  final Color? barrierColor;
  final bool barrierDismissible;
  final String? barrierLabel;
  final bool useSafeArea;
  final CapturedThemes? themes;
  final WidgetBuilder builder;

  const DialogScreen({
    required this.builder,
    this.anchorPoint,
    this.barrierColor = Colors.black54,
    this.barrierDismissible = true,
    this.barrierLabel,
    this.useSafeArea = true,
    this.themes,
    super.key,
    super.name,
    super.arguments,
    super.restorationId,
  });

  @override
  Route<T> createRoute(BuildContext context) => DialogRoute<T>(
        context: context,
        settings: this,
        builder: (context) => Dialog(
          backgroundColor: Colors.transparent,
          child: builder(context),
        ),
        anchorPoint: anchorPoint,
        barrierColor: barrierColor,
        barrierDismissible: barrierDismissible,
        barrierLabel: barrierLabel,
        useSafeArea: useSafeArea,
        themes: themes,
      );
}

WebRoutes路由配置 #

class WebRoutes {
  static final GoRouter goRouter = GoRouter(
    navigatorKey: NavigationService.navigatorKey,
    initialLocation: kIsWeb ? '/' : "/login",
    debugLogDiagnostics: true,
    routes: [
      GoRoute(
        name: "testDialog",
        path: '/testDialog',
        pageBuilder: (BuildContext context, GoRouterState state) {
          return DialogScreen(
            barrierColor: Colors.transparent,
            barrierDismissible: true,
            builder: (context) => const TestScreen(),
          );
        },
      ),
    ],
  );
}

解决方法 #

1. 改用push方式导航到弹窗路由 #

如果之前使用context.go('/testDialog')，会直接替换整个导航栈，导致原有页面被销毁，底层内容自然无法显示。改为使用push方法，保留原有页面在栈中：

// 替换原导航代码
context.push('/testDialog');

2. 显式设置维护底层页面状态 #

可以在DialogRoute中显式设置maintainState: true，加固状态保留的配置（默认已有该行为，显式设置可避免特殊场景下的异常）：

@override
Route<T> createRoute(BuildContext context) => DialogRoute<T>(
      context: context,
      settings: this,
      builder: (context) => Dialog(
        backgroundColor: Colors.transparent,
        child: builder(context),
      ),
      anchorPoint: anchorPoint,
      barrierColor: barrierColor,
      barrierDismissible: barrierDismissible,
      barrierLabel: barrierLabel,
      useSafeArea: useSafeArea,
      themes: themes,
      maintainState: true, // 显式保留底层页面状态
    );

3. 检查弹窗内容布局 #

确保弹窗内容没有覆盖整个屏幕，且背景不会完全遮挡底层页面：

class TestScreen extends StatelessWidget {
  const TestScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 300,
        height: 200,
        color: Colors.white,
        padding: const EdgeInsets.all(16),
        child: const Text("弹窗内容"),
      ),
    );
  }
}

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