Skip to Content
Forui 0.12.0 is released 🎉
DocumentationOverlayDialog

Dialog

A modal dialog interrupts the user with important content and expects a response.

API Reference

CLI

To generate and customize this style:

dart run forui style create dialog

Usage

showFDialog(...)

showFDialog<T>(
  context: context,
  builder: (context, style, animation) => FDialog(...),
  useRootNavigator: false,
  style: FDialogStyle(...),
  barrierLabel: 'Label',
  barrierDismissible: true,
  routeSettings: RouteSettings(...),
  transitionAnimationController: AnimationController(...),
  anchorPoint: Offset.zero,
  useSafeArea: false,
);

FDialog(...)

FDialog(
  style: FDialogStyle(...),
  animation: Animation<double>(...),
  direction: Axis.horizontal,
  title: const Text('Are you absolutely sure?'),
  body: const Text('This action cannot be undone. This will permanently delete your account and remove your data from our servers.'),
  actions: [
    FButton(style: FButtonStyle.outline, onPress: () => Navigator.of(context).pop(), child: const Text('Cancel')),
    FButton(onPress: () => Navigator.of(context).pop(), child: const Text('Continue')),
  ],
);

FDialog.adaptive(...)

FDialog.adaptive(
  style: FDialogStyle(...),
  animation: Animation<double>(...),
  title: const Text('Are you absolutely sure?'),
  body: const Text('This action cannot be undone. This will permanently delete your account and remove your data from our servers.'),
  actions: [
    FButton(style: FButtonStyle.outline, onPress: () => Navigator.of(context).pop(), child: const Text('Cancel')),
    FButton(onPress: () => Navigator.of(context).pop(), child: const Text('Continue')),
  ],
);

FDialog.raw(...)

FDialog.raw(
  style: FDialogStyle(...),
  animation: Animation<double>(...),
  builder: (context, style) => const Placeholder(),
);

Examples

Horizontal Layout

Vertical Layout

We recommend using the vertical layout on mobile devices.

Blurred Barrier

Last updated on
ProgressSheet