Notification Filter Bar
Component Detail
Description
Horizontal chip row allowing users to filter the notification feed by type (assignments, certificates, activities, system) and read state (all, unread only). Filters update the BLoC state reactively and reset scroll position. Accessible via keyboard traversal with ARIA-equivalent semantics in Flutter.
notification-filter-bar
Summaries
The Notification Filter Bar gives users direct control over the relevance of their notification feed, allowing them to isolate exactly the type of update they care about — whether that is pending assignments, earned certificates, activity confirmations, or system messages. This filtering capability is a quality-of-life feature that scales in value as the user's notification volume grows: power users and administrators managing large cohorts can quickly focus on unread items or a specific category without scrolling through unrelated content. By reducing the time users spend hunting for relevant notifications, the filter bar directly supports task completion rates and contributes to a perception of the app as professional and well-engineered, supporting user trust and renewal decisions.
The Notification Filter Bar is a low-complexity component but carries a non-trivial integration dependency: it must communicate filter state changes to NotificationBloc and the changes must reactively reset the scroll position of the parent list. This scroll-reset behaviour requires coordination between the filter bar's onTypeFilterSelected/onReadFilterSelected callbacks and the parent screen's ScrollController, which should be documented as an integration contract early to prevent bugs during assembly. The filter chip set (assignment, certificate, activity, system, all, unread-only) must be kept in sync with the NotificationType enum — a shared constants file or code generation step is recommended to prevent drift. Keyboard traversal testing (Flutter's FocusTraversalGroup) is required for accessibility sign-off.
NotificationFilterBar is a stateless widget rendered as a SingleChildScrollView with Row of FilterChip widgets. Each chip maps to a NotificationType? value (null = all) or a ReadFilter enum value. Selected state is derived from the current NotificationBloc state rather than local widget state, making the bar a pure projection of BLoC state and ensuring consistency on tab re-entry.
onTypeFilterSelected and onReadFilterSelected dispatch NotificationFilterChangedEvent to the BLoC. Scroll position reset is handled in the parent by listening to BLoC state changes and calling scrollController.animateTo(0). getActiveFilterCount() returns the sum of non-default filter selections, used by the parent to display a filter-active indicator. FocusTraversalGroup with ReadingOrderTraversalPolicy wraps the chip row for correct accessibility tab order.
Responsibilities
- Render filter chips for notification type categories
- Render read/unread toggle filter
- Emit filter change events to parent BLoC
- Preserve selected filter state across tab navigations
- Reset to default filter on clear-all action
Interfaces
build(BuildContext)
onTypeFilterSelected(NotificationType?)
onReadFilterSelected(ReadFilter)
getCurrentFilter()
resetFilters()
getActiveFilterCount()