5

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

enter image description here

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 ???;
  },
),
Clifton Labrum
  • 13,053
  • 9
  • 65
  • 128

1 Answers1

7

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']),
    ),
  ),
gnunicorn
  • 86
  • 1
  • 2
  • 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?!? – Hippo Fish Jul 07 '23 at 15:35
  • Yeah, we have [this for a sidesheet transitioning in from the right](https://github.com/acterglobal/a3/blob/81f07466c9f98fcd65f667a2eb4aae4dc75fb597/app/lib/router/router.dart#L134-L156) (can't past, too long for a comment here). – gnunicorn Jul 11 '23 at 09:16