Notification Empty State Widget
Component Detail
Description
Displayed when the filtered or unfiltered notification feed is empty. Shows a contextual illustration and message appropriate to whether the empty state is due to active filters or genuinely no notifications. Provides a clear-filter action when filters are active.
notification-empty-state
Summaries
The Notification Empty State Widget ensures that users are never left facing a blank, unexplained screen when their notification feed is empty — an experience that, without this component, risks being interpreted as a technical fault rather than a legitimate state. By displaying a contextual illustration and message that distinguishes between 'no notifications exist' and 'your filters are hiding results', the app communicates clearly and maintains user trust. The clear-filters action button provides an immediate recovery path when filters are the cause, reducing user frustration and support contacts. This attention to empty-state UX is a marker of product polish that improves overall app quality perception and supports positive app store ratings.
NotificationEmptyState is a low-complexity, zero-dependency component that can be built and signed off very early in the sprint, ideally in parallel with the BLoC and filter bar work. The primary delivery consideration is asset management: the contextual illustrations (one for genuinely empty, one for filtered-empty) must be provided by the design team and added to the asset bundle before the component can be finalised. Confirm illustration filenames and asset paths are agreed upon early to avoid last-minute integration issues. The isFilteredEmpty boolean prop must be wired correctly from the parent screen's BLoC state — a simple mapping but worth an integration test to confirm the correct empty state variant is shown under each condition.
Accessibility review is straightforward: descriptive semantic text is the only requirement.
NotificationEmptyState is a stateless Flutter widget accepting isFilteredEmpty (bool) and onClearFilters (VoidCallback). It renders a Column with a centred Image.asset (illustration), a Text widget for the primary message, an optional Text for the secondary message, and — when isFilteredEmpty is true — a TextButton wired to onClearFilters. The two illustration assets and message strings should be sourced from an AppAssets constants class and AppStrings localisation file respectively rather than hardcoded strings. The entire column is wrapped in Semantics(container: true) with a combined label built from the visible text to ensure screen readers announce the full empty state context in a single focus event.
This component has no BLoC dependency and is purely presentational, making it trivially unit-testable with widgetTester.pumpWidget and golden tests for both isFilteredEmpty variants.
Responsibilities
- Render empty state illustration and descriptive message
- Differentiate between no-notifications and filtered-to-empty states
- Provide clear-filters action button when filters are active
- Maintain accessibility with descriptive semantic text
Interfaces
build(BuildContext)
onClearFilters()
isFilteredEmpty(bool)