> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Search

> Add CometChat Flutter UI Kit search for conversations and messages with categorized results and navigation callbacks.

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

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/9bgr-iIAUJixmNKk/images/search_overview_flutter.png?fit=max&auto=format&n=9bgr-iIAUJixmNKk&q=85&s=4b5634961b9110176eac80b65920bdc4" width="2560" height="1670" data-path="images/search_overview_flutter.png" />
</Frame>

***

## 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.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatSearch(
      onConversationItemClick: (conversation) {
        // Navigate to conversation
      },
      onMessageItemClick: (message) {
        // Navigate to message in context
      },
    )
    ```
  </Tab>
</Tabs>

***

## Quick Start

Using Navigator:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatSearch()));
    ```
  </Tab>
</Tabs>

Embedding as a widget:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: SafeArea(
          child: CometChatSearch(),
        ),
      );
    }
    ```
  </Tab>
</Tabs>

Launching from conversations with search button:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatConversations(
      hideSearch: false,
      searchReadOnly: true,
      onSearchTap: () {
        Navigator.push(context, MaterialPageRoute(
          builder: (context) => CometChatSearch(
            onConversationItemClick: (conversation) {
              // Navigate to chat
            },
            onMessageItemClick: (message) {
              // Navigate to message
            },
          ),
        ));
      },
    )
    ```
  </Tab>
</Tabs>

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.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatSearch(
      onConversationItemClick: (conversation) {
        final entity = conversation.conversationWith;
        if (entity is User) {
          navigateToUserChat(entity);
        } else if (entity is Group) {
          navigateToGroupChat(entity);
        }
      },
    )
    ```
  </Tab>
</Tabs>

#### `onMessageItemClick`

Fires when a message result is tapped.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatSearch(
      onMessageItemClick: (message) {
        // Navigate to the message in its conversation
      },
    )
    ```
  </Tab>
</Tabs>

#### `onBack`

Fires when the user presses the back button.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatSearch(
      onBack: () {
        Navigator.pop(context);
      },
    )
    ```
  </Tab>
</Tabs>

#### `onError`

Fires on internal errors.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatSearch(
      onError: (e) {
        debugPrint("Search error: ${e.message}");
      },
    )
    ```
  </Tab>
</Tabs>

***

## 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.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatSearch(
      conversationItemView: (conversation, context) {
        return ListTile(
          leading: CircleAvatar(child: Text(conversation.conversationWith?.name?[0] ?? "")),
          title: Text(conversation.conversationWith?.name ?? ""),
        );
      },
    )
    ```
  </Tab>
</Tabs>

### Message Item View

Replace the message result item.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatSearch(
      messageItemView: (message, context) {
        return ListTile(
          title: Text(message.sender?.name ?? ""),
          subtitle: message is TextMessage ? Text(message.text) : Text("Media message"),
        );
      },
    )
    ```
  </Tab>
</Tabs>

### State Views

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatSearch(
      emptyStateView: (context) => Center(child: Text("No results found")),
      errorStateView: (context) => Center(child: Text("Search failed")),
      loadingStateView: (context) => Center(child: CircularProgressIndicator()),
    )
    ```
  </Tab>
</Tabs>

***

## 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

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatSearch(
      searchStyle: CometChatSearchStyle(
        backgroundColor: Colors.white,
        searchBoxBackgroundColor: Color(0xFFF5F5F5),
        searchBoxBorderRadius: BorderRadius.circular(12),
      ),
    )
    ```
  </Tab>
</Tabs>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/9bgr-iIAUJixmNKk/images/search_style_flutter.png?fit=max&auto=format&n=9bgr-iIAUJixmNKk&q=85&s=7542031dcc9e8355a0173dfa2b4031b8" width="2560" height="1670" data-path="images/search_style_flutter.png" />
</Frame>

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Conversations" icon="comments" href="/ui-kit/flutter/conversations">
    Browse recent conversations
  </Card>

  <Card title="Message List" icon="list" href="/ui-kit/flutter/message-list">
    Display messages in a conversation
  </Card>

  <Card title="Component Styling" icon="paintbrush" href="/ui-kit/flutter/component-styling">
    Detailed styling reference
  </Card>

  <Card title="Users" icon="user" href="/ui-kit/flutter/users">
    Browse available users
  </Card>
</CardGroup>