Notification Centre Screen
Component Detail
Description
Main screen for the Notifications tab (fifth bottom nav item) presenting a chronological, filterable feed of all system notifications for the current user. Supports pull-to-refresh, empty states, and full WCAG 2.2 AA accessibility with semantic list semantics and announced unread counts.
notification-centre-screen
Summaries
The Notification Centre Screen is the primary hub through which users stay informed about every action that matters to them — assignment updates, certificate milestones, activity completions, and system messages — all surfaced in a single, chronologically ordered feed. By centralising this information in one accessible location rather than scattering alerts across multiple screens, the app reduces user frustration and the risk of missed communications, directly supporting user retention and engagement metrics. The built-in WCAG 2.2 AA compliance also reduces legal exposure and broadens the addressable user base to include users with accessibility needs, a competitive differentiator in regulated or public-sector markets. Pull-to-refresh and filtering controls keep the experience responsive and relevant, reducing support tickets related to 'I didn't see the notification'.
This screen sits at the intersection of several subsystems — the notification BLoC, the filter bar, the list item widget, and the empty state widget — meaning its delivery depends on all four child components being production-ready first. Complexity is medium: the core list rendering and pull-to-refresh are straightforward, but the WCAG 2.2 AA requirements (semantic list semantics, announced unread counts, focus management) add QA overhead that is easy to underestimate. Plan for dedicated accessibility testing passes using both VoiceOver (iOS) and TalkBack (Android). The filter state must also be validated against BLoC state transitions, which adds integration test surface.
Consider scheduling this screen's final sign-off after the notification BLoC is stable to avoid rework cycles.
NotificationCentreScreen is a stateful Flutter widget that acts as the top-level coordinator for the Notifications tab. It subscribes to NotificationBloc via BlocBuilder/BlocListener, driving a CustomScrollView with SliverList for the chronological feed and a sticky SliverAppBar housing the NotificationFilterBar. Pull-to-refresh is implemented via RefreshIndicator wrapping the scroll view. The onMarkAllRead() and onClearAll() callbacks dispatch events directly to NotificationBloc.
Unread count announcements use Flutter's SemanticsService.announce() triggered on BlocListener state changes. Empty and loading states are handled via conditional rendering of NotificationEmptyState and shimmer skeleton widgets. Ensure the BLoC stream is not re-subscribed on hot reload by scoping the BlocProvider above the Navigator.
Responsibilities
- Render chronological notification feed with role-aware filtering
- Present filter controls for notification type and read/unread state
- Provide mark-all-read and clear-all actions
- Handle empty state and loading skeleton displays
- Announce unread count changes to screen readers
Interfaces
build(BuildContext)
onFilterChanged(NotificationFilter)
onMarkAllRead()
onClearAll()
onRefresh()
onNotificationTap(Notification)
announceUnreadCount(int)
Relationships
Dependencies (4)
Components this component depends on
Related Data Entities (2)
Data entities managed by this component