FluttyUI Logo
FluttyUI
Components

Alert

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


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