Toast Widget

Estimated reading: 4 minutes 28 views

Toast notifications in FlutKit provide lightweight, non-intrusive feedback to users. They are commonly used to display system messages, alerts, confirmations, or activity updates without interrupting the user’s workflow.

FlutKit provides two toast variants:

Toast — general-purpose toast messages
NotificationToast — rich notification-style toasts with avatar support

Default Toast

Overview

Toast is a simple and flexible notification widget used to display short messages such as:

Success or error messages
Informational alerts
Action confirmations

It supports icons, colors, progress indicators, positioning, and auto-dismiss behavior.

Basic Example

Dart

Toast.showToast(
  context: context,
  icon: Icons.info_outline,
  message: 'This is a primary message!',
  color: kPrimaryColor,
  alignment: Alignment.topRight,
);

Toast.showToast(
  context: context,
  icon: Icons.info_outline,
  message: 'This is a primary message!',
  color: kPrimaryColor,
  alignment: Alignment.topRight,
);

Constructor

Dart

showToast({
  required BuildContext context,
  required String message,
  required IconData icon,
  bool showCloseButton = false,
  bool bottomBorder = false,
  bool showProgress = false,
  Duration duration = const Duration(seconds: 3),
  Alignment alignment = Alignment.topRight,
  Color? color,
  double width = 300,
  bool singleToast = true,
})

showToast({
  required BuildContext context,
  required String message,
  required IconData icon,
  bool showCloseButton = false,
  bool bottomBorder = false,
  bool showProgress = false,
  Duration duration = const Duration(seconds: 3),
  Alignment alignment = Alignment.topRight,
  Color? color,
  double width = 300,
  bool singleToast = true,
})

Parameters Explanation

Parameter	Description
`context`	BuildContext required to display the toast
`message`	Text message shown inside the toast
`icon`	Icon displayed next to the message
`color`	Background or accent color of the toast
`showCloseButton`	Displays a close (dismiss) button
`bottomBorder`	Adds a colored border at the bottom
`showProgress`	Shows a progress bar indicating remaining time
`duration`	How long the toast stays visible
`alignment`	Position of the toast on the screen
`width`	Width of the toast container
`singleToast`	Ensures only one toast is visible at a time

Common Use Cases

Showing form submission status
Displaying validation feedback
Informing users about background actions
Lightweight alerts without blocking UI

Notification Toast

Overview

NotificationToast is a richer toast variant designed for activity-based notifications. It supports avatars and HTML-formatted messages, making it ideal for collaboration or system activity updates.

Typical use cases include:

Task updates
User actions
System events with context

Basic Example

Dart

NotificationToast.showToast(
  context: context,
  message:
      "<b>Prepare design mockups</b> was marked as complete by <b>John Marston</b>",
  icon: Icons.code,
  iconColor: kErrorColor,
  avatarUrl:
      "https://example.com/images/avatar_2.jpg",
  width: 360,
);

NotificationToast.showToast(
  context: context,
  message:
      "<b>Prepare design mockups</b> was marked as complete by <b>John Marston</b>",
  icon: Icons.code,
  iconColor: kErrorColor,
  avatarUrl:
      "https://example.com/images/avatar_2.jpg",
  width: 360,
);

Constructor

Dart

showToast({
  required BuildContext context,
  required String avatarUrl,
  required String message,
  required IconData icon,
  bool showCloseButton = true,
  Duration duration = const Duration(seconds: 3),
  Alignment alignment = Alignment.topRight,
  Color? iconColor,
  double width = 320,
  bool singleToast = true,
})

showToast({
  required BuildContext context,
  required String avatarUrl,
  required String message,
  required IconData icon,
  bool showCloseButton = true,
  Duration duration = const Duration(seconds: 3),
  Alignment alignment = Alignment.topRight,
  Color? iconColor,
  double width = 320,
  bool singleToast = true,
})

Parameters Explanation

Parameter	Description
`context`	BuildContext required to display the toast
`avatarUrl`	URL of the avatar image displayed
`message`	HTML-formatted notification message
`icon`	Icon representing the notification type
`iconColor`	Color of the notification icon
`showCloseButton`	Allows manual dismissal
`duration`	Auto-dismiss duration
`alignment`	Position on the screen
`width`	Width of the notification toast
`singleToast`	Prevents multiple toasts stacking

Tip: You can find more usage patterns and visual references directly inside the FlutKit demo under the Toasts section.

Dart

Base UI → Toasts

Base UI → Toasts

Best Practices

Use Toast for quick, system-level feedback
Use NotificationToast for user-driven or activity-based events
Keep messages concise and readable
Avoid excessive toast stacking; enable singleToast when appropriate
Position toasts consistently (e.g., top-right for dashboards)

Summary

FlutKit’s toast system provides both simple and rich notification patterns to handle user feedback and activity updates efficiently.
By choosing the appropriate toast type, developers can improve UX clarity without disrupting the application flow.

Both toast variants are lightweight, customizable, and designed to integrate seamlessly with dashboard-style applications.