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 ???;
  },
),

Nomen

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']),
    ),
  ),

Mandi

Wow. After looking for a while, I ended up founding the same article. And now I just found this, when I was looking for a way to add transition animation in my dialogue. Any of you have any ideas?!? – Mikaelamikal

Yeah, we have this for a sidesheet transitioning in from the right (can't past, too long for a comment here). – Mandi

@Mandi Thanks for sharing. Your solution is even cooler as it allows to define the transition type and its duration. – Figural

Does this also work for more complex route trees? i.e. What happens if the dialog is shown from a subpage/subroute? On which page will the dialog be shown? – Ardeb

If you want to use an alert dialog or other dialog in your implementation, change create route have builder:builder instead of wrapping your builder in a dialog. Wrapping it causes weird formatting. – Lemnos

This solves the issue, thanks. For those trying to keep the constraints as low as possible you can try to return ConstrainedBox(constraints: BoxConstraints(maxHeight: 200.0, maxWidth: 100),child: AlertDialog(scrollable: true,insetPadding: EdgeInsets.zero,... – Highlands

@DeveloperExtraordinare Thanks. for the suggestion. This way my dialog can be dismissed when tapping on surrounding area. – Derwin