# StreamVoiceRecording

Stream Chat's Flutter SDK allows you to record and share async voice messages in your channels. The voice recordings have a built-in attachment type (as defined [here](/chat/docs/sdk/flutter/stream_chat_flutter/custom_widgets/adding_custom_attachments/)).

<admonition type="note">

Voice Recordings on Flutter SDK are available since version <b><a href="https://github.com/GetStream/stream-chat-flutter/releases/tag/9.3.0">9.3.0</a></b>

</admonition>

Voice recording is disabled by default. In order to enable it, you should setup the `enableVoiceRecording` property to `true` in the [`MessageInput`](/chat/docs/sdk/flutter/stream_chat_flutter/message_composer/stream_message_input/) widget

```dart
StreamMessageInput(
  ...
  enableVoiceRecording: true,
)
```

As soon as you do that, an additional "Voice Recording" icon button would be shown in the Message Input.

![Voice Recording Enabled](../_assets/voice_recording_enabled.png)

## Recording UI Flows

The voice recording feature supports several different UI flows.

### Idle

The default state of the voice recording button is the idle state where the user can hold on the button to start recording.

![Voice Recording Idle](../_assets/voice_recording_idle.png)

Additionally, if the user lifts the finger before the recording starts, a tooltip is shown to inform the user to hold the button to start recording.

![Voice Recording Idle Tooltip](../_assets/voice_recording_idle_tooltip.png)

### Hold Recording

When the user long presses on the voice recording button longer than 1 second, the recording is started. In that case, while the button is still pressed, the recording view is shown.

The recording view provides the following actions:

- add the recording to the message input (invoked when releasing the long press button)
- slide to cancel (invoked when you drag to the slide to cancel indicator)
- lock the recording (invoked when drag towards the lock button)

![Voice Recording Hold Recording](../_assets/voice_recording_hold_recording.png)

### Locked Recording

When the user drags the recording view towards the lock button, the recording is locked. In that case, the recording no longer requires the user to hold the button to keep recording.

The locked recording view provides the following actions:

- stop the recording (invoked when the stop button is pressed)
- finish the recording (invoked when the finish button is pressed)
- cancel the recording (invoked when the cancel button is pressed)

Additionally, the locked recording view shows the recording duration and the recording waveform.

![Voice Recording Locked Recording](../_assets/voice_recording_locked_recording.png)

### Stopped Recording

When the user stops the recording, the recording can be played back, or the user can choose to cancel or finish the recording.

The stopped recording view provides the following actions:

- play the recording (invoked when the play button is pressed)
- pause the recording (invoked when the pause button is pressed)
- seek the recording (invoked when the user drags the seek bar)
- finish the recording (invoked when the finish button is pressed)
- cancel the recording (invoked when the cancel button is pressed)

Additionally, the stopped recording view shows the recording duration and the recording waveform.

![Voice Recording Stopped](../_assets/voice_recording_stopped.png)

### Finished Recording

When the user finishes the recording, the recording is added to the message input.
The user can choose to play the recording, remove the recording, or send the recording.

Additionally, the user can also add more recordings to the message input by holding the voice recording button again.

Note: If you wish to send the recording automatically after the recording is finished, you can set the `sendVoiceRecordingAutomatically` property to `true` in the `StreamMessageInput` widget.

```dart
StreamMessageInput(
  ...
  sendVoiceRecordingAutomatically: true,
)
```

![Voice Recording Finished](../_assets/voice_recording_finished.png)

### Voice Recording Attachment

Once the recording is sent, the recording is added to the message list view as an attachment.

![Voice Recording Attachment](../_assets/voice_recording_attachment.png)

## Customizing Voice Recording

The voice recording UI can be customized using the `StreamVoiceRecordingAttachmentTheme`.

```dart
StreamVoiceRecordingAttachmentTheme(
  data: StreamVoiceRecordingAttachmentThemeData(
    backgroundColor: const Color(0xffDCF7C5),
    playIcon: const Icon(Icons.play_arrow_rounded),
    pauseIcon: const Icon(Icons.pause_rounded),
    titleTextStyle: const TextStyle(color: Colors.black54),
    durationTextStyle: const TextStyle(color: Colors.black54),
    audioControlButtonStyle: ElevatedButton.styleFrom(
      elevation: 2,
      iconColor: Colors.white,
      minimumSize: const Size(36, 36),
      padding: const EdgeInsets.symmetric(horizontal: 6),
      backgroundColor: Colors.black54,
      shape: const CircleBorder(),
      tapTargetSize: MaterialTapTargetSize.shrinkWrap,
    ),
    speedControlButtonStyle: ElevatedButton.styleFrom(
      elevation: 2,
      minimumSize: const Size(40, 28),
      foregroundColor: Colors.white,
      padding: const EdgeInsets.symmetric(horizontal: 8),
      backgroundColor: Colors.black54,
      shape: const StadiumBorder(),
      tapTargetSize: MaterialTapTargetSize.shrinkWrap,
    ),
    audioWaveformSliderTheme: const StreamAudioWaveformSliderThemeData(
      audioWaveformTheme: StreamAudioWaveformThemeData(
        color: Colors.black54,
        progressColor: Colors.black,
      ),
      thumbColor: Colors.black,
      thumbBorderColor: Colors.black,
    ),
  ),
  child: ...
);
```

This will customize the voice recording attachment UI with the specified theme.

![Voice Recording Attachment Custom](../_assets/voice_recording_attachment_custom.png)

---

This page was last updated at 2025-08-15T14:15:53.889Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/flutter/stream_chat_flutter/stream_voice_recording/](https://getstream.io/chat/docs/sdk/flutter/stream_chat_flutter/stream_voice_recording/).