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

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

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

​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

V6 Architecture

Sub-Widget Decomposition

BLoC Architecture

Use Cases