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(
      resizeToAvoidBottomInset: false, // REQUIRED — composer handles keyboard internally
      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,
)