showDialog<T> function

Future<T?> showDialog<T>({
  1. required BuildContext context,
  2. required WidgetBuilder builder,
  3. bool useRootNavigator = true,
  4. bool barrierDismissible = true,
  5. Color? barrierColor,
  6. String? barrierLabel,
  7. bool useSafeArea = true,
  8. RouteSettings? routeSettings,
  9. Offset? anchorPoint,
  10. TraversalEdgeBehavior? traversalEdgeBehavior,
  11. AlignmentGeometry? alignment,
  12. bool fullScreen = false,
})

Displays a dialog using the shadcn_flutter design system.

Shows a modal dialog with consistent styling and animation behavior. The dialog is displayed over the current route and blocks interaction with the content below. Supports both centered and full-screen modes.

Features:

  • Consistent design system integration
  • Smooth scale and fade animations
  • Configurable alignment and barriers
  • Theme and data inheritance
  • Safe area handling
  • Custom transition animations

Parameters:

  • context (BuildContext, required): build context for navigation
  • builder (WidgetBuilder, required): function that builds dialog content
  • useRootNavigator (bool, default: true): whether to use root navigator
  • barrierDismissible (bool, default: true): tap outside to dismiss
  • barrierColor (Color?, optional): color of the backdrop barrier
  • barrierLabel (String?, optional): semantic label for the barrier
  • useSafeArea (bool, default: true): respect device safe areas
  • routeSettings (RouteSettings?, optional): settings for the route
  • anchorPoint (Offset?, optional): anchor point for transitions
  • traversalEdgeBehavior (TraversalEdgeBehavior?, optional): focus traversal
  • alignment (AlignmentGeometry?, optional): dialog alignment, defaults to center
  • fullScreen (bool, default: false): whether to display in full-screen mode

Returns: A Future that resolves to the result passed to Navigator.pop.

Example:

final result = await showDialog<String>(
  context: context,
  builder: (context) => AlertDialog(
    title: Text('Confirm'),
    content: Text('Are you sure?'),
    actions: [
      TextButton(
        onPressed: () => Navigator.pop(context, 'cancel'),
        child: Text('Cancel'),
      ),
      TextButton(
        onPressed: () => Navigator.pop(context, 'ok'),
        child: Text('OK'),
      ),
    ],
  ),
);

Implementation

Future<T?> showDialog<T>({
  required BuildContext context,
  required WidgetBuilder builder,
  bool useRootNavigator = true,
  bool barrierDismissible = true,
  Color? barrierColor,
  String? barrierLabel,
  bool useSafeArea = true,
  RouteSettings? routeSettings,
  Offset? anchorPoint,
  TraversalEdgeBehavior? traversalEdgeBehavior,
  AlignmentGeometry? alignment,
  bool fullScreen = false,
}) {
  $shadEvent?.onDialogOpened(context);
  builder = Pylon.mirror(context, builder);
  var navigatorState = Navigator.of(
    context,
    rootNavigator: useRootNavigator,
  );
  final CapturedThemes themes =
      InheritedTheme.capture(from: context, to: navigatorState.context);
  final CapturedData data =
      Data.capture(from: context, to: navigatorState.context);
  var dialogRoute = DialogRoute<T>(
    context: context,
    builder: (context) {
      return _DialogOverlayWrapper(
        route: ModalRoute.of(context) as DialogRoute<T>,
        child: Builder(builder: (context) {
          return builder(context);
        }),
      );
    },
    themes: themes,
    barrierDismissible: barrierDismissible,
    barrierColor: barrierColor ?? const Color.fromRGBO(0, 0, 0, 0),
    barrierLabel: barrierLabel,
    useSafeArea: useSafeArea,
    settings: routeSettings,
    anchorPoint: anchorPoint,
    data: data,
    traversalEdgeBehavior:
        traversalEdgeBehavior ?? TraversalEdgeBehavior.closedLoop,
    transitionBuilder: (context, animation, secondaryAnimation, child) {
      return _buildShadcnDialogTransitions(
        context,
        BorderRadius.zero,
        alignment ?? Alignment.center,
        animation,
        secondaryAnimation,
        fullScreen,
        child,
      );
    },
    alignment: alignment ?? Alignment.center,
  );
  return navigatorState.push(
    dialogRoute,
  );
}