Notification Badge Widget
Component Detail
Description
Unread count badge overlaid on the Notifications tab in the bottom navigation bar. Subscribes to a real-time unread count stream and updates reactively. Hidden when count is zero; shows '9+' when count exceeds nine.
notification-badge-widget
Summaries
The Notification Badge Widget is a small but high-impact shared UI element that drives engagement by surfacing unread notification counts directly in the bottom navigation bar. This persistent visual cue ensures users never miss pending communications — a critical factor in time-sensitive coordination workflows where delayed responses to assignments or status changes can negatively affect mentee outcomes. Because this widget is shared across all features that include bottom navigation, it provides consistent notification awareness throughout the entire application with a single implementation investment. The '9+' overflow display and accessible screen reader labels ensure the experience is both polished and inclusive across the full user base.
Notification Badge Widget is low complexity and marked as a shared component, meaning it will be integrated into the bottom navigation bar across multiple features — coordinate its delivery with the navigation shell sprint rather than any single feature sprint. Its sole dependency is notification-repository for the real-time unread count stream. Because it is shared, any breaking change to its interface will require updates in all consuming navigation contexts; document its public API clearly and treat changes as requiring cross-feature regression testing. QA scope is small but cross-cutting: verify zero-count hide behavior, the '9+' cap display, real-time stream updates, and the accessible label string format.
Low delivery risk; high integration breadth.
NotificationBadgeWidget is a StreamBuilder-backed StatelessWidget that subscribes to notification-repository's unreadCountStream (a Stream
Wrap in Semantics with a label computed as '$count unread notification${count == 1 ? '' : 's'}' for screen reader support, updating with ExcludeSemantics on the visual badge to avoid double-announcement. Because this is a shared widget embedded in the navigation shell, keep it free of BLoC dependencies — consume the repository stream directly or accept a Stream
Responsibilities
- Display unread notification count on the bottom nav tab
- Subscribe to real-time count updates and rebuild on change
- Provide accessible label for screen readers (e.g., '3 unread notifications')
Interfaces
build()
updateCount(int count)
clearBadge()