Dialog

1@override
2Widget build(BuildContext context) => FButton(
3  variant: .outline,
4  size: .sm,
5  mainAxisSize: .min,
6  onPress: () => showFDialog(
7    context: context,
8    builder: (context, style, animation) => FTheme(
9      data: theme,
10      child: FDialog(
11        style: style,
12        animation: animation,
13        direction: .horizontal,
14        title: const Text('Are you absolutely sure?'),
15        body: const Text(
16          'This action cannot be undone. This will permanently delete your account and '
17          'remove your data from our servers.',
18        ),
19        actions: [
20          FButton(
21            size: .sm,
22            child: const Text('Continue'),
23            onPress: () => Navigator.of(context).pop(),
24          ),
25          FButton(
26            variant: .outline,
27            size: .sm,
28            child: const Text('Cancel'),
29            onPress: () => Navigator.of(context).pop(),
30          ),
31        ],
32      ),
33    ),
34  ),
35  child: const Text('Show Dialog'),
36);
37

CLI

To generate and customize this style:

dart run forui style create dialog

Usage

`showFDialog(...)`

1showFDialog(
2  context: context,
3  style: const .delta(insetPadding: .zero),
4  routeStyle: const .delta(motion: .delta()),
5  builder: (context, style, animation) => FDialog(
6    style: style,
7    animation: animation,
8    title: const Text('Title'),
9    body: const Text('Body'),
10    actions: [
11      FButton(
12        onPress: () => Navigator.of(context).pop(),
13        child: const Text('Close'),
14      ),
15    ],
16  ),
17)

`FDialog(...)`

1FDialog(
2  style: const .delta(insetPadding: .zero),
3  title: const Text('Title'),
4  body: const Text('Body'),
5  actions: [FButton(onPress: () {}, child: const Text('Action'))],
6)

`FDialog.adaptive(...)`

1FDialog.adaptive(
2  style: const .delta(insetPadding: .zero),
3  title: const Text('Title'),
4  body: const Text('Body'),
5  actions: [FButton(onPress: () {}, child: const Text('Action'))],
6)

`FDialog.raw(...)`

1FDialog.raw(
2  style: const .delta(insetPadding: .zero),
3  builder: (context, style) => const Text('Custom content'),
4)

Examples

Horizontal Layout

1@override
2Widget build(BuildContext context) => FButton(
3  variant: .outline,
4  size: .sm,
5  mainAxisSize: .min,
6  onPress: () => showFDialog(
7    context: context,
8    builder: (context, style, animation) => FTheme(
9      data: theme,
10      child: FDialog(
11        style: style,
12        animation: animation,
13        direction: .horizontal,
14        title: const Text('Are you absolutely sure?'),
15        body: const Text(
16          'This action cannot be undone. This will permanently delete your account and '
17          'remove your data from our servers.',
18        ),
19        actions: [
20          FButton(
21            size: .sm,
22            child: const Text('Continue'),
23            onPress: () => Navigator.of(context).pop(),
24          ),
25          FButton(
26            variant: .outline,
27            size: .sm,
28            child: const Text('Cancel'),
29            onPress: () => Navigator.of(context).pop(),
30          ),
31        ],
32      ),
33    ),
34  ),
35  child: const Text('Show Dialog'),
36);
37

Vertical Layout

We recommend using the vertical layout on mobile devices.

1@override
2Widget build(BuildContext context) => FButton(
3  variant: .outline,
4  size: .sm,
5  mainAxisSize: .min,
6  onPress: () => showFDialog(
7    context: context,
8    builder: (context, style, animation) => FTheme(
9      data: theme,
10      child: FDialog(
11        style: style,
12        animation: animation,
13        title: const Text('Are you absolutely sure?'),
14        body: const Text(
15          'This action cannot be undone. This will permanently delete your account and '
16          'remove your data from our servers.',
17        ),
18        actions: [
19          FButton(
20            size: .sm,
21            child: const Text('Continue'),
22            onPress: () => Navigator.of(context).pop(),
23          ),
24          FButton(
25            variant: .outline,
26            size: .sm,
27            child: const Text('Cancel'),
28            onPress: () => Navigator.of(context).pop(),
29          ),
30        ],
31      ),
32    ),
33  ),
34  child: const Text('Show Dialog'),
35);
36

Blurred Barrier

1@override
2Widget build(BuildContext context) => FButton(
3  variant: .outline,
4  size: .sm,
5  mainAxisSize: .min,
6  onPress: () => showFDialog(
7    context: context,
8    routeStyle: .delta(
9      barrierFilter: () =>
10          (animation) => ImageFilter.compose(
11            outer: ImageFilter.blur(
12              sigmaX: animation * 5,
13              sigmaY: animation * 5,
14            ),
15            inner: ColorFilter.mode(context.theme.colors.barrier, .srcOver),
16          ),
17    ),
18    builder: (context, style, animation) => FTheme(
19      data: theme,
20      child: FDialog(
21        style: style,
22        animation: animation,
23        title: const Text('Are you absolutely sure?'),
24        body: const Text(
25          'This action cannot be undone. This will permanently delete your account and '
26          'remove your data from our servers.',
27        ),
28        actions: [
29          FButton(
30            size: .sm,
31            child: const Text('Continue'),
32            onPress: () => Navigator.of(context).pop(),
33          ),
34          FButton(
35            size: .sm,
36            variant: .outline,
37            child: const Text('Cancel'),
38            onPress: () => Navigator.of(context).pop(),
39          ),
40        ],
41      ),
42    ),
43  ),
44  child: const Text('Show Dialog'),
45);
46

On this page