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

---

AuxiliaryButton Widget

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)

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

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

Custom toolbar view

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

---

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