Notification List Item Widget
Component Detail
Description
Reusable card widget representing a single notification entry with title, body, timestamp, read indicator, and role-context icon. Tapping navigates via deep link to the relevant screen. Fully accessible with merged semantics for screen readers.
notification-list-item-widget
Summaries
The Notification List Item Widget ensures every user-facing alert is presented clearly and consistently throughout the mobile application, directly improving user engagement with critical communications such as assignment updates and deadline warnings. By surfacing read and unread states visually, users never miss important role-specific information, reducing response latency and improving coordination outcomes. Full accessibility support via VoiceOver and TalkBack compliance expands the addressable user base and reduces legal risk related to accessibility standards. Deep-link navigation from each notification item eliminates friction, guiding users directly to the relevant screen in one tap and improving overall retention.
This widget is a low-complexity UI component scoped entirely to the mobile execution context, making it a safe early delivery candidate that unblocks other notification-related features. It has no external service dependencies, so it can be built and tested in isolation using mock notification data before the backend notification pipeline is complete. Accessibility testing with VoiceOver and TalkBack should be scheduled as part of QA, which requires at least one tester with device access to both iOS and Android. The deep-link tap behaviour must be integration-tested once the notification deep-link handler is available, so plan for a second testing pass after that dependency ships.
This widget is a stateless Flutter UI component implementing a single-responsibility card layout for notification entries. It consumes a Notification data model to render title, body, timestamp, read/unread indicator, and a role-context icon. The `build()` method constructs the card; `onTap(notification)` delegates to the caller or routing layer for deep-link navigation; `getSemanticLabel(notification)` assembles a merged semantic string for VoiceOver/TalkBack using MergeSemantics or Semantics widget. Since it has no dependencies, it is straightforwardly unit-tested with widget tests.
Ensure the read/unread visual state is driven by the Notification model field, not local ephemeral state, to remain consistent with BLoC-driven rebuilds.
Responsibilities
- Render notification content with read/unread visual state
- Trigger deep-link navigation on tap
- Expose merged semantic label for VoiceOver/TalkBack
Interfaces
build()
onTap(notification)
getSemanticLabel(notification)