Skip to main content
CometChatMediaRecorder is a class that allows users to record and send audio messages. It has a start button to start recording, a stop button to stop recording, a play button to play the recorded message, a pause button to pause the recorded message, a submit button to submit the recorded message and a close button to close the media recorder.

​
Usage

CometChatMediaRecorder can be used as a child widget inside another Widget or be launched with a model sheet.
  • Dart
CometChatMediaRecorder(
  startIcon: Icon(Icons.mic),
  playIcon: Icon(Icons.play_arrow),
  pauseIcon: Icon(Icons.pause),
  closeIcon: Icon(Icons.close),
  stopIcon: Icon(Icons.stop),
  submitIcon: Icon(Icons.send),
  onSubmit: (BuildContext, String path) {
    // TODO("Not yet implemented")
  },
  onClose: () {
    // TODO("Not yet implemented")
  },
  mediaRecorderStyle: MediaRecorderStyle(
    pauseIconTint: Colors.red,
    playIconTint: Colors.green,
    closeIconTint: Colors.red,
    timerTextStyle: TextStyle(color: Colors.white),
    submitIconTint: Colors.green,
    startIconTint: Colors.green,
    stopIconTint: Colors.red,
    audioBarTint: Colors.green,
  ),
);

// open the CometChatMediaRecorder widget in a modal sheet
showModalBottomSheet<void>(
  isDismissible: true,
  context: context,
  backgroundColor: Colors.transparent,
  builder: (BuildContext context) {
    return CometChatMediaRecorder(onSubmit: (context,path) {
      // TODO("Not yet implemented")
    });
  };
);

​
Properties

PropertyTypeDescription
startIconWidgetprovides icon to the start Icon/widget that starts recording the audio
stopIconWidgetprovides icon to the start Icon/widget that stops recording the audio
playIconWidgetprovides icon to the start Icon/widget that starts playing the recorded audio
pauseIconWidgetprovides icon to the start Icon/widget that stops playing the recorded audio
closeIconWidgetprovides icon to the start Icon/widget that closes the CometChatMediaRecorder
submitIconWidgetprovides icon to the start Icon/widget that utilizes the path audio recorded through the CometChatMediaRecorder
onSubmitFunction(BuildContext,String)a callback to utilize the path of recorded audio
onCloseFunctiona callback excuted on tapping the closeIcon
mediaRecorderStyleMediaRecorderStylehelps to customize the appearance of CometChatMediaRecorder
themeCometChatThemeused to set custom theme

​
mediaRecorderStyle

A MediaRecorderStyle object is used to customize the appearance of CometChatMediaRecorder.
  • Dart
// Create a MediaRecorderStyle object
MediaRecorderStyle mediaRecorderStyle = MediaRecorderStyle(
  pauseIconTint: Colors.blue,
  playIconTint: Colors.green,
  closeIconTint: Colors.red,
  timerTextStyle: TextStyle(),
  submitIconTint: Colors.blue,
  startIconTint: Colors.green,
  stopIconTint: Colors.red,
  audioBarTint: Colors.blue,
  width: MediaQuery.of(context).size.width,
  height: 150,
  background: Colors.white,
  border: Border.all(),
  borderRadius: BorderRadius.circular(20),
  gradient: LinearGradient(),
);

// Pass that MediaRecorderStyle object to CometChatMediaRecorder
CometChatMediaRecorder(
  mediaRecorderStyle: mediaRecorderStyle
);
⌘I