Mentor Map Marker Widget
Component Detail
Description
Custom map marker widget representing a single peer mentor on the map. Displays availability status via color coding and opens a detail popup on tap. Includes semantic labels for screen reader traversal when map canvas supports focus traversal.
map-marker-widget
Summaries
The Mentor Map Marker Widget is the visual signal that instantly communicates a mentor's availability status to anyone viewing the map. By colour-coding each marker to reflect current availability, coordinators and students can identify suitable mentors at a glance without opening individual profiles. This accelerates the matching process, reduces time-to-connection for students needing support, and ensures the map view delivers actionable information rather than just geographic data. Accessible semantic labels also satisfy inclusion requirements for users relying on assistive technology.
Medium-complexity mobile UI widget with no external component dependencies, making it independently deliverable and testable before the full map screen is assembled. The primary risk is visual consistency: availability colour coding must be agreed with design and accessibility teams early, as colour choices affect both brand identity and WCAG contrast compliance. Coordinate with the map-view-screen team on the tap event contract (onTap callback triggering detail popup) to avoid interface mismatches during integration. Regression test colour rendering across both iOS and Android, as Flutter's canvas rendering can differ subtly between platforms.
Flutter StatefulWidget rendering a custom-painted map marker using a Canvas or an asset image with an overlay. updateAvailabilityColor accepts an AvailabilityStatus enum and triggers a setState to repaint the colour indicator — use const constructors and shouldRepaint guards to minimise unnecessary redraws during map pan. getSemanticLabel returns a human-readable string (e.g., 'John Smith, available') used by the Semantics widget wrapping the marker. onTap fires a callback to the parent map-view-screen via a callback parameter.
Ensure the tap target meets the 48x48dp minimum for mobile accessibility. Keep this widget stateless where possible, deriving all display state from constructor parameters for easier testing.
Responsibilities
- Render styled marker with availability color indicator
- Provide accessible semantic label for the mentor
- Handle tap to trigger mentor info popup
Interfaces
build(BuildContext context)
onTap()
updateAvailabilityColor(AvailabilityStatus status)
getSemanticLabel() → String
Relationships
Dependents (2)
Components that depend on this component
Used Integrations (1)
External integrations and APIs this component relies on