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: FTheme.neutral.light.touch,
    child: FToaster(child: child!),
  ),
  home: HomePage(),
);

CLI

To generate a specific style for customization:

dart run forui style create toaster

Usage

`showFToast(...)`

1showFToast(
2  context: context,
3  style: const .delta(padding: .value(.all(16))),
4  icon: const Icon(FLucideIcons.info),
5  title: const Text('Title'),
6  description: const Text('Description'),
7  suffixBuilder: (context, entry) =>
8      GestureDetector(onTap: entry.dismiss, child: const Icon(FLucideIcons.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  clipBehavior: .none,
4  icon: Icon(FLucideIcons.info),
5  title: Text('Title'),
6  description: Text('Description'),
7  suffix: Icon(FLucideIcons.x),
8)

`FToaster(...)`

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

Examples

Appearance

Destructive

Custom Alignment

No Auto-Dismiss

Raw

Behavior

Always Expanded

Expansion Disabled

Swipe to Dismiss

Default

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

CLI