I'm facing this issue as you can see in the Screen Shot,Underlying Content is not shown when dialog is open on top of the page using go_router. I used the following approach to show the overlay or dialog using go_router package.
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,
);
}
Here is my web_routes.dart file:
class WebRoutes {
static final GoRouter goRouter = GoRouter(
navigatorKey: NavigationService.navigatorKey,
initialLocation: kIsWeb ? '/' : "/login",
//'/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());
},
),}
please note: I used this approach as I want to show the url on the address bar, other genneral way is working fine.