How to Implement Voice Messaging in FlutterFlow

In FlutterFlow, go to Settings → Pubspec Dependencies and add two packages: record (version 5.x or later) and just_audio (version 0.9.x or later). The record package handles microphone access and audio encoding. The just_audio package provides a reliable cross-platform audio player with position streams. After adding both packages, also add the required permission entries. In your exported project's ios/Runner/Info.plist add NSMicrophoneUsageDescription. In android/app/src/main/AndroidManifest.xml add RECORD_AUDIO permission. FlutterFlow's Permissions panel (Settings → App Permissions) can add the microphone permission for you without manual manifest editing.

Create two Custom Actions. The first, startRecording, initialises an AudioRecorder instance and calls recorder.start() with RecordConfig specifying encoder: AudioEncoder.aacLc and bitRate: 128000. Store the recorder instance in a static variable so stopRecording can access it. The second action, stopRecording, calls recorder.stop() which returns the file path of the recorded audio. Pass this file path back to FlutterFlow as the action's return value (a String). In your chat page, bind a hold-to-record GestureDetector button: On Long Press Start calls startRecording, On Long Press End calls stopRecording and receives the file path for the upload step.

1// Two Custom Actions: startRecording and stopRecording
2import 'package:record/record.dart';
3import 'package:path_provider/path_provider.dart';
4import 'dart:io';
5
6// Shared recorder instance
7AudioRecorder? _recorder;
8
9// Action 1: startRecording (no parameters, no return)
10Future<void> startRecording() async {
11  _recorder = AudioRecorder();
12  final hasPermission = await _recorder!.hasPermission();
13  if (!hasPermission) return;
14
15  final dir = await getTemporaryDirectory();
16  final filePath = '${dir.path}/voice_${DateTime.now().millisecondsSinceEpoch}.m4a';
17
18  await _recorder!.start(
19    const RecordConfig(
20      encoder: AudioEncoder.aacLc,
21      bitRate: 128000,
22      sampleRate: 44100,
23    ),
24    path: filePath,
25  );
26}
27
28// Action 2: stopRecording (no parameters, returns String filePath)
29Future<String> stopRecording() async {
30  if (_recorder == null) return '';
31  final path = await _recorder!.stop();
32  _recorder = null;
33  return path ?? '';
34}

Create a Custom Action named uploadVoiceMessage that accepts the local file path (String) and the chat conversation ID (String) as parameters. The action uploads the file to Firebase Storage at path voice_messages/{conversationId}/{timestamp}.m4a using FirebaseStorage.instance.ref().putFile(). After the upload completes, call getDownloadURL() to retrieve the public URL. Return both the download URL (String) and the file duration in seconds (Integer) from the action. To get duration, use the just_audio AudioPlayer: load the local file, read player.duration, then dispose the player before returning.

1// Custom Action: uploadVoiceMessage
2// Parameters: filePath (String), conversationId (String)
3// Returns: String (download URL)
4import 'package:firebase_storage/firebase_storage.dart';
5import 'package:just_audio/just_audio.dart';
6import 'dart:io';
7
8Future<String> uploadVoiceMessage(String filePath, String conversationId) async {
9  if (filePath.isEmpty) return '';
10
11  final file = File(filePath);
12  final timestamp = DateTime.now().millisecondsSinceEpoch;
13  final storageRef = FirebaseStorage.instance
14      .ref()
15      .child('voice_messages/$conversationId/$timestamp.m4a');
16
17  final uploadTask = await storageRef.putFile(
18    file,
19    SettableMetadata(contentType: 'audio/mp4'),
20  );
21
22  final downloadUrl = await uploadTask.ref.getDownloadURL();
23  return downloadUrl;
24}

After receiving the download URL from the upload action, create a Firestore document in your messages collection (path: conversations/{conversationId}/messages). Set the document fields: type to 'voice', audioUrl to the download URL, senderId to the current user's UID, senderName to the current user's display name, durationSeconds to the recorded duration integer, and createdAt to the server timestamp. The type field is what differentiates voice messages from regular text messages in your ListView rendering logic. In your message ListView item, add a Conditional Builder that shows a voice message playback widget when type equals 'voice' and the normal text bubble when type equals 'text'.

Create a Custom Widget named VoiceMessagePlayer that accepts audioUrl (String) and durationSeconds (Integer) as parameters. Inside the widget, use just_audio's AudioPlayer to load and play the URL. Build a Row containing: a play/pause IconButton that toggles player.play() and player.pause(), a LinearProgressIndicator driven by a StreamBuilder on player.positionStream showing the playback progress, and a Text showing the current position formatted as mm:ss. Initialise the player in initState and call player.setUrl(audioUrl). Dispose the player in dispose(). Register this Custom Widget in FlutterFlow and place it inside the voice message conditional branch of your ListView item.