Contact List Screen
Component Detail
Description
Main screen rendering role-specific contact list views for coordinators, org admins, and peer mentors. Composes the search bar, view switcher, and contact/peer mentor card lists into a single scrollable page with WCAG 2.2 AA contrast compliance.
contact-list-screen
Summaries
The Contact List Screen is the primary interface through which coordinators, organization administrators, and peer mentors access the people they need to work with, making it central to daily operational efficiency. A well-designed, role-aware contact directory reduces time spent searching for the right person, accelerates coordination between team members, and ensures each user sees only the contacts relevant to their responsibilities. WCAG 2.2 AA accessibility compliance expands usability for team members with visual impairments and satisfies legal and organizational inclusion requirements, reducing compliance risk. This screen directly supports the organization's ability to scale its volunteer and coordinator networks without proportional increases in administrative overhead.
This medium-complexity screen composes five child components—contact-card-widget, peer-mentor-card-widget, contact-view-switcher, contact-search-bar, and contact-list-provider—creating a broad dependency surface that requires all five to be delivered and stable before integration testing can begin. Role-specific rendering for three user types (coordinator, org admin, peer mentor) multiplies the test matrix significantly, and each role must be validated for correct list content, empty states, and loading indicators. WCAG 2.2 AA compliance adds a mandatory accessibility audit milestone to the delivery plan. Coordinate widget deliveries in parallel where possible and schedule integration testing only after all child dependencies are merged to avoid blocked work and context-switching costs.
ContactListScreen is a stateful Flutter widget parameterized by UserRole that orchestrates the composition of contact-search-bar, contact-view-switcher, and the appropriate card list (ContactCard or PeerMentorCard) inside a scrollable page layout. It delegates data fetching to contact-list-provider and passes filtered results to the list builder. Role-specific branching in _buildContactList and _buildPeerMentorList must handle coordinator, org-admin, and peer-mentor cases distinctly. Empty state and loading state rendering should be centralized in dedicated methods to avoid duplication.
All text and icon colors must be validated against WCAG 2.2 AA contrast ratios using design tokens. Avoid embedding business logic in the screen—filtering and sorting belong in the provider or a dedicated controller layer.
Responsibilities
- Render role-appropriate contact list based on authenticated user role
- Orchestrate layout of search bar, view switcher, and card list
- Handle empty states and loading indicators
- Ensure accessible contrast and font sizing throughout
Interfaces
ContactListScreen(role: UserRole)
build(BuildContext context)
_onRoleChanged(UserRole role)
_onSearchQueryChanged(String query)
_buildContactList(List<Contact> contacts)
_buildPeerMentorList(List<PeerMentor> mentors)
_buildEmptyState()
_buildLoadingState()
Relationships
Dependencies (4)
Components this component depends on