Search - CometChat Docs

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

​Where It Fits

​Quick Start

​Actions and Events

​Callback Methods

​onConversationItemClick

​onMessageItemClick

​onBack

​onError

​Functionality

​Custom View Slots

​Conversation Item View

​Message Item View

​State Views

​Advanced

​BLoC Access

​V5 → V6 Migration

​Style

​Next Steps