Conversations - CometChat Docs

Overview

The CometChatConversations is a Widget, That shows all conversations related to the currently logged-in user,

Usage

Integration

As CometChatConversations is a widget, it can be initiated either by tapping a button or through the trigger of any event. It offers multiple parameters and methods for tailoring its user interface. You can launch CometChatConversations directly using Navigator.push, or you can define it as a widget within the build method of your State class.

1. Using Navigator to Launch `CometChatConversations`

Dart

Navigator.push(context, MaterialPageRoute(builder: (context) => const CometChatConversations()));

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

Dart

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

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

  @override
  State<Conversations> createState() => _ConversationsState();
}

class _ConversationsState extends State<Conversations> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: CometChatConversations(),
      ),
    );
  }
}

Actions

Actions dictate how a widget functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the widget to fit your specific needs.

onItemTap

onItemTap is triggered when you click on a ListItem of the CometChatConversations widget. This onItemTap method proves beneficial when a user intends to customize the click behavior in CometChatConversations.

Dart

CometChatConversations(
    onItemTap: (conversation) => {
        // TODO("Not yet implemented")
    }
),

onItemLongPress

onItemLongPress is triggered when you on long press on a ListItem of the CometChatConversations widget. This onItemLongPress method proves beneficial when a user intends to customize the long press behavior in CometChatConversations.

Dart

CometChatConversations(
    onItemLongPress: (conversation) => {
         // Handle long press on conversation item
    }
),

onBack

This onBack method becomes valuable when a user needs to override the action triggered upon pressing the back button in CometChatConversations.

Dart

CometChatConversations(
    onBack: () => {
        // TODO("Not yet implemented")
    },
),

setOnSelection

The onSelection feature enables selection with modes: SelectionMode.single and SelectionMode.multiple. The onSelection event is triggered upon the completion of a selection in onSelection. This returns the selected conversations list when the callback is triggered. It can be executed with any button or action.

Dart

CometChatConversations(
    selectionMode: SelectionMode.multiple,
    onSelection: (list) => {
        // TODO("Not yet implemented")
    },
),

onError

This method proves helpful when a user needs to customize the action taken upon encountering an error in CometChatConversations.

Dart

CometChatConversations(
    onError: (e) {
        // TODO("Not yet implemented")
    },
),

onLoad

Invoked when the list is successfully fetched and loaded, helping track component readiness.

Dart

CometChatConversations(
    onLoad: (list) {
        // Handle conversations list load
    },
),

onEmpty

Called when the list is empty, enabling custom handling such as showing a placeholder message

Dart

CometChatConversations(
    onEmpty: () {
        // Handle empty conversations list
    },
),

Filters

You can set ConversationsRequestBuilder in the CometChatConversations widget to filter the conversation list. You can modify the builder as per your specific requirements with multiple options available to know more refer to ConversationsRequestBuilder. You can set filters using the following parameters.

Conversation Type: Filters on type of Conversation, User or Groups.
Limit: Number of conversations fetched in a single request.
WithTags: Filter on fetching conversations containing tags.
Tags: Filters on specific Tag.
UserTags: Filters on specific User Tag.
GroupTags: Filters on specific Group Tag.

Dart

CometChatConversations(
    conversationsRequestBuilder: ConversationsRequestBuilder()
        ..conversationType = "user"
        ..limit = 10
        ..withTags = false,
)

You can set filters using the following parameters:

Property	Description	Code
Build	Builds and returns an `ConversationsRequest` object.	`build(): ConversationsRequest`
Conversation Type	Type of the conversation.	`conversationType: String?`
Limit	Number of results to limit the query.	`limit: int?`
Tags	Tags for filtering.	`tags: List<String>?`
With Tags	Flag to include tags.	`withTags: bool?`
With User And Group Tags	Flag to include user and group tags.	`withUserAndGroupTags: bool?`

Events

Events are emitted by a Widget. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.

