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