How to Build a Voice Controlled User Interface in FlutterFlow

Create a Custom Action called startListening that initializes the SpeechToText instance, checks availability, and starts listening. The action takes an Action Parameter callback onResult that returns the recognized transcript string. On initialization, call speech.initialize() to request microphone permission. When the user activates listening, call speech.listen() with a localeId matching your app's language. The onResult callback fires with the final recognized text when the user stops speaking or after a silence timeout.

1// Custom Action: startListening
2import 'package:speech_to_text/speech_to_text.dart' as stt;
3
4Future<String> startListening() async {
5  final speech = stt.SpeechToText();
6  bool available = await speech.initialize(
7    onStatus: (status) => print('Status: $status'),
8    onError: (error) => print('Error: $error'),
9  );
10  if (!available) return 'Speech recognition not available';
11
12  String result = '';
13  await speech.listen(
14    onResult: (val) {
15      if (val.finalResult) {
16        result = val.recognizedWords;
17      }
18    },
19    listenFor: const Duration(seconds: 10),
20    pauseFor: const Duration(seconds: 3),
21    localeId: 'en_US',
22  );
23  // Wait for result
24  await Future.delayed(const Duration(seconds: 4));
25  await speech.stop();
26  return result;
27}

Create a Custom Function called parseCommand that takes the transcript string and returns a command name. Use contains() checks on the lowercased transcript for fuzzy matching: if it contains 'home' return 'navigate_home', if it contains 'search' extract the query text after the keyword and return 'search:query', if it contains 'settings' return 'navigate_settings', if it contains 'back' return 'go_back'. If no keyword matches, return 'unknown'. This approach handles natural variations like 'take me home' or 'go to settings' instead of requiring exact phrases.

1// Custom Function: parseCommand
2String parseCommand(String transcript) {
3  final text = transcript.toLowerCase().trim();
4  
5  if (text.contains('home')) return 'navigate_home';
6  if (text.contains('settings')) return 'navigate_settings';
7  if (text.contains('profile')) return 'navigate_profile';
8  if (text.contains('back')) return 'go_back';
9  if (text.contains('search')) {
10    final query = text.replaceAll(
11      RegExp(r'.*search\s*(for)?\s*'), ''
12    ).trim();
13    return query.isNotEmpty ? 'search:$query' : 'search:';
14  }
15  return 'unknown';
16}

In the page where voice control is active, after the startListening action returns a transcript, pass it to parseCommand. Then use Conditional Actions to execute the result: if command equals 'navigate_home', use Navigate To action to the HomePage. If command equals 'navigate_settings', navigate to SettingsPage. If command starts with 'search:', extract the query and set the search TextField value plus trigger the search. If command equals 'go_back', use Navigator Pop. If command equals 'unknown', update a Page State variable showSuggestions to true and display a SnackBar with the message 'Command not recognized'.

Add a Stack at the center of the screen (or overlay via a global Stack) with a Container that is visible only when Page State isListening equals true. Inside the Container, add three concentric circles with scale animations (use FlutterFlow's built-in animations: scale from 1.0 to 1.5, infinite loop, different delays per circle to create a ripple effect). Add a microphone Icon at the center. Below the circles, add a Text widget showing 'Listening...' that updates to show the partial transcript as the user speaks. This gives clear visual feedback that the app is actively processing voice input.

When the parseCommand function returns 'unknown', display a Wrap widget with tappable chips showing available commands: 'Go Home', 'Search', 'Open Settings', 'Go Back', 'Open Profile'. Each chip is a Container with rounded corners and an InkWell. Tapping a chip executes that command directly (same as if the user had spoken it). Use Conditional Visibility on the Wrap so it appears only when showSuggestions is true. Add a dismiss timer or close button so the suggestions disappear after 5 seconds or on the next voice activation.