Contacts

CometChatContacts is a widget specifically designed to facilitate the display and management of users and groups within chat applications. It streamlines the process of showcasing all app users and available chat groups in a user-friendly interface, making it easier for users to connect and communicate effectively. Additionally, the widget includes a UI Segmented Control to switch between the users and groups list, enhancing navigation and usability.

Key Features:

1. User List View: CometChatContacts presents a comprehensive list of all registered users within the application. This list allows users to quickly find and select specific individuals they wish to interact with.
2. Group List View: This widget also offers a dedicated view to showcase all the available chat groups. This simplifies the process of joining or creating new group conversations.
3. Smart Search Functionality: Users can utilize the powerful search feature to quickly locate specific users or groups by typing names or keywords. This ensures seamless navigation, even in applications with a large user base.
4. Selection Mode: CometChatContacts supports a selection mode, enabling users to pick multiple contacts or groups simultaneously. This feature proves useful for creating group chats or forwarding messages to multiple recipients.
5. Customizable Tab Layout: Developers can easily customize the appearance of the tabs, including text colors, indicator color, and background, to match the app's branding and aesthetics.
6. Selection Limit Control: Developers have the flexibility to set a selection limit, restricting the number of contacts or groups a user can select during the selection mode. This helps maintain messaging policies and optimize user experience.
7. User-Friendly Close Button: This widget provides a convenient close button feature, allowing users to exit the Contacts view and return to their previous screen or chat interface effortlessly.

How to integrate CometChatContacts

CometChatContacts can launched on to a new screen using the following code snippet.

1. Using Navigator to Launch CometChatContacts

Dart

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

2. Embedding CometChatContacts 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: CometChatContacts(),
      ),
    );
  }
}

List of properties exposed by CometChatContacts

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
Controller	Used to programmatically update the scroll physics of list containing the conversations	controller: 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)
Disable Mentions	Disables mentions formatter if true	disableMentions: bool
Disable Receipt	Used to disable read receipts shown in the subtitle of the conversation item and also disabling the functionality of marking messages as read and delivered	disableReceipt: bool
Disable Typing	If true stops indicating if a participant in a conversation is typing	disableTyping: bool
Empty State Text	Used to set a custom text response when fetching the conversations has returned an empty list	emptyStateText: String
Error State Text	Used to set a custom text response when some error occurs on fetching the list of conversations	errorStateText: String
Hide Appbar	Toggle visibility for app bar	hideAppbar: bool
Hide Error	Used to hide error on fetching conversations	hideError: bool
Hide Search	Used to toggle visibility for search box	hideSearch: bool
Hide Separator	Used to hide the divider separating the conversation items	hideSeparator: bool
Hide Section Separator	Used to hide the text separating grouped conversation items	hideSectionSeparator: bool
Options	Used to set options affecting the conversation item in some way	options: List<CometChatOption> Function(Conversation, BuildContext)
On Back	Used to set a call back triggered on tapping the back button in the app bar	onBack: VoidCallback
On Error	Used to set a callback triggered in case any error happens when fetching conversations	onError: OnError
On Item Long Press	Used to set a callback that would be triggered on long press on a conversation item	onItemLongPress: Function(Conversation)
On Item Tap	Used to set a callback that would be triggered on tapping a conversation item	onItemTap: Function(Conversation)
On Selection	Used to set a custom callback that would utilize the selected conversations to execute some task	onSelection: Function(List<Conversation>, BuildContext)
Poperties	Types	Description
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
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
Receipt Style	Used to customize the colors of receipt icons shown in the subtitle of the conversation item if disableReceipt is not true	receiptStyle: ReceiptStyle
Search Box Icon	Used to set search Icon in the search field	searchBoxIcon: Widget
Search Placeholder	Used to set placeholder text for the search field	searchPlaceholder: String
Selection Icon	Change selection icon	selectionIcon: Widget
Sent Icon	Used to customize the receipt icon shown in the subtitle of the conversation item if disableReceipt is not true and if the status of the last message in the conversation is sent	sentIcon: Widget
Show Back Button	Used to toggle visibility for back button	showBackButton: bool
State CallBack	Used to set a callback that can be used to retrieve the business logic (an instance of CometChatConversationsController) of the widget, with which the parent widget of CometChatConversations can access the public methods available in the business logic widget	stateCallBack: Function(CometChatConversationsController)
Status Indicator Style	Used to customise the status indicator shown if a user is online	statusIndicatorStyle: StatusIndicatorStyle
Subtitle View	Used to set a custom subtitle for every conversation item	subtitleView: Widget Function(BuildContext, Conversation)
Tail View	Used to generate a custom trailing view for the conversation item, by default it shows the time sent of the last message and the unread messages count	tailView: Widget Function(Conversation)
Text Formatters	Used to pass a list of text formatters to format the text shown in text subtitle of each conversation provided the last message is a text message and it contains mentions	textFormatters: List<CometChatTextFormatter>
Theme	Used to set custom theme	theme: CometChatTheme
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

ContactsStyle

Dart

CometChatContacts(
  contactsStyle: ContactsStyle(
    background: Colors.white300,
    titleTextStyle: TextStyle(color: Colors.yellow),
    borderColor: Colors.red,
    iconTint: Colors.red,
    activeTabColor: Colors.yellow
  ),
)

These property is used to customize the appearance of the CometChatContacts widget.

Property	Description	Code
Active Icon Tint	Tint color for active icons within the contacts widget.	activeIconTint: Color?
Active Tab Color	Color of the active tab within the contacts widget.	activeTabColor: Color?
Active Tab Title Text Style	Text style for the title of the active tab.	activeTabTitleTextStyle: TextStyle?
Background	Background color or gradient of the contacts widget.	background: Color? or Gradient?
Border	Border of the contacts widget.	border: Border?
Border Color	Color of the borders within the contacts widget.	borderColor: Color?
Border Radius	Border radius of the contacts widget.	borderRadius: BorderRadius?
Close Icon Tint	Tint color for the close icon within the contacts widget.	closeIconTint: Color?
Create Icon Tint	Tint color for the create icon within the contacts widget.	createIconTint: Color?
Gradient	Gradient background of the contacts widget.	gradient: Gradient?
Height	Height of the contacts widget.	height: double?
Icon Tint	Tint color for icons within the contacts widget.	iconTint: Color?
Selected Tab Color	Color of the selected tab within the contacts widget.	selectedTabColor: Color?
Selected Tab Text Style	Text style for the selected tab within the contacts widget.	selectedTabTextStyle: TextStyle?
Snackbar Configuration	Configuration settings for displaying snackbars.	snackBarConfiguration: SnackBarConfiguration?
Tab Border	Border side for tabs within the contacts widget.	tabBorder: BorderSide?
Tab Border Color	Color of tabs within the contacts widget.	tabBorderColor: Color?
Tab Border Radius	Border radius for tabs within the contacts widget.	tabBorderRadius: BorderRadius?
Tab Color	Color of tabs within the contacts widget.	tabColor: Color?
Tab Height	Height of tabs within the contacts widget.	tabHeight: double?
Tab Text Style	Text style for tabs within the contacts widget.	tabTextStyle: TextStyle?
Tab Visibility	Enum specifying which tabs (users, groups) are visible.	tabVisibility: TabVisibility
Tab Width	Width of tabs within the contacts widget.	tabWidth: double?
Theme	Theme object for customizing the appearance of the widget.	theme: Theme?
Title Text Style	Text style for titles within the contacts widget.	titleTextStyle: TextStyle?
Users Configuration	Configuration settings for users list.	usersConfiguration: UsersConfiguration?
Width	Width of the contacts widget.	width: double?