How to implement Sheet / Dialog route with GoRouter?

[ahey]

Given the following routes (using go router):

/accounts
/accounts/new

When the user navigates to the accounts/new route I want to show the new account sheet on top of the accounts page. On desktop I want to show the new account modal on top of the accounts page. It should work with back / forward buttons, and the animations should work properly.

Any ideas as to how I could implement this?

[Pante]

For modals, you will probably want tow wrap the modal in https://api.flutter.dev/flutter/material/showAdaptiveDialog.html or a similar Cupterinto/Material variant, and pass in a RouteSettings with your custom route.

For sheets, you probably want to call https://pub.dev/documentation/forui/latest/forui.widgets.sheet/showFSheet.html, and pass in a RouteSettings with your custom route.

[ahey]

Thanks, I was able to get this working well – here's what I ended up with:

GoRoute(
  path: '/accounts',
  // ...
  routes: [
    GoRoute(
      path: 'new',
      parentNavigatorKey: _rootNavigatorKey, // display the dialog on top of the FBottomNavigationBar
      pageBuilder: (context, state) {
        return SheetPage<void>(
          side: FLayout.btt,
          builder: (context) => const AccountsNewPage(),
        );
        
        // or for a modal dialog:
        //
        // return DialogPage<void>(
        //   builder: (context) => const AccountsNewPage(),
        // );
      },
    ),
  ],
),

import 'package:flutter/widgets.dart';
import 'package:forui/forui.dart';

class SheetPage<T> extends Page<T> {
  final WidgetBuilder builder;
  final FLayout side;
  final bool useRootNavigator;
  final FSheetStyle? style;
  final double? mainAxisMaxRatio;
  final String? barrierLabel;
  final bool barrierDismissible;
  final BoxConstraints constraints;
  final bool draggable;
  final AnimationController? transitionAnimationController;
  final Offset? anchorPoint;
  final bool useSafeArea;

  const SheetPage({
    required this.builder,
    required this.side,
    this.useRootNavigator = true,
    this.style,
    this.mainAxisMaxRatio = 9 / 16,
    this.barrierLabel,
    this.barrierDismissible = true,
    this.constraints = const BoxConstraints(),
    this.draggable = true,
    this.transitionAnimationController,
    this.anchorPoint,
    this.useSafeArea = false,
    super.key,
    super.name,
    super.arguments,
    super.restorationId,
  });

  @override
  Route<T> createRoute(BuildContext context) {
    final navigator = Navigator.of(context, rootNavigator: useRootNavigator);
    final localizations = FLocalizations.of(context) ?? FDefaultLocalizations();

    return FModalSheetRoute<T>(
      style: style ?? context.theme.sheetStyle,
      side: side,
      builder: builder,
      mainAxisMaxRatio: mainAxisMaxRatio,
      capturedThemes:
          InheritedTheme.capture(from: context, to: navigator.context),
      barrierOnTapHint:
          localizations.barrierOnTapHint(localizations.sheetLabel),
      barrierLabel: barrierLabel ?? localizations.barrierLabel,
      barrierDismissible: barrierDismissible,
      barrierColor: (style ?? context.theme.sheetStyle).barrierColor,
      constraints: constraints,
      draggable: draggable,
      settings: this,
      transitionAnimationController: transitionAnimationController,
      anchorPoint: anchorPoint,
      useSafeArea: useSafeArea,
    );
  }
}

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

class DialogPage<T> extends Page<T> {
  final WidgetBuilder builder;
  final bool useRootNavigator;
  final FDialogStyle? style;
  final String? barrierLabel;
  final bool barrierDismissible;
  final bool useSafeArea;
  final Offset? anchorPoint;
  final Duration insetAnimationDuration;
  final Curve insetAnimationCurve;
  final Color? barrierColor;

  const DialogPage({
    required this.builder,
    this.useRootNavigator = true,
    this.style,
    this.barrierLabel,
    this.barrierDismissible = true,
    this.useSafeArea = true,
    this.anchorPoint,
    this.insetAnimationDuration = const Duration(milliseconds: 100),
    this.insetAnimationCurve = Curves.decelerate,
    this.barrierColor,
    super.key,
    super.name,
    super.arguments,
    super.restorationId,
  });

  @override
  Route<T> createRoute(BuildContext context) {
    final navigator = Navigator.of(context, rootNavigator: useRootNavigator);
    final localizations = FLocalizations.of(context) ?? FDefaultLocalizations();

    return DialogRoute<T>(
      context: context,
      settings: this,
      builder: (context) => FDialog.raw(
        style: style ?? context.theme.dialogStyle,
        insetAnimationDuration: insetAnimationDuration,
        insetAnimationCurve: insetAnimationCurve,
        builder: (_, __) => builder(context),
      ),
      barrierColor: barrierColor ?? Colors.black54,
      barrierDismissible: barrierDismissible,
      barrierLabel: barrierLabel ?? localizations.barrierLabel,
      useSafeArea: useSafeArea,
      anchorPoint: anchorPoint,
      themes: InheritedTheme.capture(from: context, to: navigator.context),
    );
  }
}