tencent cloud

Chat

DocumentationChatChat Interaction (UI Included)Single-function IntegrationConversationListFlutter

Flutter

Download
Focus Mode
Font Size
Last updated: 2026-03-02 17:41:33

Component Overview

ConversationList is a UI component that displays and manages user chat conversations. It provides a robust feature set for conversation listing—enabling users to view conversations and perform key actions directly from the list.
Conversation List
Conversation Actions



Component Integration

ConversationList is part of the TUIKit Flutter package. To add ConversationList to your project, integrate TUIKit Flutter following the TUIKit Flutter documentation.

Component Structure

ConversationList exposes only its initialization method. All other internal logic is handled within the component itself.

Public Methods

Method Name
Parameters
Description
ConversationList
onConversationClick: (ConversationInfo conversation) {}
Sets the callback for conversation cell clicks.
config: ConversationActionConfigProtocol
Initializes the component and configures action menu items (optional).
customActions: List
Initializes the component and defines custom action options (optional).

Basic Usage

Initialize ConversationList directly, providing an onConversationClick callback.
Parameter Name
Type
Description
onConversationClick
(ConversationInfo conversation) {}
Callback that is invoked when a conversation cell is selected.
Sample code:
Expanded(
  child: ConversationList(
    onConversationClick: (conversation) {
      // We recommend navigating to the chat page here
    },
  ),
),

Customization

You can customize the actions available in the conversation list using the following methods.

Method 1: Hide Conversation Action Items Locally

Provide a custom config when initializing ConversationList to control which menu items are visible:
Expanded(
  child: ConversationList(
    config: ChatConversationActionConfig(
      isSupportDelete: true,
      isSupportPin: true,
      isSupportClearHistory: false
    ),
    onConversationClick: (conversation) {
      // Navigate to chat page on conversation cell click
    },
  ),
),
Supported Action Toggles
Action Type
Description
isSupportDelete
Enable or disable conversation deletion.
isSupportPin
Enable or disable Pin Conversation.
isSupportClearHistory
Enable or disable clearing chat history.

Method 2: Add Custom Conversation Action Items Locally

Pass customActions during initialization to append custom actions below the default options.
Parameter Name
Type
Description
customActions
List
Custom actions shown in the conversation action menu.
Sample code:
Expanded(
  child: ConversationList(
    customActions: [
      ConversationCustomAction(
        title: 'Share',
        action: (conversation) {
          print('Share conversation: ${conversation.title}');
        })
    ],
  ),
),

Method 3: Configure Actions Globally

Set global configuration via AppBuilder:
// Configure at app startup; if omitted, the feature is not supported
await AppBuilder.init();
AppBuilder.getInstance().conversationListConfig = ConversationListConfig(
    conversationActionList: [
      AppBuilder.CONVERSATION_ACTION_DELETE,
      AppBuilder.CONVERSATION_ACTION_PIN,
      AppBuilder.CONVERSATION_ACTION_CLEAR_HISTORY
    ],
    // ... other required properties
);

// Then, initialize ConversationList. All ConversationList instances will inherit the above action configuration.
Expanded(
  child: ConversationList(
    onConversationClick: (conversation) {
      // You can navigate to the chat page here
    },
  ),
),
Note：
Local configuration takes precedence over global configuration.
Below are examples of customization effects:
Conversation Actions (Default Options)
Conversation Actions (Delete Option Hidden)
Conversation Actions (Share Option Added)



Previous Topic: iOS（SwiftUI）Next Topic: ConversationList

Help and Support

Was this page helpful?

Help us improve! Rate your documentation experience in 5 mins.

Feedback