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) => FTheme(
    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: 10,
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        variant: .outline,
17        size: .sm,
18        onPress: () => showFToast(
19          context: context,
20          alignment: alignment,
21          title: const Text('Event has been created'),
22          description: const Text('Friday, May 23, 2025 at 9:00 AM'),
23          suffixBuilder: (context, entry) => IntrinsicHeight(
24            child: FButton(
25              style: .delta(
26                contentStyle: .delta(
27                  padding: const .value(
28                    .symmetric(horizontal: 12, vertical: 7.5),
29                  ),
30                  textStyle: FVariants.all(
31                    context.theme.typography.xs.copyWith(
32                      color: context.theme.colors.primaryForeground,
33                    ),
34                  ),
35                ),
36              ),
37              onPress: entry.dismiss,
38              child: const Text('Undo'),
39            ),
40          ),
41        ),
42        child: Text(description),
43      ),
44  ],
45);
46

CLI

To generate a specific style for customization:

dart run forui style create toaster

dart run forui style create toasts

dart run forui style create toast

Usage

`showFToast(...)`

1showFToast(
2  context: context,
3  style: const .delta(padding: .value(.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  dismissThreshold: 0.5,
13  duration: const Duration(seconds: 5),
14  onDismiss: () {},
15)

`showRawFToast(...)`

1showRawFToast(
2  context: context,
3  style: const .delta(padding: .value(.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: .value(.all(16))),
3  child: Placeholder(),
4)

Examples

Appearance

Destructive

1@override
2Widget build(BuildContext context) => FButton(
3  variant: .outline,
4  size: .sm,
5  mainAxisSize: .min,
6  onPress: () => showFToast(
7    context: context,
8    variant: .destructive,
9    icon: const Icon(FIcons.circleX),
10    title: const Text('Something went wrong'),
11    description: const Text('There was a problem with your request.'),
12  ),
13  child: const Text('Show Toast'),
14);
15

Custom Alignment

1@override
2Widget build(BuildContext context) => FButton(
3  variant: .outline,
4  size: .sm,
5  mainAxisSize: .min,
6  onPress: () => showFToast(
7    context: context,
8    alignment: FToastAlignment(const Alignment(-0.5, 1), 1),
9    icon: const Icon(FIcons.info),
10    title: const Text('Event has been created'),
11    description: const Text('Friday, May 23, 2025 at 9:00 AM'),
12  ),
13  child: const Text('Show Toast'),
14);
15

No Auto-Dismiss

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

Raw

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

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                variant: .outline,
14                size: .sm,
15                mainAxisSize: .min,
16                onPress: () => showFToast(
17                  context: context,
18                  icon: const Icon(FIcons.info),
19                  title: const Text('Event has been created'),
20                ),
21                child: const Text('Show Toast'),
22              ),
23            ),
24          ),
25        ),
26      ),
27    ),
28  ),
29);
30

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                variant: .outline,
14                size: .sm,
15                mainAxisSize: .min,
16                onPress: () => showFToast(
17                  context: context,
18                  icon: const Icon(FIcons.info),
19                  title: const Text('Event has been created'),
20                ),
21                child: const Text('Show Toast'),
22              ),
23            ),
24          ),
25        ),
26      ),
27    ),
28  ),
29);
30

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                variant: .outline,
13                size: .sm,
14                mainAxisSize: .min,
15                onPress: () => showFToast(
16                  context: context,
17                  icon: const Icon(FIcons.info),
18                  title: const Text('Event has been created'),
19                ),
20                child: const Text('Show Toast'),
21              ),
22            ),
23          ),
24        ),
25      ),
26    ),
27  ),
28);
29

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                variant: .outline,
13                size: .sm,
14                mainAxisSize: .min,
15                onPress: () => showFToast(
16                  context: context,
17                  swipeToDismiss: [.down],
18                  icon: const Icon(FIcons.info),
19                  title: const Text('Event has been created'),
20                ),
21                child: const Text('Show Toast'),
22              ),
23            ),
24          ),
25        ),
26      ),
27    ),
28  ),
29);
30

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                variant: .outline,
13                size: .sm,
14                mainAxisSize: .min,
15                onPress: () => showFToast(
16                  context: context,
17                  swipeToDismiss: [],
18                  icon: const Icon(FIcons.info),
19                  title: const Text('Event has been created'),
20                ),
21                child: const Text('Show Toast'),
22              ),
23            ),
24          ),
25        ),
26      ),
27    ),
28  ),
29);
30

On this page