Alert Widget

The Alert widget is a flexible notification component used to display important messages, warnings, confirmations, or contextual information to users. It supports rich HTML content, multiple visual styles, and optional icons to match different UI and UX needs.

Common Use Cases

The Alert widget is commonly used for:

• Displaying success, warning, error, or informational messages
• Showing system notifications or announcements
• Highlighting important instructions or reminders
• Presenting inline feedback within forms or dashboards
• Emphasizing contextual messages without blocking user interaction

Unlike dialogs or snackbars, alerts are persistent and visible within the layout.

Constructor

Alert({
  Key? key,
  required String htmlContent,
  required Color kColor,
  bool isBordered = true,
  bool isDismissible = false,
  bool isOutlined = false,
  bool isSolid = false,
  IconData? kIcon,
})

Alert({
  Key? key,
  required String htmlContent,
  required Color kColor,
  bool isBordered = true,
  bool isDismissible = false,
  bool isOutlined = false,
  bool isSolid = false,
  IconData? kIcon,
})

Parameters

htmlContent (required)

required String htmlContent,

Defines the alert message using HTML formatting.

You can use basic HTML tags such as:

• <b> for bold text
• <i> for italic text
• <a> for links
• <br> for line breaks

This allows richer content compared to plain text alerts.

kColor (required)

required Color kColor,

required Color kColor,

Primary color of the alert.

This color is used to determine:

• Border color
• Icon color
• Background color (when isSolid is enabled)

isBordered

bool isBordered = true,

bool isBordered = true,

Controls whether the alert displays a colored border.

• true: shows a border (default)
• false: removes the border

isDismissible

bool isDismissible = false,

bool isDismissible = false,

Allows the alert to be dismissed by the user.

When enabled, a close icon appears, allowing users to remove the alert from view.

isOutlined

bool isOutlined = false,

bool isOutlined = false,

Renders the alert with a transparent background and a colored outline.

This style is suitable for minimal or non-intrusive alerts.

isSolid

bool isSolid = false,

bool isSolid = false,

Displays the alert with a solid background color.

Typically used for:

• High-visibility messages
• Critical warnings
• Strong call-to-action messages

Note: Avoid enabling both isOutlined and isSolid at the same time.

kIcon

IconData? kIcon,

IconData? kIcon,

Optional icon displayed at the start of the alert.

Use icons to quickly communicate the alert’s intent (e.g., info, warning, error).

Usage Example

Basic usage

Alert(
  htmlContent:
      "<b>Hi!</b> A simple <b>primary alert</b> — check it out!",
  kColor: kPrimaryColor,
),

Alert(
  htmlContent:
      "<b>Hi!</b> A simple <b>primary alert</b> — check it out!",
  kColor: kPrimaryColor,
),

This example creates a basic bordered alert with formatted text and a primary color.

Dismissible Alert with Icon

Alert(
  htmlContent: "Your changes have been saved successfully.",
  kColor: kSuccessColor,
  kIcon: Icons.check_circle,
  isDismissible: true,
),

Alert(
  htmlContent: "Your changes have been saved successfully.",
  kColor: kSuccessColor,
  kIcon: Icons.check_circle,
  isDismissible: true,
),

Outlined Warning Alert

Alert(
  htmlContent: "<b>Warning!</b> Please review your inputs.",
  kColor: kWarningColor,
  isOutlined: true,
),

Alert(
  htmlContent: "<b>Warning!</b> Please review your inputs.",
  kColor: kWarningColor,
  isOutlined: true,
),

Solid Error Alert

Alert(
  htmlContent: "<b>Error:</b> Unable to connect to the server.",
  kColor: kDangerColor,
  isSolid: true,
  kIcon: Icons.error,
),

Alert(
  htmlContent: "<b>Error:</b> Unable to connect to the server.",
  kColor: kDangerColor,
  isSolid: true,
  kIcon: Icons.error,
),

Find several use case examples in the demo, please navigate to:

Base UI → Alerts

Base UI → Alerts

Best Practices

• Use clear and concise messaging to avoid overwhelming users
• Choose alert colors that align with common UI conventions (success, warning, error)
• Prefer dismissible alerts for non-critical information
• Avoid overusing solid alerts, as they draw strong visual attention
• Do not mix conflicting styles (e.g., isOutlined and isSolid together)
• Use icons consistently to reinforce alert meaning

Summary

The Alert widget in FlutKit provides a powerful and customizable way to display inline notifications within your application. With support for HTML content, multiple visual styles, and dismissible behavior, it enables developers to communicate important information clearly while maintaining a clean and professional UI.

Use it thoughtfully to enhance usability and user awareness without disrupting the overall experience.