Contact Card Widget
Component Detail
Description
Reusable card widget displaying a contact's key information (name, role, organization, notes snippet). Styled with design tokens and meets WCAG 2.2 AA contrast requirements. Tappable to navigate to contact detail screen.
contact-card-widget
Summaries
The Contact Card Widget is a shared, reusable interface element that presents key contact information—name, role, organization, and notes—in a consistent, accessible format across every screen where contacts appear in the application. Shared UI components like this reduce development cost by eliminating redundant work, ensure visual consistency that builds user trust and reduces training time, and lower the maintenance burden when design standards evolve because a single update propagates everywhere automatically. WCAG 2.2 AA compliance ensures the card is usable by team members with visual impairments, supporting the organization's inclusion commitments. As a foundational building block reused across multiple features, this widget directly accelerates delivery velocity and protects long-term design coherence.
As a low-complexity shared widget with no external dependencies, the Contact Card Widget has a short development and testing cycle and can be completed and stabilized early in the sprint to unblock dependent screens. Its shared status means it appears across multiple features, so any regressions introduced during maintenance will have broad impact—establish visual regression tests (golden tests in Flutter) at delivery to protect against unintended style changes. Design token compliance should be verified against the current token set at handoff, and accessibility contrast ratios must pass a WCAG 2.2 AA audit before sign-off. Because it has no dependencies, it is a strong candidate for early delivery to unblock integration work on the contact-list-screen and any other consuming screens.
ContactCard is a stateless Flutter widget accepting a required Contact model and an optional VoidCallback onTap. It renders the contact name, a role badge via _buildRoleBadge, an organization label, and a truncated notes preview via _buildNotesPreview when notes are non-null. All colors, typography, and spacing must be sourced exclusively from design tokens to ensure theme consistency and WCAG 2.2 AA compliance—avoid hardcoded hex values. The onTap callback delegates navigation logic to the parent, keeping the widget free of routing concerns.
As a shared component used across multiple screens, enforce a strict no-side-effects policy: no Provider reads, no direct Navigator calls inside the widget. Write golden tests to guard against visual regressions, particularly for role badge color variations and notes truncation edge cases.
Responsibilities
- Display contact name, role badge, and organization label
- Show truncated notes preview when available
- Handle tap navigation to contact detail screen
- Apply design token colors, typography, and spacing
Interfaces
ContactCard({required Contact contact, VoidCallback? onTap})
build(BuildContext context)
_buildRoleBadge(String role)
_buildNotesPreview(String? notes)
Relationships
Dependents (2)
Components that depend on this component