1. Conversation Deleted

This ccConversationDeleted will be emitted when the user deletes a conversation

Dart

import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';

class _YourScreenState extends State<YourScreen> with CometChatConversationEventListener {

  @override
  void initState() {
    super.initState();
    CometChatConversationEvents.addConversationListListener("listenerId", this); // Add the listener
  }

  @override
  void dispose(){
    super.dispose();
    CometChatConversationEvents.removeConversationListListener("listenerId"); // Remove the listener
  }

  @override
  void ccConversationDeleted(Conversation conversation) {
    // TODO("Not yet implemented")
  }
}

Customization

To align with your app’s design specifications, you have the flexibility to customize the appearance of the conversation widget. We offer accessible methods that empower you to tailor the experience and functionality to meet your unique requirements.

Style

You can set the CometChatConversationsStyle to the CometChatConversations Widget to customize the styling.

Dart

CometChatConversations(
    conversationsStyle: CometChatConversationsStyle(
              avatarStyle: CometChatAvatarStyle(
                borderRadius: BorderRadius.circular(8),
                backgroundColor: Color(0xFFFBAA75),
              ),
              badgeStyle:CometChatBadgeStyle(
                backgroundColor: Color(0xFFF76808)
              )
)
),

Functionality

These are a set of small functional customizations that allow you to fine-tune the overall experience of the widget. With these, you can change text, set custom icons, and toggle the visibility of UI elements.

Dart

 CometChatConversations(
    showBackButton: false,
    title: "Your Title",
)

List of Poperties exposed by CometChatConversations

