Toast

To show a toast, use the showFToast(...) or showRawFToast(...) functions. The function must be called from a descendant of a FToaster.

We recommend placing FToaster in the builder method of MaterialApp/WidgetsApp/CupertinoApp:

MaterialApp(
  builder: (context, child) => FAnimatedTheme(
    data: FThemes.neutral.light,
    child: FToaster(child: child!),
  ),
  home: HomePage(),
);

1@override
2Widget build(BuildContext context) => Column(
3  mainAxisSize: .min,
4  mainAxisAlignment: .center,
5  spacing: 5,
6  children: [
7    for (final (FToastAlignment alignment, description) in [
8      (.topLeft, 'Top Left'),
9      (.topCenter, 'Top Center'),
10      (.topRight, 'Top Right'),
11      (.bottomLeft, 'Bottom Left'),
12      (.bottomCenter, 'Bottom Center'),
13      (.bottomRight, 'Bottom Right'),
14    ])
15      FButton(
16        onPress: () => showFToast(
17          context: context,
18          alignment: alignment,
19          title: const Text('Event has been created'),
20          description: const Text('Friday, May 23, 2025 at 9:00 AM'),
21          suffixBuilder: (context, entry) => IntrinsicHeight(
22            child: FButton(
23              style: .delta(
24                contentStyle: .delta(
25                  padding: const .symmetric(horizontal: 12, vertical: 7.5),
26                  textStyle: .value(
27                    .all(
28                      context.theme.typography.xs.copyWith(
29                        color: context.theme.colors.primaryForeground,
30                      ),
31                    ),
32                  ),
33                ),
34              ),
35              onPress: entry.dismiss,
36              child: const Text('Undo'),
37            ),
38          ),
39        ),
40        child: Text('Show $description Toast'),
41      ),
42  ],
43);
44

CLI

To generate and customize this style:

dart run forui style create toast

Usage

`showFToast(...)`

1showFToast(
2  context: context,
3  style: const .delta(padding: .all(16)),
4  icon: const Icon(FIcons.info),
5  title: const Text('Title'),
6  description: const Text('Description'),
7  suffixBuilder: (context, entry) =>
8      GestureDetector(onTap: entry.dismiss, child: const Icon(FIcons.x)),
9  // {@category "Behavior"}
10  alignment: .bottomEnd,
11  swipeToDismiss: const [.right],
12  duration: const Duration(seconds: 5),
13  onDismiss: () {},
14)

`showRawFToast(...)`

1showRawFToast(
2  context: context,
3  style: const .delta(padding: .all(16)),
4  builder: (context, entry) => const Text('Custom toast content'),
5)

`FToast(...)`

1FToast(
2  style: .delta(titleSpacing: 5),
3  icon: Icon(FIcons.info),
4  title: Text('Title'),
5  description: Text('Description'),
6  suffix: Icon(FIcons.x),
7)

`FToaster(...)`

1FToaster(
2  style: .delta(padding: .all(16)),
3  child: Placeholder(),
4)

Examples

Appearance

No Auto-Dismiss

1@override
2Widget build(BuildContext context) => FButton(
3  mainAxisSize: .min,
4  onPress: () => showFToast(
5    context: context,
6    duration: null,
7    icon: const Icon(FIcons.triangleAlert),
8    title: const Text('Event start time cannot be earlier than 8am'),
9  ),
10  child: const Text('Show Toast'),
11);
12

Raw

1@override
2Widget build(BuildContext context) => FButton(
3  mainAxisSize: .min,
4  onPress: () => showRawFToast(
5    context: context,
6    duration: null,
7    builder: (context, toast) => IntrinsicHeight(
8      child: FCard(
9        style: .delta(
10          contentStyle: .delta(
11            titleTextStyle: .value(
12              context.theme.typography.sm.copyWith(
13                color: context.theme.colors.primary,
14                fontWeight: .w600,
15              ),
16            ),
17          ),
18        ),
19        title: const Text('Event has been created'),
20        subtitle: const Padding(
21          padding: .symmetric(vertical: 5),
22          child: Text(
23            'This is a more detailed description that provides comprehensive context and additional information '
24            'about the notification, explaining what happened and what the user might expect next.',
25          ),
26        ),
27        child: FButton(
28          onPress: () => toast.dismiss(),
29          child: const Text('undo'),
30        ),
31      ),
32    ),
33  ),
34  child: const Text('Show Toast'),
35);
36

