Elegant Announcement Bar π
A highly customizable, animated, and premium announcement bar for Flutter applications. Designed to grab users' attention with beautiful animations, built-in themes, and seamless RTL support.
Why Elegant Announcement Bar? π€
Traditional snackbars or banners can be intrusive or easily ignored. This package provides a sleek, non-intrusive way to display multiple rolling announcements, updates, or promotions in a fixed layout.
Key Features β¨
- β‘ Auto-Rotating: Seamlessly cycle through multiple announcements.
- π Premium Animations: Smooth slide-and-fade transitions out of the box.
- βΈοΈ Smart Pausing: Automatically pauses rotation when the user touches or holds the bar.
- π Native RTL Support: Intelligent layout and animation direction (Arabic, Hebrew, etc.).
- π¨ Built-in Themes: Pre-designed styles for
info,warning,success, andpromotion. - π§© Fully Customizable: Control colors, icons, durations, curves, margins, and text styles.
- π Indicators: Progress dots show users where they are in the announcement queue.
π Getting Started
Add the package to your pubspec.yaml:
dependencies:
elegant_announcement_bar: ^0.0.1
π‘ Usage
Basic Setup
import 'package:elegant_announcement_bar/elegant_announcement_bar.dart';
ElegantAnnouncementBar(
items: [
AnnouncementItem(
title: 'Update Ready!',
message: 'Version 2.0 is now available for download.',
type: AnnouncementType.info,
),
AnnouncementItem(
title: 'Congratulations!',
message: 'You have earned 50 loyalty points.',
type: AnnouncementType.success,
),
],
)
Advanced Customization
ElegantAnnouncementBar(
items: itemsList,
scrollDuration: const Duration(seconds: 4),
animationDuration: const Duration(milliseconds: 600),
showIndicators: true,
pauseOnTouch: true,
borderRadius: 12.0,
margin: EdgeInsets.all(16),
titleStyle: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
onItemTap: (item) => print("Tapped ${item.title}"),
)
π RTL Support (Ψ§ΩΩΨΊΨ© Ψ§ΩΨΉΨ±Ψ¨ΩΨ©)
The widget automatically detects the current Directionality of the context. When used in an Arabic or RTL environment, the icons and text align to the right, and the slide animations reverse direction to feel natural.
Directionality(
textDirection: TextDirection.rtl,
child: ElegantAnnouncementBar(items: arabicItems),
)
π¨ Design System
| Property | Description | Default |
|---|---|---|
scrollDuration |
Time each item stays on screen | 5 seconds |
animationDuration |
Duration of the slide animation | 800 ms |
pauseOnTouch |
Pauses auto-rotation on touch/hold | true |
messageMaxLines |
Limit message text lines | 1 |
borderRadius |
Curvature of the bar corners | 16.0 |
showIndicators |
Show/Hide progress dot indicators | true |
animationCurve |
Movement curve (e.g., Cubic, Linear) | Curves.easeOut |
π€ Contribution & Feedback
We welcome contributions! If you have ideas for new features, themes, or find any bugs, please open an issue or submit a pull request on our GitHub Repository.
Made with β€οΈ by manar42