Property	Description	Code
Activate Selection	Used to specify if the listed conversations can be selected, selection can be activated on tap or on long press	`activateSelection: ActivateSelection`
AppBar Options	Used to set the options available in the app bar	`appBarOptions: List<Widget>`
Back Button	Used to set back button located in the app bar	`backButton: Widget`
Scroll Controller	Used to programmatically update the scroll physics of list containing the conversations	`scrollController: ScrollController`
Date Pattern	Used to display a custom string instead of the timestamp show at the tail of the conversation item	`datePattern: String Function(Conversation conversation)`
Empty State View	Used to set a custom widget response when fetching the conversations has returned an empty list	`emptyStateView: WidgetBuilder`
Error State View	Used to set a custom widget response when some error occurs on fetching the list of conversations	`errorStateView: WidgetBuilder`
Loading State View	Used to set a custom widget response when conversations are loading	`loadingStateView: WidgetBuilder`
Hide Appbar	Toggle visibility for app bar	`hideAppbar: bool`
Hide Error	Used to hide error on fetching conversations	`hideError: bool`
Hide Receipt	Used to toggle visibility of message receipts shown in the subtitle of the conversation	`receiptsVisibility: bool`
Protected Group Icon	Used to set icon shown in place of status indicator if the conversation is taking place in a password-protected group	`protectedGroupIcon: Widget`
Private Group Icon	Used to set icon shown in place of status indicator if the conversation is taking place in a private group	`privateGroupIcon: Widget`
Selection Icon	Change selection icon	`selectionIcon: Widget`
Sent Icon	Used to customize the receipt icon shown in the subtitle of the conversation item if receiptsVisibility is false and the status of the last message in the conversation is sent	`sentIcon: Widget`
Delivered Icon	Used to customize the receipt icon if the message was delivered	`deliveredIcon: Widget`
Read Icon	Used to customize the receipt icon if the message was read	`readIcon: Widget`
Show Back Button	Used to toggle visibility for back button	`showBackButton: bool`
Theme	Used to set a custom theme	`conversationsStyle: CometChatConversationsStyle`
Title	Used to set the title in the app bar	`title: String`
Typing Indicator Text	Used to customize the text response shown in the subtitle of the conversation item if a participant of a conversation is typing	`typingIndicatorText: String`
Disable Conversation Delete Option Visibility	Used to toggle visibility for delete option	`deleteConversationOptionVisibility: bool`
User Status Visibility	Used to control visibility of status indicator shown if a user is online	`usersStatusVisibility: bool`
Group Type Visibility	Used to control visibility of the status indicator shown for the group type	`groupTypeVisibility: bool`
On Back	Callback triggered when closing the screen	`onBack: VoidCallback`
On Item Tap	Callback triggered when tapping a conversation item	`onItemTap: Function(Conversation conversation)`
On Item Long Press	Callback triggered when long pressing a conversation item	`onItemLongPress: Function(Conversation conversation)`
Text Formatters	List of text formatters for message bubbles with text type	`textFormatters: List<CometChatTextFormatter>`
Date Padding	Provides padding for the conversation date	`datePadding: EdgeInsets`
Date Height	Provides height for the conversation date	`dateHeight: double`
Date Background Transparency	Controls the background transparency of the conversation date	`dateBackgroundIsTransparent: bool`
Date Width	Provides width for the conversation date	`dateWidth: double`
Badge Width	Provides width for conversation badges	`badgeWidth: double`
Badge Height	Provides height for conversation badges	`badgeHeight: double`
Badge Padding	Provides padding for conversation badges	`badgePadding: EdgeInsetsGeometry`
Avatar Width	Provides width for user/group avatars	`avatarWidth: double`
Avatar Height	Provides height for user/group avatars	`avatarHeight: double`
Avatar Padding	Provides padding for user/group avatars	`avatarPadding: EdgeInsetsGeometry`
Avatar Margin	Provides margin for user/group avatars	`avatarMargin: EdgeInsetsGeometry`
Status Indicator Width	Provides width for the user/group status indicator	`statusIndicatorWidth: double`
Status Indicator Height	Provides height for the user/group status indicator	`statusIndicatorHeight: double`
Status Indicator Border Radius	Provides border radius for the user/group status indicator	`statusIndicatorBorderRadius: BorderRadiusGeometry`
Controller Tag	Tag for controller, used when parent needs to control the widget	`controllerTag: String`
Submit Icon	Used to override the default submit icon	`submitIcon: Widget`
Set Options	Sets the list of actions available on long press of a list item	`setOptions: Function(Conversation, Controller, Context)`
Add Options	Adds into the current list of actions available on long press of a list item	`addOptions: Function(Conversation, Controller, Context)`
Leading View	Custom widget for the leading section of each conversation	`leadingView: Widget Function(BuildContext, Conversation)`
Title View	Custom widget for the title section of each conversation	`titleView: Widget Function(BuildContext, Conversation)`
On Load	Callback when conversation list is loading	`onLoad: OnLoad<Conversation>`
On Empty	Callback when conversation list is empty	`onEmpty: OnEmpty`
On Error	Callback when an error occurs	`onError: OnError`
Custom Sound For Messages	Set a custom notification sound for messages	`customSoundForMessages: String`
Disable Sound For Messages	Disable sound for messages	`disableSoundForMessages: bool`

Advanced

For advanced-level customization, you can set custom views to the widget. This lets you tailor each aspect of the widget to fit your exact needs and application aesthetics. You can create and define your own widget and then incorporate those into the widget.

setOptions

This method sets a predefined list of actions that users can perform when they long press a conversation in the list. These options typically include:

Deleting a conversation
Marking a conversation as read or unread
Pinning or unpinning a conversation
Muting notifications for a specific conversation

By customizing these options, developers can provide a streamlined and contextually relevant user experience.

Dart

CometChatConversations(
    setOptions: (conversation, controller, context) { return [];},
)

Demonstration

Dart

CometChatConversations(
    setOptions: (conversation, controller, context) {
          return [
            CometChatOption(
              id: "Delete Conversation",
              icon: AssetConstants.delete,
              title: "Delete",
              onClick: () {
                // Delete Conversation
              },
            ),
          ];
        },
),

