Organization Card Widget
Component Detail
Description
Reusable card widget that displays a single partner organization with its logo, display name, and a brief descriptor. Renders the organization's branding colors and handles the tap gesture to trigger selection. Supports a selected/highlighted state for multi-org context switcher reuse.
org-card-widget
Summaries
The Organization Card Widget is a reusable visual building block that presents partner organizations to users in a consistent, branded format — displaying each organization's logo, name, and descriptor with their own color identity. By standardizing how organizations appear across the entire mobile application, this component reinforces partner trust and delivers a polished white-label experience that strengthens commercial relationships. Its reusability across multiple screens reduces the cost of building new partner-facing features and ensures brand consistency is maintained automatically as the partner network grows. This directly supports the platform's multi-tenant business model and reduces onboarding friction for users affiliated with multiple organizations.
The Organization Card Widget is a low-complexity, shared UI component that should be built early in the sprint cycle since it is consumed by both the organization selection screen and the multi-org context switcher. Estimated development effort is minimal — one to two days including unit tests. Because it carries no external dependencies, it can be developed and tested in isolation by any mobile developer without blocking other workstreams. Key delivery risk is ensuring the branding accent system is finalized before integration, as the card applies organization-specific colors.
Visual QA with at least two partner branding configurations is recommended. Shared status means changes must be regression-tested across all consuming screens.
OrganizationCard is a stateless Flutter widget accepting a required Organization model, a VoidCallback for tap events, and an optional isSelected boolean for highlight rendering. It has zero external service dependencies, making it straightforward to unit-test with mock Organization instances. The widget applies organization-specific branding via the accent color field on the Organization data model — ensure the design token system is wired before rendering. The isSelected state drives a visual highlight (border or background shift) for multi-org switcher reuse.
Tap handling delegates entirely to the parent via onTap callback — no internal navigation or side effects. Keep build() pure and free of async calls to maintain performance in scrollable list contexts.
Responsibilities
- Display organization logo, name, and descriptor
- Apply organization-specific branding accent
- Emit selection callback on tap
- Render selected highlight state
Interfaces
OrganizationCard({required Organization org, required VoidCallback onTap, bool isSelected})
build(BuildContext context)
Relationships
Dependents (2)
Components that depend on this component