FluttyUI Logo
FluttyUI
Components

Alert

Alerts are temporary notifications that provide concise feedback about an action or event.

Embedded previews are for quick reference. For exact rendering and interaction details, open Widgetbook.


Usage

FluttyAlert(
  title: 'Subscription confirmed',
);

Colors

Alert comes with 6 color variants to convey different meanings.

FluttyColumn(
  gap: 12,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    FluttyAlert(
      title: 'This is a neutral alert.',
    ),
    FluttyAlert(
      title: 'This is a primary alert.',
      color: ColorVariant.primary,
    ),
    FluttyAlert(
      title: 'This is a secondary alert.',
       color: ColorVariant.secondary,
    ),
    FluttyAlert(
      title: 'This is a success alert.',
      color: ColorVariant.success,
    ),
    FluttyAlert(
      title: 'This is a warning alert.',
      color: ColorVariant.warning,
    ),
    FluttyAlert(
      title: 'This is a danger alert.',
      color: ColorVariant.danger,
    ),
  ],
);

Variants

Solid

FluttyAlert(
  title: "Solid Alert",
);

Bordered

FluttyAlert(
  title: "Bordered Alert",
  variant: FluttyAlertVariant.bordered,
)

Faded

FluttyAlert(
  title: "Faded Alert",
  variant: FluttyAlertVariant.flat,
);

Faded

FluttyAlert(
  title: "Faded Alert",
  variant: FluttyAlertVariant.faded,
);

Radius

FluttyColumn(
  gap: 12,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    FluttyAlert(
      title: 'Subscription confirmed',
      radius: RadiusVariant.none,
    ),
    FluttyAlert(
      title: 'Subscription confirmed',
      radius: RadiusVariant.sm,
    ),
    FluttyAlert(
      title: 'Subscription confirmed',
      radius: RadiusVariant.md,
    ),
    FluttyAlert(
      title: 'Subscription confirmed',
      radius: RadiusVariant.lg,
    ),
    FluttyAlert(
      title: 'Subscription confirmed',
      radius: RadiusVariant.full,
    ),
  ],
);

Icons

Custom Icon

FluttyAlert(
  title: "Custom Icon",
  icon: HeroIcons.moon.outline,
);

Hide Icon

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

Hide Icon Wrapper

FluttyAlert(
  title: "No Icon Wrapper",
  hideIconWrapper: true,
);

Actions

FluttyAlert(
  title: "Alert with Actions",
  description: "Choose how you want to proceed.",
  endContent: [
    FluttyButton(
      size: FluttyButtonSize.sm,
      text: "Action 1",
      onPress: () {},
    ),
    FluttyButton(
      size: FluttyButtonSize.sm,
      color: ColorVariant.neutral,
      text: "Action 2",
      onPress: () {},
    ),
  ],
);

Dismissable

FluttyAlert(
  title: "Dismissable Alert",
  isClosable: true,
  onClose: () {},
);

API

Prop

Type


Events

Prop

Type