addOptions

This method extends the existing set of actions available when users long press a conversation item. Unlike setOptionsDefines, which replaces the default options, addOptionsAdds allows developers to append additional actions without removing the default ones. Example use cases include:

Adding a “Report Spam” action
Introducing a “Save to Notes” option
Integrating third-party actions such as “Share to Cloud Storage”

This method provides flexibility in modifying user interaction capabilities.

Dart

CometChatConversations(
    addOptions: (conversation, controller, context) { return [];},
),

Demonstration

Dart

CometChatConversations(
addOptions: (conversation, controller, context) {
                return [
                  CometChatOption(
                    id: "Archive",
                    iconWidget: Icon(
                      Icons.archive_outlined,
                      color: colorPalette.error,
                    ),
                    title: "Archive",
                    onClick: () {
                      // Archive Conversation
                    },
                  ),
                  CometChatOption(
                    id: "Pin",
                    iconWidget: Icon(
                      Icons.push_pin_outlined,
                      color: colorPalette.error,
                    ),
                    title: "Pin",
                    onClick: () {
                      // Pin Conversation
                    },
                  ),
                  CometChatOption(
                    id: "Mark As Read",
                    iconWidget: Icon(
                      Icons.mark_chat_unread_outlined,
                      color: colorPalette.error,
                    ),
                    title: "Mark as unread",
                    onClick: () {
                      // Mark as unread
                    },
                  ),
                ];
              },
),

disableSoundForMessages

This disables sound notifications for incoming messages. When activated, the application will not play an audio alert when new messages arrive. This feature is beneficial in scenarios where:

Users prefer a silent messaging experience
The app is being used in a professional or quiet environment
Background processes need to minimize distractions

By providing this option, the app allows users to tailor their notification preferences

Dart

CometChatConversations(
    disableSoundForMessages: true,
)

setCustomSoundForMessages

This method enables users to personalize their chat experience by setting a custom sound file for incoming message notifications. Users can choose from:

Default system sounds
Custom sound files uploaded by the user
Theme-based or brand-specific notification sounds

By allowing sound customization, this feature enhances personalization and improves user engagement.

Dart

CometChatConversations(
    customSoundForMessages: "message.mp3",
),

loadingStateView

This method allows developers to set a custom loading view that is displayed when data is being fetched or loaded within the component. Instead of using a default loading spinner, a custom animation, progress bar, or branded loading screen can be displayed. Use cases :

Showing a skeleton loader for conversations while data loads
Displaying a custom progress indicator with branding
Providing an animated loading experience for a more engaging UI

Dart

CometChatConversations(
    loadingStateView: (context) {
        // return Loading state Widget
    },
),

emptyStateView

Configures a custom view to be displayed when there are no conversations or messages in the list. This improves the user experience by providing meaningful content instead of an empty screen. Use cases :

Displaying a message like “No conversations yet. Start a new chat!”
Showing an illustration or animation to make the UI visually appealing
Providing a button to start a new conversation

Dart

CometChatConversations(
     emptyStateView: (context) {
          // return Empty state Widget
     },
),

errorStateView

Defines a custom error state view that appears when an issue occurs while loading conversations or messages. This enhances the user experience by displaying friendly error messages instead of generic system errors. Use cases :

Showing “Something went wrong. Please try again.” with a retry button
Displaying a connection issue message if the user is offline
Providing troubleshooting steps for the error

Dart

CometChatConversations(
     errorStateView: (context) {
          // return Error state Widget
    },
),

leadingView

Allows setting a custom leading view element that appears at the beginning of each conversation item. This is typically used to modify profile pictures, avatars, or icons in the conversation list. Use cases :

Displaying user avatars with online/offline status indicators
Using initials or custom graphics instead of images

Dart

CometChatConversations(
    leadingView: (context, conversation) {
       // return leading view
    },
),

Demonstration

