> ## Documentation Index > Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Message Composer > Message Composer — CometChat documentation. ## Overview `CometChatMessageComposer` is a [Widget](/ui-kit/flutter/v4/components-overview#components) that enables users to write and send a variety of messages, including text, image, video, and custom messages. Features such as **Live Reaction**, **Attachments**, and **Message Editing** are also supported by it. `CometChatMessageComposer` is comprised of the following [Base Widgets](/ui-kit/flutter/v4/components-overview#base-components): | Base Widgets | Description | | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------- | | [MessageInput](/ui-kit/flutter/v4/message-input) | This provides a basic layout for the contents of this component, such as the TextField and buttons | | [ActionSheet](/ui-kit/flutter/v4/action-sheet) | The ActionSheet widget presents a list of options in either a list or grid mode, depending on the user's preference | ## Usage ### Integration You can launch `CometChatMessageComposer` directly using `Navigator.push`, or you can define it as a widget within the `build` method of your `State` class. ##### 1. Using Navigator to Launch `CometChatMessageComposer` ```dart theme={null} Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatMessageComposer())); // A user or group object is required to launch this widget. ``` ##### 2. Embedding `CometChatMessageComposer` as a Widget in the build Method ```dart theme={null} import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart'; import 'package:flutter/material.dart'; class MessageComposer extends StatefulWidget { const MessageComposer({super.key}); @override State createState() => _MessageComposerState(); } class _MessageComposerState extends State { @override Widget build(BuildContext context) { return Scaffold( body: SafeArea( child: Column( children: [ const Spacer(), CometChatMessageComposer() ], ) // A user or group object is required to launch this widget. ) ); } } ``` *** ### Actions [Actions](/ui-kit/flutter/v4/components-overview#actions) dictate how a widget functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the widget to fit your specific needs. ##### 1. OnSendButtonClick The `OnSendButtonClick` event gets activated when the send message button is clicked. It has a predefined function of sending messages entered in the composer `EditText`. However, you can overide this action with the following code snippet. ```dart theme={null} CometChatMessageComposer( user: user, onSendButtonTap: (BuildContext context, BaseMessage baseMessage, PreviewMessageMode? previewMessageMode) { // TODO("Not yet implemented") }, ) ``` *** ##### 2. onChange This action handles changes in the value of text in the input field of the CometChatMessageComposer widget. ```dart theme={null} CometChatMessageComposer( user: user, onChange: (String? text) { // TODO("Not yet implemented") }, ) ``` *** ##### 3. onError This action doesn't change the behavior of the widget but rather listens for any errors that occur in the MessageList widget. ```dart theme={null} CometChatMessageComposer( user: user, onError: (e) { // TODO("Not yet implemented") }, ) ``` *** ### Filters `CometChatMessageComposer` widget does not have any available filters. *** ### Events [Events](/ui-kit/flutter/v4/components-overview#events) are emitted by a `Widget`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed. The `CometChatMessageComposer` Widget does not emit any events of its own. *** ## Customization To fit your app's design requirements, you can customize the appearance of the `CometChatMessageComposer` widget. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs. ### Style Using Style you can customize the look and feel of the widget in your app, These parameters typically control elements such as the color, size, shape, and fonts used within the widget. ##### 1. `CometChatMessageComposer` Style To modify the styling, you can apply the MessageComposerStyle to the `CometChatMessageComposer` Widget using the `messageComposerStyle` method. ```dart theme={null} CometChatMessageComposer( user: user, messageComposerStyle: MessageComposerStyle( background: Color(0xFFE4EBF5), inputBackground: Color(0xFFE4EBF5), border: Border.all(width: 3, color: Color(0xFF6851D6)) ), ) ``` Image Image *** The following properties are exposed by MessageComposerStyle: | **Property** | Description | Code | | ----------------------------- | --------------------------------------------------- | ---------------------------------- | | **Ai Icon Tint** | Sets the tint color for the AI icon. | `aiIconTint: Color?` | | **Attachment Icon Tint** | Sets the tint color for the attachment icon. | `attachmentIconTint: Color?` | | **Background** | Sets the background color of the message composer. | `background: Color?` | | **Border** | Sets the border properties of the message composer. | `border: Border?` | | **Border Radius** | Sets the border radius of the message composer. | `borderRadius: BorderRadius?` | | **Close Icon Tint** | Sets the tint color for the close icon. | `closeIconTint: Color?` | | **Content Padding** | Sets the padding around the content. | `contentPadding: EdgeInsets?` | | **Divider Tint** | Sets the tint color for the divider. | `dividerTint: Color?` | | **Gradient** | Sets the gradient applied to the message composer. | `gradient: Gradient?` | | **Height** | Sets the height of the message composer. | `height: double?` | | **Input Background** | Sets the background color of the input field. | `inputBackground: Color?` | | **Input Gradient** | Sets the gradient applied to the input field. | `inputGradient: Gradient?` | | **Input Text Style** | Sets the text style for the input field. | `inputTextStyle: TextStyle?` | | **Message Input Padding** | Sets the padding around the message input field. | `messageInputPadding: EdgeInsets?` | | **Placeholder Text Style** | Sets the text style for the placeholder text. | `placeholderTextStyle: TextStyle?` | | **Send Button Icon** | Sets the icon for the send button. | `sendButtonIcon: Icon?` | | **Send Button Icon Tint** | Sets the tint color for the send button icon. | `sendButtonIconTint: Color?` | | **Voice Recording Icon Tint** | Sets the tint color for the voice recording icon. | `voiceRecordingIconTint: Color?` | | **Width** | Sets the width of the message composer. | `width: double?` | *** ##### 2. MediaRecorder Style To customize the styles of the MediaRecorder widget within the `CometChatMessageComposer` Widget, use the `mediaRecorderStyle`. For more details, please refer to [MediaRecorder](/ui-kit/flutter/v4/media-recorder) styles. ```dart theme={null} CometChatMessageComposer( user: user, mediaRecorderStyle: MediaRecorderStyle( background: Color(0xFFE4EBF5), border: Border.all(width: 3, color: Colors.red), pauseIconTint: Colors.red, playIconTint: Colors.red, closeIconTint: Colors.red, timerTextStyle: const TextStyle(color: Colors.black, fontFamily: "PlaywritePL"), submitIconTint: Colors.red, startIconTint: Colors.red, stopIconTint: Colors.red, ), ) ``` *** ##### 3. AI Options Style To customize the styles of the AI Options widget within the `CometChatMessageComposer` Widget, use the `aiOptionStyle`. ```dart theme={null} CometChatMessageComposer( user: user, aiOptionStyle: AIOptionsStyle( background: Color(0xFFE4EBF5), border: Border.all(width: 3, color: Colors.red), ) ) ``` *** ### Functionality These are a set of small functional customizations that allow you to fine-tune the overall experience of the widget. With these, you can change text, set custom icons, and toggle the visibility of UI elements. Image Image ```dart theme={null} CometChatMessageComposer( user: user, placeholderText: "Type a message...", liveReactionIcon: const Icon(Icons.live_tv, color: Colors.green,), hideVoiceRecording: true, disableMentions: true, ) ``` Image Image Below is a list of customizations along with corresponding code snippets | **Property** | Description | Code | | ------------------------------- | ----------------------------------------------------- | -------------------------------------------- | | **Ai Icon** | Sets the AI icon. | `aiIcon: Icon?` | | **Ai Icon Url** | Sets the URL for the AI icon. | `aiIconURL: String?` | | **Attachment Icon** | Sets the icon for attachments. | `attachmentIcon: Icon?` | | **Attachment Icon Url** | Sets the URL for the attachment icon. | `attachmentIconURL: String?` | | **Attachment Options** | Sets the options for attachment actions. | `attachmentOptions: ComposerActionsBuilder?` | | **Auxiliary Buttons Alignment** | Sets the alignment for auxiliary buttons. | `auxiliaryButtonsAlignment: Alignment?` | | **Custom Sound For Message** | Sets the custom sound for messages. | `customSoundForMessage: String?` | | **Delete Icon** | Sets the icon for the delete action. | `deleteIcon: Icon?` | | **Disable Mentions** | Disables mentions in the message composer. | `disableMentions: bool?` | | **Disable Sound For Messages** | Disables sound notifications for messages. | `disableSoundForMessages: bool` | | **Disable Typing Events** | Disables typing events. | `disableTypingEvents: bool` | | **Live Reaction Icon** | Sets the icon for live reactions. | `liveReactionIcon: Icon?` | | **Live Reaction Icon Url** | Sets the URL for the live reaction icon. | `liveReactionIconURL: String?` | | **Max Line** | Sets the maximum number of lines for the input field. | `maxLine: int?` | | **Pause Icon** | Sets the icon for the pause action. | `pauseIcon: Icon?` | | **Placeholder Text** | Sets the placeholder text for the input field. | `placeholderText: String?` | | **Play Icon** | Sets the icon for the play action. | `playIcon: Icon?` | | **Record Icon** | Sets the icon for the record action. | `recordIcon: Icon?` | | **Stop Icon** | Sets the icon for the stop action. | `stopIcon: Icon?` | | **Submit Icon** | Sets the icon for the submit action. | `submitIcon: Icon?` | | **Text** | Sets the initial text for the input field. | `text: String?` | *** ### Advanced For advanced-level customization, you can set custom widgets to the widget. This lets you tailor each aspect of the widget to fit your exact needs and application aesthetics. You can create and define your widgets and then incorporate those into the widget. *** #### TextFormatters Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source. To configure the existing Mentions look and feel check out [CometChatMentionsFormatter](/ui-kit/flutter/v4/mentions-formatter-guide) **Example** Here is the complete example for reference: ```dart theme={null} CometChatMessageComposer( user: user, textFormatters: [ CometChatMentionsFormatter( messageBubbleTextStyle: (theme, alignment,{forConversation = false}) => TextStyle( color: alignment==BubbleAlignment.left? Colors.orange : Colors.pink, fontSize: 14, fontWeight: FontWeight.bold ), ) ], ) ``` Image Image *** #### AttachmentOptions By using `attachmentOptions`, you can set a list of custom `MessageComposerActions` for the `CometChatMessageComposer` Widget. This will override the existing list of `MessageComposerActions`. **Example** Here is the complete example for reference: ```dart theme={null} CometChatMessageComposer( user: user, attachmentOptions: (context, user, group, id) { return [ CometChatMessageComposerAction( id: 'opt1', title: "Send Image", iconUrl: "assets/img/envelope.png", onItemClick: (BuildContext context, User? user, Group? group) { // TODO("Not yet implemented") } ), CometChatMessageComposerAction( id: 'opt1', title: "Send Image", iconUrl: "assets/img/envelope.png", onItemClick: (BuildContext context, User? user, Group? group) { // TODO("Not yet implemented") } ), CometChatMessageComposerAction( id: 'opt1', title: "Send Image", iconUrl: "assets/img/envelope.png", onItemClick: (BuildContext context, User? user, Group? group) { // TODO("Not yet implemented") } ), ]; }, ) ``` Image Image *** #### AuxiliaryButton Widget You can insert a custom widget into the `CometChatMessageComposer` widget to add additional functionality using the following method. **Example** Here is the complete example for reference: ```dart theme={null} CometChatMessageComposer( user: user, auxiliaryButtonView: (context, user, group, id) { return Container( color: Colors.yellow, padding: const EdgeInsets.all(8), child: const Row( children: [ Icon(Icons.account_balance_wallet_outlined, color: Color(0xFF6851D6)), SizedBox(width: 10,), Icon(Icons.add_alert_outlined, color: Color(0xFF6851D6)), ], ), ); } ) ``` Image Image *** #### SecondaryButton Widget You can add a custom widget into the SecondaryButton widget for additional functionality using the below method. **Example** Here is the complete example for reference: ```dart theme={null} CometChatMessageComposer( user: user, secondaryButtonView: (context, user, group, id) { return Container( color: Colors.yellow, padding: const EdgeInsets.all(8), child: const Icon(Icons.menu, color: Color(0xFF6851D6)), ); }, ) ``` Image Image *** #### SendButton Widget You can set a custom widget in place of the already existing send button widget. Using the following method. **Example** Here is the complete example for reference: ```dart theme={null} CometChatMessageComposer( user: user, sendButtonView: Container( color: Colors.yellow, padding: const EdgeInsets.all(8), child: const Icon(Icons.send_time_extension_outlined, color: Color(0xFF6851D6)), ), ) ``` Image Image *** #### Header Widget You can set custom headerView to the `CometChatMessageComposer` widget using the following method **Example** Here is the complete example for reference: ```dart theme={null} CometChatMessageComposer( user: user, headerView: (context, user, group, id) { return Container( width: MediaQuery.of(context).size.width/1.08, color: Colors.yellow, padding: const EdgeInsets.all(8), child: const Center(child: Text("Your Header Widget")), ); }, ) ``` Image Image *** #### Footer Widget You can set a custom footer widget to the `CometChatMessageComposer` widget using the following method: **Example** Here is the complete example for reference: ```dart theme={null} CometChatMessageComposer( user: user, footerView: (context, user, group, id) { return Container( width: MediaQuery.of(context).size.width/1.08, color: Colors.yellow, padding: const EdgeInsets.all(8), child: const Center(child: Text("Your Footer Widget")), ); }, ) ``` Image Image ***