Message Composer

Overview

CometChatMessageComposer is a 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

Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatMessageComposer(user: user)));

2. Embedding `CometChatMessageComposer` as a Widget in the build Method

Dart

import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
import 'package:flutter/material.dart';

class MessageComposerScreen extends StatefulWidget {
  const MessageComposerScreen({super.key});

  @override
  State<MessageComposerScreen> createState() => _MessageComposerScreenState();
}

class _MessageComposerScreenState extends State<MessageComposerScreen> {
  @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

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

CometChatMessageComposer(
  user: user,
  onChange: (String? text) {
    // Handle text change
  },
)

3. onError

Listens for any errors that occur.

Dart

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

CometChatMessageComposer(
  user: user,
  messageComposerStyle: CometChatMessageComposerStyle(
    sendButtonIconBackgroundColor: Color(0xFFF76808),
    secondaryButtonIconColor: Color(0xFFF76808),
    auxiliaryButtonIconColor: Color(0xFFF76808),
  ),
)

2. MediaRecorder Style

Dart

CometChatMessageComposer(
  user: user,
  messageComposerStyle: CometChatMessageComposerStyle(
    mediaRecorderStyle: CometChatMediaRecorderStyle(
      recordIndicatorBackgroundColor: Color(0xFFF44649),
      recordIndicatorBorderRadius: BorderRadius.circular(20),
    ),
  ),
)

Functionality

Dart

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 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<FormatType>`	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

CometChatMessageComposer(
  user: user,
  textFormatters: [
    CometChatMentionsFormatter(
      style: CometChatMentionsStyle(
        mentionSelfTextBackgroundColor: Color(0xFFF76808),
        mentionTextBackgroundColor: Colors.white,
        mentionTextColor: Colors.black,
        mentionSelfTextColor: Colors.white,
      ),
    ),
  ],
)

AttachmentOptions

Dart

CometChatMessageComposer(
  user: user,
  attachmentOptions: (context, user, group, id) {
    return <CometChatMessageComposerAction>[
      CometChatMessageComposerAction(
        id: "Custom Option",
        title: "Custom Option",
        icon: Icon(Icons.add_box, color: Colors.black),
      ),
    ];
  },
)

You can customize the auxiliary button area (mic, sticker, etc.) using the auxiliaryButtonView parameter:

Dart

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

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

CometChatMessageComposer(user: user)

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

CometChatMessageComposer(
  user: user,
  showRichTextFormattingOptions: false, // parses markdown, no toolbar
)

Hide specific format buttons

Pass a Set<FormatType> listing the buttons to remove from the toolbar.

Dart

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

CometChatMessageComposer(
  user: user,
  enableRichTextFormatting: false,
)

FormatType values

Value	Markdown
`FormatType.bold`	`text`
`FormatType.italic`	`_text_` or `text`
`FormatType.underline`	`<u>text</u>`
`FormatType.strikethrough`	`~~text~~`
`FormatType.inlineCode`	`code`
`FormatType.codeBlock`	```code```
`FormatType.link`	`[text](url)`
`FormatType.bulletList`	`- item`
`FormatType.orderedList`	`1. item`
`FormatType.blockquote`	`> quote`

richTextToolbarView receives the active controller. Because the controller is a RichTextEditingController under the hood, apply formats directly via applyFormat.

Dart

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}');
  },
)

Multiple Attachments

The composer can stage several media/file attachments and send them as one message.

Pick — the image/video option opens a multi-select picker, capped to the slots left on the message. Audio and documents are multi-select too.
Stage — each pick lands in the attachment tray as a tile with a live progress ring, and starts uploading immediately.
Send — the send button stays disabled until every tile finishes. Text typed alongside rides along as the caption, with rich-text formatting preserved as Markdown.

Files can also arrive by clipboard paste (images, video, audio, documents) and, on web, by drag-and-drop onto the composer. A selection spanning several kinds is split by kind and sent as one message per kind, in the order image → video → audio → file. Every message therefore carries a single kind and renders with that kind’s bubble — pick three photos and a PDF and the photos still arrive as an image grid, the PDF as a file card. They share a batchId, so the Message List groups them as one block.

Voice notes are never staged — a recording is always its own message and sends immediately. While the tray holds any tile, the mic button is hidden.

Limits and Validation

Limits come from your app’s settings in the CometChat dashboard and are read at runtime — the UI Kit does not hardcode them.

Limit	Setting	Behaviour
Files per message	`file.count.max` (default 10)	The picker is capped to the remaining slots. A selection larger than that is rejected whole, with a toast — nothing is staged.
Per-file size	`file.size.max` (default 100 MB)	An over-sized file becomes a non-retryable error tile stating the limit.
File type	Server-side	Rejected uploads become error tiles.

Error tiles come in two flavours and behave differently:

Failed (network dropped) — tap the tile to retry it in place.
Rejected (too large, wrong type, over the count) — not retryable; tapping explains why, and you remove the tile.

Sending is blocked while any tile is uploading or in error, so a caption can never go out while its attachments are still in flight.

Disabling Multiple Attachments

Multiple attachments are on by default. Turn them off to restore the classic one-file-per-message behaviour.

Dart

CometChatMessageComposer(
  user: user,
  enableMultipleAttachments: false,
)

This is composer-side only. Incoming messages carrying several attachments still render as grouped bubbles — that is controlled by enableMultipleAttachments on CometChatMessageList.

Styling the Attachment Tray

The staging tray’s tiles are styled through the composer’s own style object.

Dart

CometChatMessageComposer(
  user: user,
  messageComposerStyle: CometChatMessageComposerStyle(
    attachmentTrayStyle: CometChatAttachmentTrayStyle(),
  ),
)

Style the error alerts

Dart

CometChatMessageComposer(
  user: user,
  // Brief toast shown when a selection is over the count limit.
  errorAlertStyle: CometChatErrorAlertStyle(),
  // Snackbar that explains why a tile failed.
  attachmentErrorSnackBarStyle: CometChatAttachmentErrorSnackBarStyle(),
  // Or replace that snackbar entirely.
  attachmentErrorSnackBarBuilder: (context, tile) => MySnackBar(tile),
  // Called when the user taps an error tile.
  onAttachmentErrorTap: (tile) {},
)

Multiple Attachments Properties

Property	Data Type	Description
`enableMultipleAttachments`	`bool`	Master switch for staging. Defaults to `true`.
`attachmentTrayController`	`AttachmentTrayController?`	Drive the tray yourself. When omitted the composer owns one.
`onAttachmentTrayAdd`	`VoidCallback?`	Fires when the user taps + on the tray.
`onAttachmentTraySend`	`VoidCallback?`	Overrides the batch send — you send the messages yourself.
`disableImagePaste`	`bool`	Turns off clipboard paste. Defaults to `false`.
`disableDragAndDrop`	`bool`	Turns off drag-and-drop on web. Defaults to `false`.
`errorAlertStyle`	`CometChatErrorAlertStyle?`	Styles the over-limit toast.
`attachmentErrorSnackBarStyle`	`CometChatAttachmentErrorSnackBarStyle?`	Styles the error-tile snackbar.
`attachmentErrorSnackBarBuilder`	`Widget Function(BuildContext, AttachmentTile)?`	Replaces the error snackbar.
`onAttachmentErrorTap`	`Function(AttachmentTile)?`	Called when an error tile is tapped.

For the upload API underneath the tray, see Upload Files & Send Attachments.

V6 Architecture

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

Overview

Usage

Integration

1. Using Navigator to Launch `CometChatMessageComposer`

2. Embedding `CometChatMessageComposer` as a Widget in the build Method

Actions

1. OnSendButtonClick

2. onChange

3. onError

Filters

Events

Customization

Style

1. CometChatMessageComposerStyle

2. MediaRecorder Style

Functionality

Message Composer Properties

Advanced

TextFormatters

AttachmentOptions

AuxiliaryButton Widget

Layout

Rich Text Formatting

Enable with defaults

Hide specific format buttons

Disable rich text entirely

FormatType values

Multiple Attachments

Limits and Validation

Disabling Multiple Attachments

Styling the Attachment Tray

Style the error alerts

Multiple Attachments Properties

V6 Architecture

Sub-Widget Decomposition

BLoC Architecture

Use Cases

​Overview

​Usage

​Integration

1. Using Navigator to Launch CometChatMessageComposer

2. Embedding CometChatMessageComposer as a Widget in the build Method

​Actions

1. OnSendButtonClick

2. onChange

3. onError

​Filters

​Events

​Customization

​Style

1. CometChatMessageComposerStyle

2. MediaRecorder Style

​Functionality

​Message Composer Properties

​Advanced

​TextFormatters

​AttachmentOptions

​AuxiliaryButton Widget

​Layout

​Rich Text Formatting

​Enable with defaults

​Show or hide the toolbar UI

​Hide specific format buttons

​Disable rich text entirely

​FormatType values

​Custom toolbar view

​Multiple Attachments

​Limits and Validation

​Disabling Multiple Attachments

​Styling the Attachment Tray

​Style the error alerts

​Multiple Attachments Properties

​V6 Architecture

​Sub-Widget Decomposition

​BLoC Architecture

​Use Cases

Overview

Usage

Integration

1. Using Navigator to Launch `CometChatMessageComposer`

2. Embedding `CometChatMessageComposer` as a Widget in the build Method

Actions

Filters

Events

Customization

Style

Functionality

Message Composer Properties

Advanced

TextFormatters

AttachmentOptions

AuxiliaryButton Widget

Layout

Rich Text Formatting

Enable with defaults

Show or hide the toolbar UI

Hide specific format buttons

Disable rich text entirely

FormatType values

Custom toolbar view

Multiple Attachments

Limits and Validation

Disabling Multiple Attachments

Styling the Attachment Tray

Style the error alerts

Multiple Attachments Properties

V6 Architecture

Sub-Widget Decomposition

BLoC Architecture

Use Cases