showDialog<T> function

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

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