Banner

A full-width notification banner for announcements and alerts.

Basic Usage

New Feature – Check out our latest update!
dart
1
2
3
4
5
DBanner(
  title: 'New Feature',
  description: 'Check out our latest update!',
  onClose: () => hideBanner(),
)

Colors

Primary Banner
Success Banner
Warning Banner
Error Banner
Info Banner
dart
1
2
3
4
5
DBanner(title: 'Primary', color: DBannerColor.primary)
DBanner(title: 'Success', color: DBannerColor.success)
DBanner(title: 'Warning', color: DBannerColor.warning)
DBanner(title: 'Error', color: DBannerColor.error)
DBanner(title: 'Info', color: DBannerColor.info)

Variants

Solid Banner
Outline Banner
Soft Banner
Subtle Banner
dart
1
2
3
4
DBanner(title: 'Solid', variant: DBannerVariant.solid)
DBanner(title: 'Outline', variant: DBannerVariant.outline)
DBanner(title: 'Soft', variant: DBannerVariant.soft)
DBanner(title: 'Subtle', variant: DBannerVariant.subtle)

With Icon

Announcement – Big news coming soon!
dart
1
2
3
4
5
DBanner(
  icon: DIcon(name: DIconNames.bell, size: DIconSize.md),
  title: 'Announcement',
  description: 'Big news coming soon!',
)

With Actions

New Feature Available – Try our new dashboard.
Learn more
dart
1
2
3
4
5
6
7
8
DBanner(
  title: 'New Feature Available',
  description: 'Try our new dashboard.',
  actions: [
    DBannerAction(label: 'Learn more', href: '/features'),
    DBannerAction(label: 'Try now', onClick: () => openFeature()),
  ],
)

Non-Closable

Maintenance – Scheduled maintenance in 1 hour.
dart
1
2
3
4
5
6
DBanner(
  title: 'Maintenance',
  description: 'Scheduled maintenance in 1 hour.',
  closable: false,
  color: DBannerColor.warning,
)

Sticky Banner

Sticky Banner – This stays visible while scrolling.
dart
1
2
3
4
5
6
DBanner(
  sticky: true,
  position: DBannerPosition.top,
  title: 'Sticky Banner',
  description: 'This stays visible while scrolling.',
)