Alert

A customizable alert widget that can display a title, optional message, and optional leading icon /trailing action. It is typically used to show statpnus messages like success, warning, or error.

Usage

FluttyAlert(
  title: "Success",
  message: "Your changes have been saved successfully.",
  color: ColorVariant.success,
  isClosable: true,
  onClose: () => print("Closed"),
)

Colors

You can use the color property with any ColorVariant.

FluttyAlert(
  title: "Primary Alert",
  color: ColorVariant.primary,
),
FluttyAlert(
  title: "Success Alert",
  color: ColorVariant.success,
),
FluttyAlert(
  title: "Warning Alert",
  color: ColorVariant.warning,
),
FluttyAlert(
  title: "Danger Alert",
  color: ColorVariant.danger,
),

Variants

Solid

Default filled background style.

FluttyAlert(
  title: "Solid Alert",
  variant: StyleVariant.solid,
)

Bordered

Transparent background with border.

FluttyAlert(
  title: "Bordered Alert",
  isBordered: true,
)

Radius

Control corner radius with radius.

FluttyAlert(
  title: "Rounded Alert",
  radius: RadiusVariant.lg,
)

Custom Icon

Override the default icon with icon.

FluttyAlert(
  title: "Custom Icon Alert",
  icon: HeroIcons.bolt.solid,
)

Without Icon

Hide the leading icon with hideIcon.

FluttyAlert(
  title: "No Icon Alert",
  hideIcon: true,
)

With Action

Use endContent for a trailing action (cannot be combined with isClosable).

FluttyAlert(
  title: "Alert with Action",
  endContent: TextButton(
    onPressed: () {},
    child: Text("Retry"),
  ),
)

API

Events