Overlay
Dialog
A modal dialog interrupts the user with important content and expects a response.
FDialog does not provide a built-in content layout. Generate one with the CLI or copy it from an example below, then
customize the widget directly.
CLI
To generate a specific style for customization:
dart run forui style create dialogUsage
showFDialog(...)
1showFDialog(2 context: context,3 style: const .delta(insetPadding: .value(.zero)),4 routeStyle: const .delta(motion: .delta()),5 builder: (context, style, animation) => FDialog.adaptive(6 style: style,7 animation: animation,8 horizontalBuilder: (context, style) => const Text('Horizontal content'),9 verticalBuilder: (context, style) => const Text('Vertical content'),10 ),11)FDialog(...)
1FDialog(2 style: const .delta(insetPadding: .value(.zero)),3 clipBehavior: .none,4 builder: (context, style) => const Text('Custom content'),5)FDialog.adaptive(...)
1FDialog.adaptive(2 style: const .delta(insetPadding: .value(.zero)),3 clipBehavior: .none,4 horizontalBuilder: (context, style) => const Text('Horizontal content'),5 verticalBuilder: (context, style) => const Text('Vertical content'),6)Examples
Adaptive
Lays out the actions horizontally on wider devices and vertically on smaller ones.
Default
Title
Media
Horizontal
Lays out the actions horizontally. Recommended for desktop and wider devices
default
Title
Media
Vertical
Lays out the actions vertically. Recommended for mobile devices.