How to Create a Voice-to-Text Feature in FlutterFlow

Go to Custom Code → Pubspec Dependencies and add speech_to_text with version ^6.6.0. In your FlutterFlow project settings, ensure microphone permission is enabled for both iOS and Android. For iOS, add the NSMicrophoneUsageDescription and NSSpeechRecognitionUsageDescription permission descriptions in the iOS settings. Speech recognition requires both microphone access and speech recognition authorization on iOS.

Go to Custom Code → Custom Actions → Add. Name it startListening. Set the return type to void. Add a parameter updateTranscription of type Action (callback). In the code, create a SpeechToText instance, call initialize() to check availability, then call listen() with onResult callback that invokes the updateTranscription callback passing result.recognizedWords. Set listenFor to Duration(seconds: 30) and pauseFor to Duration(seconds: 3) for automatic stop after silence.

1import 'package:speech_to_text/speech_to_text.dart';
2
3Future startListening(
4  Future Function(String text) updateTranscription,
5) async {
6  final speech = SpeechToText();
7  bool available = await speech.initialize(
8    onError: (error) => debugPrint('STT error: $error'),
9    onStatus: (status) => debugPrint('STT status: $status'),
10  );
11  if (!available) {
12    updateTranscription('Speech recognition not available on this device');
13    return;
14  }
15  speech.listen(
16    onResult: (result) {
17      updateTranscription(result.recognizedWords);
18    },
19    listenFor: const Duration(seconds: 30),
20    pauseFor: const Duration(seconds: 3),
21    listenMode: ListenMode.dictation,
22  );
23}

Create another Custom Action named stopListening. This action creates a SpeechToText instance and calls stop() to end the current listening session. Call this when the user taps the mic button again or navigates away from the page. Without explicitly stopping, the listener continues consuming battery in the background.

1import 'package:speech_to_text/speech_to_text.dart';
2
3Future stopListening() async {
4  final speech = SpeechToText();
5  await speech.stop();
6}

On your page, add Page State variables: isListening (Boolean, default false) and transcriptionText (String, default empty). Add an IconButton with a mic icon. Use Conditional Styling: if isListening is true, show mic_off icon with red color; if false, show mic icon with default color. Bind On Tap to an action flow: if not listening → set isListening true → call startListening Custom Action (pass a callback that updates transcriptionText) → else → set isListening false → call stopListening. Below the button, add a Text widget bound to transcriptionText.

Instead of just displaying the text, bind the transcription to a TextField's initial value so users can edit the result after dictation. On the startListening callback, update both the Page State variable and the TextField's controller value. After stopping, the user sees the dictated text in an editable field and can correct any recognition errors before submitting the form. This makes voice-to-text practical for forms, search, and notes.