Dialog

1@override
2Widget build(BuildContext context) => FButton(
3  variant: .outline,
4  mainAxisSize: .min,
5  onPress: () => showFDialog(
6    context: context,
7    builder: (context, style, animation) => FTheme(
8      data: theme,
9      child: FDialog(
10        style: style,
11        animation: animation,
12        direction: .horizontal,
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 remove your data from our servers.',
16        ),
17        actions: [
18          FButton(
19            variant: .outline,
20            child: const Text('Cancel'),
21            onPress: () => Navigator.of(context).pop(),
22          ),
23          FButton(
24            child: const Text('Continue'),
25            onPress: () => Navigator.of(context).pop(),
26          ),
27        ],
28      ),
29    ),
30  ),
31  child: const Text('Show Dialog'),
32);
33

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  mainAxisSize: .min,
5  onPress: () => showFDialog(
6    context: context,
7    builder: (context, style, animation) => FTheme(
8      data: theme,
9      child: FDialog(
10        style: style,
11        animation: animation,
12        direction: .horizontal,
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 remove your data from our servers.',
16        ),
17        actions: [
18          FButton(
19            variant: .outline,
20            child: const Text('Cancel'),
21            onPress: () => Navigator.of(context).pop(),
22          ),
23          FButton(
24            child: const Text('Continue'),
25            onPress: () => Navigator.of(context).pop(),
26          ),
27        ],
28      ),
29    ),
30  ),
31  child: const Text('Show Dialog'),
32);
33

Vertical Layout

We recommend using the vertical layout on mobile devices.

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

Blurred Barrier

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

On this page