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).

Voice recording is disabled by default. In order to enable it, you should setup the enableVoiceRecording property to true in the MessageInput widget

StreamMessageInput(
  ...
  enableVoiceRecording: true,
)

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

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.

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.

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)

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.

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.

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.

StreamMessageInput(
  ...
  sendVoiceRecordingAutomatically: true,
)

Voice Recording Attachment

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

Customizing Voice Recording

The voice recording UI can be customized using the StreamVoiceRecordingAttachmentTheme.

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.