Dart

  Map<String, TypingIndicator> typingMap = {};

  @override
  void onTypingStarted(TypingIndicator typingIndicator) {
    if (userIsNotBlocked(typingIndicator.sender)) {
      setTypingIndicator(typingIndicator, true);
    }
  }


  @override
  void onTypingEnded(TypingIndicator typingIndicator) {
    if (userIsNotBlocked(typingIndicator.sender)) {
      setTypingIndicator(typingIndicator, false);
    }
  }

  bool userIsNotBlocked(User user) {
    return user.blockedByMe != true && user.hasBlockedMe != true;
  }

  void setTypingIndicator(
      TypingIndicator typingIndicator, bool isTypingStarted) {
    if (typingIndicator.receiverType == ReceiverTypeConstants.user) {
      if (isTypingStarted) {
        typingMap[typingIndicator.sender.uid] = typingIndicator;
      } else {
        typingMap.remove(typingIndicator.sender.uid);
      }
    } else {
      if (isTypingStarted) {
        typingMap[typingIndicator.receiverId] = typingIndicator;
      } else {
        typingMap.remove(typingIndicator.receiverId);
      }
    }
    setState(() {});
  }

CometChatConversations(
leadingView: (context, conversation) {
                if (typingMap.containsKey(
                    (conversation.conversationType == "user"
                        ? (conversation.conversationWith as User).uid
                        : (conversation.conversationWith as Group).guid))) {
                  return Container(
                    decoration: BoxDecoration(
                      border: Border.all(color: Color(0xFFF76808), width: 2),
                      borderRadius: BorderRadius.circular(8),
                    ),
                    child: Image.asset(
                      "assets/leading_typing_icon.png",
                      height: 40,
                      width: 40,
                    ),
                  );
                }
                return null;
              },
)

titleView

Overrides the default title view in the conversation list with a custom layout. This is useful for branding or modifying how conversation names and details are displayed. Use cases :

Displaying conversation titles with additional metadata (e.g., last seen time)
Custom fonts or text styles for conversation names
Adding icons or indicators next to titles

Dart

CometChatConversations(
    titleView: (context, conversation) {
       // return title view
    },
)

Demonstration

Dart

CometChatConversations(
 titleView: (context, conversation) {
                return Row(
                  children: [
                    Text(
                      conversation.conversationWith is User
                          ? (conversation.conversationWith as User).name ?? ""
                          : (conversation.conversationWith as Group).name ?? "",
                      style: TextStyle(
                        color: colorPalette.textPrimary,
                        fontSize: typography.body?.medium?.fontSize,
                        fontFamily: typography.body?.medium?.fontFamily,
                        fontWeight: typography.body?.medium?.fontWeight,
                      ),
                    ),
                    Text(
                      (conversation.conversationWith is User &&
                              (conversation.conversationWith as User)
                                      .statusMessage !=
                                  null)
                          ? ". ${(conversation.conversationWith as User).statusMessage}"
                          : "",
                      style: TextStyle(
                        color: colorPalette.textPrimary,
                        fontSize: typography.body?.medium?.fontSize,
                        fontFamily: typography.body?.medium?.fontFamily,
                        fontWeight: typography.body?.medium?.fontWeight,
                      ),
                    ),
                  ],
                );
              },
)

trailingView

Customizes the trailing (end) view of a conversation item, which is typically used for action buttons or additional information. Use cases :

Adding a mute/unmute button for each conversation
Displaying the last message time in a custom format
Showing unread message counts or notification badges

Dart

CometChatConversations(
    trailingView: (context, conversation) {
       // return tailing view
    },
)

Demonstration

Dart

