How to Set Up Voice Commands for App Navigation in FlutterFlow

In FlutterFlow, go to Settings → Pubspec Dependencies → Add Dependency. Type 'speech_to_text' and select the latest version (6.x+). Click Save. Also add 'permission_handler' to manage microphone permissions. FlutterFlow will automatically add these packages when you export or run the app. Next, add required platform permissions: for iOS, go to Settings → iOS → Info.plist Keys → add NSMicrophoneUsageDescription with the value 'We need microphone access for voice navigation'. For Android, Settings → Android → Permissions → add RECORD_AUDIO.

Go to Custom Code → Custom Actions → Add Action. Name it 'startVoiceNavigation'. This action starts the microphone, listens for speech, transcribes it, then returns the recognized text so your Action Flow can process it. The action handles starting the listener, timing out after 5 seconds of silence, and stopping cleanly. Paste the Dart code below. Set the return type to String (the transcribed text). FlutterFlow will show a green checkmark when the code compiles.

1// Custom Action: startVoiceNavigation
2// Packages: speech_to_text, permission_handler
3import 'package:speech_to_text/speech_to_text.dart' as stt;
4import 'package:permission_handler/permission_handler.dart';
5
6Future<String> startVoiceNavigation() async {
7  // Request microphone permission
8  final status = await Permission.microphone.request();
9  if (!status.isGranted) return 'permission_denied';
10
11  final speech = stt.SpeechToText();
12  final bool available = await speech.initialize(
13    onError: (error) => debugPrint('STT error: $error'),
14  );
15
16  if (!available) return 'unavailable';
17
18  String result = '';
19  final completer = Completer<String>();
20
21  speech.listen(
22    onResult: (val) {
23      if (val.finalResult) {
24        result = val.recognizedWords.toLowerCase().trim();
25        speech.stop();
26        if (!completer.isCompleted) completer.complete(result);
27      }
28    },
29    listenFor: const Duration(seconds: 7),
30    pauseFor: const Duration(seconds: 3),
31    cancelOnError: true,
32    partialResults: false,
33  );
34
35  // Timeout fallback
36  Future.delayed(const Duration(seconds: 8), () {
37    if (!completer.isCompleted) {
38      speech.stop();
39      completer.complete(result);
40    }
41  });
42
43  return completer.future;
44}

Create a Custom Function (not Action) named 'mapSpeechToRoute'. This function takes the recognized text string and returns the FlutterFlow page route name to navigate to. Using a function (not action) is the right pattern here because it's pure logic with no side effects — it just maps input to output. Store your route map as a constant inside the function. This is what you will update when pages are added or renamed.

1// Custom Function: mapSpeechToRoute
2// Input: String transcript
3// Output: String routeName (empty string = no match)
4String mapSpeechToRoute(String transcript) {
5  final text = transcript.toLowerCase();
6
7  // Map keywords to FlutterFlow page route names
8  // IMPORTANT: use the exact route name shown in FlutterFlow
9  // Page Settings → Route Name (e.g. '/home', '/orders')
10  final Map<List<String>, String> routeMap = {
11    ['home', 'main', 'start', 'dashboard']: '/homePage',
12    ['order', 'orders', 'my orders', 'purchases']: '/ordersPage',
13    ['profile', 'account', 'my account', 'settings']: '/profilePage',
14    ['cart', 'basket', 'shopping cart']: '/cartPage',
15    ['search', 'find', 'look for']: '/searchPage',
16    ['help', 'support', 'contact']: '/helpPage',
17  };
18
19  for (final entry in routeMap.entries) {
20    for (final keyword in entry.key) {
21      if (text.contains(keyword)) return entry.value;
22    }
23  }
24
25  return ''; // no match
26}

On your app's persistent navigation bar or home page, add a Stack widget. Inside it, add a Container (50x50, circular, primary color background) and an Icon widget (mic icon, white). Above that container in the stack, add a second Container (60x60, same center, transparent, primary color border) — this will be the pulse ring animation. Select the outer ring Container, go to Animations → Add Animation → Scale. Set it to loop continuously from scale 1.0 to 1.3 with a 1-second duration and ease-out curve. This creates the 'listening' pulse effect. Wrap everything in a GestureDetector (or Button widget) and connect the tap Action Flow to start the voice navigation sequence. Show/hide the pulsing ring using a boolean App State variable 'isListening'.

Select the microphone button → Actions → On Tap. Build this Action Flow sequence: (1) Update App State 'isListening' to true. (2) Custom Action: startVoiceNavigation — store output in an Action Output variable named 'transcript'. (3) Custom Function: mapSpeechToRoute — pass transcript as argument, store output in 'routeName'. (4) Update App State 'isListening' to false. (5) Conditional Action: if routeName is not empty → Navigate To using routeName. (6) If routeName is empty → show a SnackBar saying 'Command not recognized. Try saying Go to Orders or Open Profile'. The isListening App State boolean controls the pulsing animation visibility.