How Do I Show a Dialog in Flutter Using a go_router Route?

Question

I am currently using showGeneralDialog to present a dialog popup like this:

This is all fine and good, but it happens at the root Navigator level, and I would rather have all my views as a Go Router route so that I can control their presentation in the same way throughout my app.

How can I use something like showGeneralDialog upon calling a route?

GoRoute(
  path: '/settings',
  pageBuilder: (context, state) {
    return ???;
  },
),

Answer 1

Had the same question, found https://croxx5f.hashnode.dev/adding-modal-routes-to-your-gorouter which works well enough for me. Extended its builder by wrapping it in a Dialog.

This is what it looks like for me in the end:

// dialogpage.dart
import 'package:flutter/material.dart';

class DialogPage<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 DialogPage({
    required this.builder,
    this.anchorPoint,
    this.barrierColor = Colors.black87,
    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(
          child: builder(context),
        ),
        anchorPoint: anchorPoint,
        barrierColor: barrierColor,
        barrierDismissible: barrierDismissible,
        barrierLabel: barrierLabel,
        useSafeArea: useSafeArea,
        themes: themes,
      );
}

and used like this:

  GoRoute(
    name: 'bug-report',
    path: '/bug_report',
    pageBuilder: (context, state) => DialogPage(
      builder: (_) => BugReportPage(imagePath: state.queryParams['screenshot']),
    ),
  ),