CometChatConversations(
trailingView: (conversation) {
                int timestamp =
                    conversation.updatedAt?.millisecondsSinceEpoch ?? 0;
                if (timestamp.toString().length == 10) {
                  timestamp *=
                      1000; // Convert seconds to milliseconds if needed
                }

                DateTime now = DateTime.now();
                DateTime lastSeen =
                    DateTime.fromMillisecondsSinceEpoch(timestamp);

                Duration diff = now.difference(lastSeen);
                int diffInMinutes = diff.inMinutes;
                int diffInHours = diff.inHours;

                String timeText;
                String minText;
                Color textColor;
                Color cardColor;

                if (diffInMinutes == 0) {
                  timeText = "1";
                  minText = "Min ago";
                  textColor = Color(0xFF6852D6);
                  cardColor = Color(0x666852D6); // 40% alpha
                } else if (diffInMinutes < 60) {
                  timeText = "$diffInMinutes";
                  minText = "Min ago";
                  textColor = Color(0xFF6852D6);
                  cardColor = Color(0x666852D6);
                } else if (diffInHours < 10) {
                  timeText = "$diffInHours";
                  minText = "Hr ago";
                  textColor = Color(0xFFFFAB00);
                  cardColor = Color(0x66FFAB00);
                } else {
                  timeText = "$diffInHours";
                  minText = "Hr ago";
                  textColor = Color(0xFFF44649);
                  cardColor = Color(0x66F44649);
                }
                return Card(
                  color: cardColor,
                  child: Padding(
                    padding: EdgeInsets.symmetric(
                      vertical: spacing.padding1 ?? 0,
                      horizontal: spacing.padding1 ?? 0,
                    ),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Text(
                          timeText,
                          style: TextStyle(
                              color: textColor,
                              fontSize: 16,
                              fontWeight: FontWeight.bold),
                        ),
                        Text(
                          minText,
                          style: TextStyle(
                              color: textColor,
                              fontSize: 16,
                              fontWeight: FontWeight.bold),
                        ),
                      ],
                    ),
                  ),
                );
              },
)

ListItemView

With this function, you can assign a custom ListItem view to the CometChatConversations Widget.

Dart

CometChatConversations(
    listItemView: (conversation) {
      return Placeholder();
    },
)

Example Here is the complete example for reference:

Dart

custom_list_item.dart

Widget getCustomListItem(
    Conversation conversation,
    BuildContext context
    ) {
  Widget? tail;
  Color? statusBackgroundColor;
  Widget? icon;
  final lastMessageTime = conversation.lastMessage?.sentAt ?? DateTime.now();
  tail = Padding(
      padding: EdgeInsets.only(
        left: 8,
      ),
      child: CometChatDate(
        date: lastMessageTime,
        padding:const EdgeInsets.all(0),
        style: CometChatDateStyle(
          backgroundColor: Colors.transparent,
          textStyle: TextStyle(
            color: Color(0xFF727272),
            fontSize: 12,
            fontWeight: FontWeight.w400,
          ),
          border:
          Border.all(
            width: 0,
            color: Colors.transparent,
          ),
        ),
        pattern: DateTimePattern.dayDateTimeFormat,
      )
  );


  User? conversationWithUser;
  Group? conversationWithGroup;
  if (conversation.conversationWith is User) {
    conversationWithUser = conversation.conversationWith as User;
  } else {
    conversationWithGroup = conversation.conversationWith as Group;
  }

  final statusStyle =
  CometChatThemeHelper.getTheme<CometChatStatusIndicatorStyle>(
      context: context,
      defaultTheme: CometChatStatusIndicatorStyle.of);

  StatusIndicatorUtils statusIndicatorUtils =
  StatusIndicatorUtils.getStatusIndicatorFromParams(
      context: context,
      user: conversationWithUser,
      group: conversationWithGroup,
      onlineStatusIndicatorColor: Color(0xFF09C26F)
  );

  statusBackgroundColor = statusIndicatorUtils.statusIndicatorColor;
  icon = statusIndicatorUtils.icon;
  return GestureDetector(
    key: UniqueKey(),
    child: CometChatListItem(
      avatarHeight:48,
      avatarWidth:48,
      id: conversation.conversationId,
      avatarName: conversationWithUser?.name ?? conversationWithGroup?.name,
      avatarURL: conversationWithUser?.avatar ?? conversationWithGroup?.icon,
      avatarStyle: CometChatAvatarStyle(
        borderRadius: BorderRadius.circular(8),
        backgroundColor: Color(0xFFAA9EE8),
      ),
      title: conversationWithUser?.name ?? conversationWithGroup?.name,
      key: UniqueKey(),
      tailView: tail,
      statusIndicatorColor: statusBackgroundColor,
      statusIndicatorIcon: icon,
      statusIndicatorStyle: CometChatStatusIndicatorStyle(
        border: statusStyle.border ??
            Border.all(
              width: 2,
              color: Color(0xFFFFFFFF),
            ),
        backgroundColor: statusStyle.backgroundColor,
      ),
      hideSeparator: true,
      style: ListItemStyle(
        background: Colors.transparent,
        titleStyle: TextStyle(
          overflow: TextOverflow.ellipsis,
          fontSize: 16,
          fontWeight: FontWeight.w500,
          color: Color(0xFF141414),
        ),
        padding: EdgeInsets.symmetric(
          horizontal: 16,
          vertical: 12,
        ),
      ),
    ),
  );
}

