Speech-to-Text Field Overlay
Component Detail
Description
A per-field microphone trigger widget that activates Flutter's speech_to_text package and appends the transcription result into the associated text field. Triggered manually by the user — never started automatically — and provides visual recording state feedback accessible via screen reader.
speech-to-text-field-overlay
Summaries
The Speech-to-Text Field Overlay removes a major barrier to data entry for field staff using the mobile application. By allowing users to dictate responses instead of typing, it directly reduces the time spent completing reports after sessions — a friction point that has historically led to incomplete or delayed submissions. For organisations serving users with motor impairments or low digital literacy, this capability is a meaningful accessibility differentiator that supports compliance with accessibility standards and broadens the user base. The component is shared across multiple input contexts, meaning its value compounds across every form in the application without additional investment per feature.
Faster, more complete data entry translates to better organisational reporting, improved outcomes tracking, and reduced administrative overhead for frontline staff.
This is a medium-complexity shared UI component targeting the mobile execution context, which means it must be tested across both Android and iOS platforms using Flutter's speech_to_text package. Key delivery dependencies include the speech-to-text-adapter component being stable and integrated before this overlay can be fully validated. Because it is marked as shared, any breaking change to its interfaces — startListening, stopListening, onTranscriptionResult — will have cross-feature ripple effects and must be managed carefully during refactoring. Accessibility requirements (screen reader announcements for recording state) add QA scope beyond standard UI testing.
Plan for device-level testing with varying microphone permissions, background noise scenarios, and accessibility audit sign-off. Regression testing should be triggered whenever the underlying adapter changes.
The Speech-to-Text Field Overlay is a shared mobile UI component that wraps Flutter's speech_to_text package via the speech-to-text-adapter dependency, keeping the overlay decoupled from the underlying platform API. It exposes buildTriggerButton(fieldId) to render a microphone icon alongside any eligible text field, and manages recognition lifecycle through startListening(fieldController) and stopListening(). The fieldController reference is critical — onTranscriptionResult(text) appends directly to the controller, so callers must pass a live TextEditingController instance. isListening() provides reactive state for conditional UI rendering.
Recording state must be surfaced via semantics/accessibility labels for screen reader compliance. The component should not initiate listening automatically; all activation is explicit user gesture. On adapter errors or permission denial, the overlay must degrade gracefully without crashing the parent form. Consider debouncing rapid tap events to prevent duplicate recognition sessions.
Responsibilities
- Render microphone icon button alongside eligible text fields
- Start and stop speech recognition on user tap
- Append transcribed text into the target field controller
- Provide accessible recording state announcement for screen readers
Interfaces
startListening(fieldController)
stopListening()
onTranscriptionResult(text)
isListening()
buildTriggerButton(fieldId)
Relationships
Dependents (2)
Components that depend on this component
Used Integrations (1)
External integrations and APIs this component relies on