> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-v6-beta2-flutter-uikit.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Message Composer
## Overview
`CometChatMessageComposer` is a [Widget](/ui-kit/flutter/v6/components-overview#widget) that enables users to write and send a variety of messages, including text, image, video, and custom messages.
Features such as **Live Reaction**, **Attachments**, **Message Editing**, **Rich Text Formatting**, **Code Blocks**, and **Inline Audio Recording** are supported.
`CometChatMessageComposer` is comprised of the following Base Widgets:
| Base Widgets | Description |
| ------------ | --------------------------------------------------------------------------- |
| MessageInput | Provides a basic layout for the contents, such as the TextField and buttons |
| ActionSheet | Presents a list of options in either a list or grid mode |
In V6, the composer is powered by `MessageComposerBloc` and decomposed into focused sub-widgets.
## Usage
### Integration
##### 1. Using Navigator to Launch `CometChatMessageComposer`
```dart theme={null}
Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatMessageComposer(user: user)));
```
##### 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 MessageComposerScreen extends StatefulWidget {
const MessageComposerScreen({super.key});
@override
State createState() => _MessageComposerScreenState();
}
class _MessageComposerScreenState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: true, // Default — ensures keyboard pushes content up
body: Column(
children: [
Expanded(child: CometChatMessageList(user: user)),
CometChatMessageComposer(user: user),
],
),
);
}
}
```
***
### Actions
##### 1. OnSendButtonClick
The `OnSendButtonClick` event gets activated when the send message button is clicked.
```dart theme={null}
CometChatMessageComposer(
user: user,
onSendButtonTap: (BuildContext context, BaseMessage baseMessage, PreviewMessageMode? previewMessageMode) {
// Handle send
},
)
```
***
##### 2. onChange
Handles changes in the value of text in the input field.
```dart theme={null}
CometChatMessageComposer(
user: user,
onChange: (String? text) {
// Handle text change
},
)
```
***
##### 3. onError
Listens for any errors that occur.
```dart theme={null}
CometChatMessageComposer(
user: user,
onError: (e) {
// Handle error
},
)
```
***
### Filters
`CometChatMessageComposer` widget does not have any available filters.
***
### Events
The `CometChatMessageComposer` Widget does not emit any events of its own.
***
## Customization
### Style
##### 1. CometChatMessageComposerStyle
```dart theme={null}
CometChatMessageComposer(
user: user,
messageComposerStyle: CometChatMessageComposerStyle(
sendButtonIconBackgroundColor: Color(0xFFF76808),
secondaryButtonIconColor: Color(0xFFF76808),
auxiliaryButtonIconColor: Color(0xFFF76808),
),
)
```
##### 2. MediaRecorder Style
```dart theme={null}
CometChatMessageComposer(
user: user,
messageComposerStyle: CometChatMessageComposerStyle(
mediaRecorderStyle: CometChatMediaRecorderStyle(
recordIndicatorBackgroundColor: Color(0xFFF44649),
recordIndicatorBorderRadius: BorderRadius.circular(20),
),
),
)
```
***
### Functionality
```dart theme={null}
CometChatMessageComposer(
user: user,
placeholderText: "Type a message...",
disableMentions: true,
)
```
## Message Composer Properties
| Property | Data Type | Description |
| --------------------------- | --------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
| `user` | `User?` | Sets user for the message composer. |
| `group` | `Group?` | Sets group for the message composer. |
| `messageComposerStyle` | `CometChatMessageComposerStyle?` | Sets style for the message composer. |
| `placeholderText` | `String?` | Hint text for the input field. |
| `text` | `String?` | Initial text for the input field. |
| `onChange` | `Function(String text)?` | Callback triggered when text changes. |
| `textEditingController` | `TextEditingController?` | Controls the state of the text field. |
| `maxLine` | `int?` | Maximum number of lines allowed. |
| `disableMentions` | `bool?` | Disables mentions in the composer. |
| `disableTypingEvents` | `bool` | Disables typing events. |
| `disableSoundForMessages` | `bool` | Disables sound for sent messages. |
| `parentMessageId` | `int` | ID of the parent message (default is 0). |
| `sendButtonView` | `Widget?` | Custom send button widget. |
| `attachmentIcon` | `Widget?` | Custom attachment icon. |
| `voiceRecordingIcon` | `Widget?` | Custom voice recording icon. |
| `auxiliaryButtonView` | `ComposerWidgetBuilder?` | UI component as auxiliary button. |
| `secondaryButtonView` | `ComposerWidgetBuilder?` | UI component as secondary button. |
| `hideVoiceRecordingButton` | `bool?` | Hide the voice recording button. |
| `attachmentOptions` | `ComposerActionsBuilder?` | Provides options for file attachments. |
| `hideAttachmentButton` | `bool?` | Hide/display attachment button. |
| `hideImageAttachmentOption` | `bool?` | Hide/display image attachment option. |
| `hideVideoAttachmentOption` | `bool?` | Hide/display video attachment option. |
| `hideAudioAttachmentOption` | `bool?` | Hide/display audio attachment option. |
| `hideFileAttachmentOption` | `bool?` | Hide/display file attachment option. |
| `hidePollsOption` | `bool?` | Hide/display polls option. |
| `onSendButtonTap` | `Function(BuildContext, BaseMessage, PreviewMessageMode?)?` | Callback when send button is tapped. |
| `onError` | `OnError?` | Callback to handle errors. |
| `hideSendButton` | `bool?` | Hide/display the send button. |
| `hideStickersButton` | `bool?` | Hide/display the sticker button. |
| `sendButtonIcon` | `Widget?` | Custom send button icon. |
| `richTextConfiguration` | `RichTextConfiguration?` | Configuration for rich text formatting toolbar. See Rich Text section below. |
| `richTextToolbarView` | `Widget Function(BuildContext, TextEditingController, RichTextFormatterManager)?` | Custom rich text toolbar widget. |
| `onRichTextFormatApplied` | `void Function(RichTextFormatType)?` | Callback when a rich text format is applied. |
| `hideBottomSafeArea` | `bool` | Hide bottom safe area padding (default: `false`). |
***
### Advanced
#### TextFormatters
```dart theme={null}
CometChatMessageComposer(
user: user,
textFormatters: [
CometChatMentionsFormatter(
style: CometChatMentionsStyle(
mentionSelfTextBackgroundColor: Color(0xFFF76808),
mentionTextBackgroundColor: Colors.white,
mentionTextColor: Colors.black,
mentionSelfTextColor: Colors.white,
),
),
],
)
```
***
#### AttachmentOptions
```dart theme={null}
CometChatMessageComposer(
user: user,
attachmentOptions: (context, user, group, id) {
return [
CometChatMessageComposerAction(
id: "Custom Option",
title: "Custom Option",
icon: Icon(Icons.add_box, color: Colors.black),
),
];
},
)
```
***
#### AuxiliaryButton Widget
You can customize the auxiliary button area (mic, sticker, etc.) using the `auxiliaryButtonView` parameter:
```dart theme={null}
CometChatMessageComposer(
user: user,
auxiliaryButtonView: (context, user, group, id) {
return Row(
children: [
IconButton(
icon: Icon(Icons.location_pin, color: Color(0xFF6852D6)),
onPressed: () {
// Handle location sharing
},
),
],
);
},
)
```
***
## Rich Text Formatting
The composer includes a WYSIWYG rich text toolbar. Configure it via `richTextConfiguration`:
### Enable with defaults
```dart theme={null}
CometChatMessageComposer(
user: user,
richTextConfiguration: RichTextConfiguration(),
)
```
### Toolbar modes
| Mode | Description |
| ----------------------------------- | ----------------------------------- |
| `RichTextToolbarMode.alwaysVisible` | Toolbar always shown (default) |
| `RichTextToolbarMode.onSelection` | Toolbar shown when text is selected |
| `RichTextToolbarMode.disabled` | Rich text formatting disabled |
```dart theme={null}
CometChatMessageComposer(
user: user,
richTextConfiguration: RichTextConfiguration(
toolbarMode: RichTextToolbarMode.onSelection,
),
)
```
### Disable specific formats
```dart theme={null}
CometChatMessageComposer(
user: user,
richTextConfiguration: RichTextConfiguration(
enableCodeBlock: false,
enableBlockquote: false,
enableOrderedList: false,
),
)
```
### RichTextConfiguration properties
| Property | Type | Default | Description |
| ---------------------- | --------------------- | --------------- | --------------------------------------------- |
| `toolbarMode` | `RichTextToolbarMode` | `alwaysVisible` | How the toolbar is displayed |
| `previewMode` | `RichTextPreviewMode` | `onFormatting` | How the preview is displayed |
| `enableAutoFormatting` | `bool` | `true` | Auto-detect and format Markdown as user types |
| `enableBold` | `bool` | `true` | Bold (`**text**`) |
| `enableItalic` | `bool` | `true` | Italic (`_text_`) |
| `enableUnderline` | `bool` | `true` | Underline (`text`) |
| `enableStrikethrough` | `bool` | `true` | Strikethrough (`~~text~~`) |
| `enableInlineCode` | `bool` | `true` | Inline code (`` `code` ``) |
| `enableCodeBlock` | `bool` | `true` | Code block (` ```code``` `) |
| `enableLinks` | `bool` | `true` | Links (`[text](url)`) |
| `enableBulletList` | `bool` | `true` | Bullet list (`- item`) |
| `enableOrderedList` | `bool` | `true` | Ordered list (`1. item`) |
| `enableBlockquote` | `bool` | `true` | Blockquote (`> text`) |
### Custom toolbar view
```dart theme={null}
CometChatMessageComposer(
user: user,
richTextConfiguration: RichTextConfiguration(),
richTextToolbarView: (context, controller, manager) {
return Row(
children: [
IconButton(
icon: Icon(Icons.format_bold),
onPressed: () => manager.applyFormat(RichTextFormatType.bold),
),
IconButton(
icon: Icon(Icons.format_italic),
onPressed: () => manager.applyFormat(RichTextFormatType.italic),
),
],
);
},
)
```
***
## V6 Architecture
### Sub-Widget Decomposition
| Widget | Purpose |
| --------------------------------- | ------------------------- |
| `AttachmentOptionsOverlay` | Attachment picker overlay |
| `MessageComposerAuxiliaryButtons` | Auxiliary button area |
| `MessageComposerSecondaryButtons` | Secondary button area |
| `MessageComposerSendButton` | Send button |
| `MessageComposerSuggestionList` | Suggestion/mention list |
| `ComposerAttachmentUtils` | Attachment utilities |
### BLoC Architecture
| Component | Description |
| ---------------------- | -------------------------------------------------------------------------------------------------- |
| `MessageComposerBloc` | Manages composer state |
| `MessageComposerEvent` | Events: `SendTextMessage`, `SendMediaMessage`, `EditTextMessage`, `StartTyping`, `EndTyping`, etc. |
| `MessageComposerState` | Composer state |
### Use Cases
| Use Case | Description |
| -------------------------- | --------------------------- |
| `SendTextMessageUseCase` | Sends text messages |
| `SendMediaMessageUseCase` | Sends media messages |
| `SendCustomMessageUseCase` | Sends custom messages |
| `EditMessageUseCase` | Edits messages |
| `TypingUseCases` | Start/end typing indicators |
| `GetLoggedInUserUseCase` | Gets the logged-in user |