Dart

main.dart

CometChatConversations(
  listItemView: (conversation) {
              return getCustomListItem(
                conversation,
                context
              );
    },
)

TextFormatters

Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source. To configure the existing Mentions look and feel check out CometChatMentionsFormatter Example Here is the complete example for reference:

Dart

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

AppBarOptions

You can set the Custom AppBarOptions to the CometChatConversations widget.

Dart

 CometChatConversations(
      showBackButton: false,
      appBarOptions: [
        PopupMenuButton(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(8),
            side: BorderSide(
              color: Color(0xFFF5F5F5),
              width: 1,
            ),
          ),
          color: Color(0xFFFFFFFF),
          elevation: 4,
          menuPadding : EdgeInsets.zero,
          padding: EdgeInsets.zero,
          icon: Padding(
            padding: EdgeInsets.only(
              left: 12,
              right: 16,
            ),
            child: CometChatAvatar(
              width: 40,
              height: 40,
              image: CometChatUIKit.loggedInUser?.avatar,
              name: CometChatUIKit.loggedInUser?.name,
            ),
          ),
          onSelected: (value) {
            switch (value) {
              case '/Create':
                setState(() {
                  _selectedIndex = 2;
                });
                break;
              case '/logout':
                logout();
                break;
              case '/name':
                break;
              case '/version':
                break;
            }
          },
          position: PopupMenuPosition.under,
          enableFeedback: false,
          itemBuilder: (BuildContext context) {
            return [
              PopupMenuItem(
                height: 44,
                padding: EdgeInsets.all(16),
                value: '/Create',
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Padding(
                      padding:
                      EdgeInsets.only(right: 8),
                      child: Icon(
                        Icons.add_comment_outlined,
                        color: Color(0xFFA1A1A1),
                        size: 24,
                      ),
                    ),
                    Text(
                      "Create Conversation",
                      style: TextStyle(
                        fontSize: 14,
                        fontWeight:FontWeight.w400,
                        color: Color(0xFF141414),
                      ),
                    ),
                  ],
                ),
              ),
              PopupMenuItem(
                height: 44,
                padding: EdgeInsets.all(16),
                value: '/name',
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Padding(
                      padding:
                      EdgeInsets.only(right: 8),
                      child: Icon(
                        Icons.account_circle_outlined,
                        color: Color(0xFFA1A1A1),
                        size: 24,
                      ),
                    ),
                    Text(
                      CometChatUIKit.loggedInUser?.name ?? "",
                      style: TextStyle(
                        fontSize: 14,
                        fontWeight:FontWeight.w400,
                        color: Color(0xFF141414),
                      ),
                    ),
                  ],
                ),
              ),
              PopupMenuItem(
                height: 44,
                padding: EdgeInsets.all(16),
                value: '/logout',
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Padding(
                      padding:
                      EdgeInsets.only(right: 8),
                      child: Icon(
                        Icons.logout,
                        color: Colors.red,
                        size: 24,
                      ),
                    ),
                    Text(
                      "Logout",
                      style: TextStyle(
                        fontSize: 14,
                        fontWeight:FontWeight.w400,
                        color: Colors.red,
                      ),
                    ),
                  ],
                ),
              ),
              PopupMenuItem(
                enabled: false,
                height: 44,
                padding: EdgeInsets.zero,
                value: '/version',
                child: Container(
                  width: double.infinity,
                  decoration: BoxDecoration(
                    border: Border(
                      top: BorderSide(
                        color: Color(0xFFF5F5F5),
                        width: 1,
                      ),
                    ),
                  ),
                  child: Padding(
                    padding: EdgeInsets.all(16),
                    child: Text(
                      "V5.0.0_alpha1",
                      style: TextStyle(
                        fontSize: 14,
                        fontWeight:FontWeight.w400,
                        color: Color(0xFF727272),
                      ),
                    ),
                  ),
                ),
              ),
            ];
          },
        ),
      ],
      onItemTap: (conversation) {
        User? user;
        Group? group;
        if (conversation.conversationWith is User) {
          user = conversation.conversationWith as User;
        } else {
          group = conversation.conversationWith as Group;
        }
        navigateToMessages(user: user, group: group);
      },
    )

