Search

Unified search component for finding conversations and messages across all chats.

CometChatSearch provides unified search functionality across conversations and messages. In V6, it uses a single consolidated SearchBloc replacing the three separate controllers from V5.

---

Where It Fits

CometChatSearch is typically launched from a search button in the conversations list or message header. It searches across both conversations and messages, displaying results in categorized sections.

Dart

CometChatSearch(
  onConversationItemClick: (conversation) {
    // Navigate to conversation
  },
  onMessageItemClick: (message) {
    // Navigate to message in context
  },
)

---

Quick Start

Using Navigator:

Dart

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

Embedding as a widget:

Dart

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: CometChatSearch(),
    ),
  );
}

Launching from conversations with search button:

Dart

CometChatConversations(
  hideSearch: false,
  searchReadOnly: true,
  onSearchTap: () {
    Navigator.push(context, MaterialPageRoute(
      builder: (context) => CometChatSearch(
        onConversationItemClick: (conversation) {
          // Navigate to chat
        },
        onMessageItemClick: (message) {
          // Navigate to message
        },
      ),
    ));
  },
)

Prerequisites: CometChat SDK initialized with CometChatUIKit.init() and a user logged in.

---

Actions and Events

Callback Methods

onConversationItemClick

Fires when a conversation result is tapped.

Dart

CometChatSearch(
  onConversationItemClick: (conversation) {
    final entity = conversation.conversationWith;
    if (entity is User) {
      navigateToUserChat(entity);
    } else if (entity is Group) {
      navigateToGroupChat(entity);
    }
  },
)

onMessageItemClick

Fires when a message result is tapped.

Dart

CometChatSearch(
  onMessageItemClick: (message) {
    // Navigate to the message in its conversation
  },
)

onBack

Fires when the user presses the back button.

Dart

CometChatSearch(
  onBack: () {
    Navigator.pop(context);
  },
)

onError

Fires on internal errors.

Dart

CometChatSearch(
  onError: (e) {
    debugPrint("Search error: ${e.message}");
  },
)

---

Functionality

Property	Type	Default	Description
showBackButton	bool?	true	Toggle back button visibility
placeholder	String?	null	Search input placeholder text
hideConversationResults	bool?	false	Hide conversation search results
hideMessageResults	bool?	false	Hide message search results

---

Custom View Slots

Conversation Item View

Replace the conversation result item.

Dart

CometChatSearch(
  conversationItemView: (conversation, context) {
    return ListTile(
      leading: CircleAvatar(child: Text(conversation.conversationWith?.name?[0] ?? "")),
      title: Text(conversation.conversationWith?.name ?? ""),
    );
  },
)

Message Item View

Replace the message result item.

Dart

CometChatSearch(
  messageItemView: (message, context) {
    return ListTile(
      title: Text(message.sender?.name ?? ""),
      subtitle: message is TextMessage ? Text(message.text) : Text("Media message"),
    );
  },
)

State Views

Dart

CometChatSearch(
  emptyStateView: (context) => Center(child: Text("No results found")),
  errorStateView: (context) => Center(child: Text("Search failed")),
  loadingStateView: (context) => Center(child: CircularProgressIndicator()),
)

---

Advanced

BLoC Access

The search widget uses SearchBloc internally:

Component	Description
SearchBloc	Single consolidated BLoC for all search types
SearchEvent	Events: SearchTextChanged, ClearSearch, LoadMoreConversationResults, LoadMoreMessageResults
SearchState	Search state with conversation and message results

V5 → V6 Migration

V5	V6
CometChatSearchController	SearchBloc
CometChatConversationsSearchController	Merged into SearchBloc
CometChatMessagesSearchController	Merged into SearchBloc
SearchUtils	Inlined into SearchBloc
3 separate controllers	1 unified BLoC

---

Style

Dart

CometChatSearch(
  searchStyle: CometChatSearchStyle(
    backgroundColor: Colors.white,
    searchBoxBackgroundColor: Color(0xFFF5F5F5),
    searchBoxBorderRadius: BorderRadius.circular(12),
  ),
)

---

Next Steps

Conversations

Browse recent conversations

Message List

Display messages in a conversation

Component Styling

Detailed styling reference

Users

Browse available users