Behavior

Always Expanded

1@override
2Widget build(BuildContext context) => FTheme(
3  data: theme,
4  child: FToaster(
5    style: const .delta(expandBehavior: .always),
6    child: FScaffold(
7      child: Align(
8        child: ConstrainedBox(
9          constraints: const BoxConstraints(maxWidth: 400),
10          child: Builder(
11            builder: (context) => Center(
12              child: FButton(
13                mainAxisSize: .min,
14                onPress: () => showFToast(
15                  context: context,
16                  icon: const Icon(FIcons.info),
17                  title: const Text('Event has been created'),
18                ),
19                child: const Text('Show Toast'),
20              ),
21            ),
22          ),
23        ),
24      ),
25    ),
26  ),
27);
28

Expansion Disabled

1@override
2Widget build(BuildContext context) => FTheme(
3  data: theme,
4  child: FToaster(
5    style: const .delta(expandBehavior: .disabled),
6    child: FScaffold(
7      child: Align(
8        child: ConstrainedBox(
9          constraints: const BoxConstraints(maxWidth: 400),
10          child: Builder(
11            builder: (context) => Center(
12              child: FButton(
13                mainAxisSize: .min,
14                onPress: () => showFToast(
15                  context: context,
16                  icon: const Icon(FIcons.info),
17                  title: const Text('Event has been created'),
18                ),
19                child: const Text('Show Toast'),
20              ),
21            ),
22          ),
23        ),
24      ),
25    ),
26  ),
27);
28

Swipe to Dismiss

Default

By default, toasts are dismissible by horizontally swiping towards the closest edge of the screen.

1@override
2Widget build(BuildContext _) => FTheme(
3  data: theme,
4  child: FToaster(
5    child: FScaffold(
6      child: Align(
7        child: ConstrainedBox(
8          constraints: const BoxConstraints(maxWidth: 400),
9          child: Builder(
10            builder: (context) => Center(
11              child: FButton(
12                mainAxisSize: .min,
13                onPress: () => showFToast(
14                  context: context,
15                  icon: const Icon(FIcons.info),
16                  title: const Text('Event has been created'),
17                ),
18                child: const Text('Show Toast'),
19              ),
20            ),
21          ),
22        ),
23      ),
24    ),
25  ),
26);
27

Down

1@override
2Widget build(BuildContext _) => FTheme(
3  data: theme,
4  child: FToaster(
5    child: FScaffold(
6      child: Align(
7        child: ConstrainedBox(
8          constraints: const BoxConstraints(maxWidth: 400),
9          child: Builder(
10            builder: (context) => Center(
11              child: FButton(
12                mainAxisSize: .min,
13                onPress: () => showFToast(
14                  context: context,
15                  swipeToDismiss: [.down],
16                  icon: const Icon(FIcons.info),
17                  title: const Text('Event has been created'),
18                ),
19                child: const Text('Show Toast'),
20              ),
21            ),
22          ),
23        ),
24      ),
25    ),
26  ),
27);
28

Disabled

1@override
2Widget build(BuildContext _) => FTheme(
3  data: theme,
4  child: FToaster(
5    child: FScaffold(
6      child: Align(
7        child: ConstrainedBox(
8          constraints: const BoxConstraints(maxWidth: 400),
9          child: Builder(
10            builder: (context) => Center(
11              child: FButton(
12                mainAxisSize: .min,
13                onPress: () => showFToast(
14                  context: context,
15                  swipeToDismiss: [],
16                  icon: const Icon(FIcons.info),
17                  title: const Text('Event has been created'),
18                ),
19                child: const Text('Show Toast'),
20              ),
21            ),
22          ),
23        ),
24      ),
25    ),
26  ),
27);
28

On this page