DatePattern

You can modify the date pattern to your requirement using datePattern. This method accepts a function with a return type String. Inside the function, you can create your own pattern and return it as a String.

Dart

CometChatConversations(
  datePattern: (conversation) => DateFormat('d MMM, hh:mm a').format(conversation.lastMessage?.sentAt ?? DateTime.now()),
)

SubtitleView

You can customize the subtitle view for each conversation item to meet your requirements

Dart

CometChatConversations(
  subtitleView: (context, conversation) {
              String subtitle = "";

              if (conversation.conversationWith is User) {
                User user = conversation.conversationWith as User;
                final dateTime = user.lastActiveAt ?? DateTime.now();
                subtitle = "Last Active at " + DateFormat('dd/MM/yyyy, HH:mm:ss').format(dateTime);
              } else {
                Group group = conversation.conversationWith as Group;
                final dateTime = group.createdAt ?? DateTime.now();
                subtitle = "Created at " + DateFormat('dd/MM/yyyy, HH:mm:ss').format(dateTime);
              }
              return Text(subtitle,
                        style: TextStyle(
                          color: Color(0xFF727272),
                          fontSize: 14,
                          fontWeight: FontWeight.w400,
                        ),
              );
    }
)

​Overview

​Usage

​Integration

1. Using Navigator to Launch CometChatConversations

2. Embedding CometChatConversations as a Widget in the build Method

​Actions

onItemTap

onItemLongPress

onBack

setOnSelection

onError

onLoad

onEmpty

​Filters

​Events

1. Conversation Deleted

​Customization

​Style

​Functionality

​Advanced

​setOptions

​addOptions

​disableSoundForMessages

​setCustomSoundForMessages

​loadingStateView

​emptyStateView

​errorStateView

​leadingView

​titleView

​trailingView

​ListItemView

​TextFormatters

​AppBarOptions

​DatePattern

​SubtitleView

Overview

Usage

Integration

1. Using Navigator to Launch `CometChatConversations`

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

Actions

Filters

Events

Customization

Style

Functionality

Advanced

setOptions

addOptions

disableSoundForMessages

setCustomSoundForMessages

loadingStateView

emptyStateView

errorStateView

leadingView

titleView

trailingView

ListItemView

TextFormatters

AppBarOptions

DatePattern

SubtitleView