Notification List Item
Component Detail
Description
Individual row widget displaying a single notification with its type icon, short summary text, relative timestamp, and read/unread visual indicator. Supports tap-to-navigate via deep link and swipe-to-dismiss for mark-as-read. Fully accessible with semantic labels and focus management on mark-read action.
notification-list-item
Summaries
The Notification List Item is the atomic unit of user communication within the notification feed — every alert, update, or milestone the system generates is ultimately presented through this component. Its design directly shapes whether users act on notifications or ignore them: a clear type icon, readable summary text, and an obvious read/unread indicator reduce cognitive load and increase the likelihood that users take the intended action (e.g., reviewing a new assignment or claiming a certificate). The swipe-to-dismiss gesture for marking items read mirrors familiar patterns from leading productivity apps, lowering the learning curve and improving perceived app quality. Accessible semantic labels ensure no user segment is excluded from receiving timely, actionable information.
NotificationListItem has low internal complexity and no external dependencies beyond the Notification data model, making it an ideal candidate for early parallel development. It can be built and unit-tested in isolation using mock Notification objects before the BLoC or backend is ready. The main delivery risk is gesture interaction testing: swipe-to-dismiss must be validated against scroll conflicts on both iOS and Android, which historically requires physical device testing in addition to emulator runs. Accessibility labelling (getSemanticLabel combining icon type, summary, and timestamp) should be reviewed with the QA team's accessibility checklist early to avoid late-stage rework.
This component is a good candidate for a widget test suite covering all NotificationType variants.
NotificationListItem is a stateless Flutter widget accepting a Notification model and two callbacks: onTap and onMarkRead. The type icon is resolved via a switch on NotificationType through resolveTypeIcon(), returning an Icon with a semanticLabel. Relative timestamp formatting via formatRelativeTimestamp(DateTime) should use the intl package's RelativeDateTimeFormatter for locale-aware output. The read/unread visual distinction is implemented via a conditional Container background tint and a small CircleAvatar dot indicator, both driven by notification.isRead.
Swipe-to-dismiss uses Flutter's Dismissible widget with a confirmDismiss callback that dispatches the mark-read event and returns true on success. The full semantic label from getSemanticLabel() is applied via Semantics(label:) wrapping the entire row to ensure screen readers read a single coherent description.
Responsibilities
- Display notification type icon, summary, and relative timestamp
- Show visual read/unread distinction (background tint, dot indicator)
- Handle tap to trigger deep link navigation to related entity
- Support swipe gesture for mark-as-read
- Provide accessible semantic label combining all visible fields
Interfaces
build(BuildContext)
onTap(Notification)
onMarkRead(String notificationId)
formatRelativeTimestamp(DateTime)
resolveTypeIcon(NotificationType)
getSemanticLabel(Notification)
Relationships
Related Data Entities (2)
Data entities managed by this component