> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-feature-card-builder.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Message Composer
> Configure CometChat Flutter UI Kit Message Composer for text, media, custom messages, live reactions, editing, rich text, and audio.
## Overview
`CometChatMessageComposer` is a [Widget](/ui-kit/flutter/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(
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. |
| `layout` | `CometChatComposerLayout` | Composer skeleton: `singleLine` (default) or `doubleLine`. See [Layout](#layout) below. |
| `enableRichTextFormatting` | `bool` | Master switch for rich text (markdown detection, toolbar, WYSIWYG rendering). Default `true`. |
| `showRichTextFormattingOptions` | `bool` | Whether the rich text toolbar UI is visible. Default `true`. |
| `hideRichTextFormattingOptions` | `Set` | Set of format buttons to hide from the toolbar. Default `{}`. |
| `richTextToolbarView` | `Widget Function(BuildContext, TextEditingController)?` | Custom rich text toolbar widget. |
| `onRichTextFormatApplied` | `void Function(FormatType)?` | Callback fired when a toolbar format is applied. |
| `hideBottomSafeArea` | `bool` | Hide bottom safe area padding (default: `false`). |
| `resizeToAvoidBottomInset` | `bool` | Indicates the parent `Scaffold` uses its default `resizeToAvoidBottomInset: true` and will handle keyboard insets itself. Default `true`. Flip to `false` only if you opt into the composer's internal keyboard-aware spacing and set `resizeToAvoidBottomInset: false` on your Scaffold. |
| `onKeyboardDiagnostics` | `CometChatKeyboardDiagnosticsCallback?` | Debug hook fired on every internal keyboard-state change. Leave `null` in production. |
***
### 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
},
),
],
);
},
)
```
***
## Layout
The composer skeleton supports two layouts via the `layout` prop:
| Value | Description |
| ------------------------------------ | ------------------------------------------------------------------------------------- |
| `CometChatComposerLayout.singleLine` | **Default.** Text field and all buttons share a single row. |
| `CometChatComposerLayout.doubleLine` | Classic v5 look — text field on its own row, buttons on a second row below a divider. |
All existing props (hide flags, view slots, style, mentions, rich text, voice recording, reply/edit preview, AI options) work identically in both layouts.
```dart theme={null}
CometChatMessageComposer(
user: user,
layout: CometChatComposerLayout.doubleLine,
)
```
***
## Rich Text Formatting
The composer ships with a WYSIWYG rich-text toolbar that parses Markdown as the user types and renders formatted spans in place. Configuration is done with three flat props.
### Enable with defaults
Rich text is on by default — no props required.
```dart theme={null}
CometChatMessageComposer(user: user)
```
### Show or hide the toolbar UI
`showRichTextFormattingOptions` controls toolbar visibility. When `false`, markdown is still parsed in typed text but no toolbar is rendered.
| Layout | Toolbar placement |
| ------------ | ---------------------------------------------------------------------- |
| `singleLine` | Persistent row directly below the text input |
| `doubleLine` | Behind an `Aa` toggle in the button row — tapping swaps in the toolbar |
```dart theme={null}
CometChatMessageComposer(
user: user,
showRichTextFormattingOptions: false, // parses markdown, no toolbar
)
```
### Hide specific format buttons
Pass a `Set` listing the buttons to remove from the toolbar.
```dart theme={null}
CometChatMessageComposer(
user: user,
hideRichTextFormattingOptions: const {
FormatType.strikethrough,
FormatType.codeBlock,
FormatType.blockquote,
},
)
```
### Disable rich text entirely
Set `enableRichTextFormatting: false` to behave as a plain text field — no markdown parsing, no toolbar, regardless of the other two props.
```dart theme={null}
CometChatMessageComposer(
user: user,
enableRichTextFormatting: false,
)
```
### FormatType values
| Value | Markdown |
| -------------------------- | -------------------- |
| `FormatType.bold` | `**text**` |
| `FormatType.italic` | `_text_` or `*text*` |
| `FormatType.underline` | `text` |
| `FormatType.strikethrough` | `~~text~~` |
| `FormatType.inlineCode` | `` `code` `` |
| `FormatType.codeBlock` | ` ```code``` ` |
| `FormatType.link` | `[text](url)` |
| `FormatType.bulletList` | `- item` |
| `FormatType.orderedList` | `1. item` |
| `FormatType.blockquote` | `> quote` |
### Custom toolbar view
`richTextToolbarView` receives the active controller. Because the controller is a `RichTextEditingController` under the hood, apply formats directly via `applyFormat`.
```dart theme={null}
CometChatMessageComposer(
user: user,
richTextToolbarView: (context, controller) {
return Row(
children: [
IconButton(
icon: const Icon(Icons.format_bold),
onPressed: () {
(controller as RichTextEditingController).applyFormat(FormatType.bold);
},
),
IconButton(
icon: const Icon(Icons.format_italic),
onPressed: () {
(controller as RichTextEditingController).applyFormat(FormatType.italic);
},
),
],
);
},
onRichTextFormatApplied: (formatType) {
debugPrint('Applied ${formatType.name}');
},
)
```
***
## 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 |