Conversations

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

---