제품 개요
Basic Concepts
응용 시나리오
기능 소개
계정 시스템
사용자 정보 및 관계망
메시지 관리
그룹 시스템
Official Account
Audio/Video Call
사용 제한
Flutter
포커스 모드
폰트 크기
Component Overview
MessageList is a Flutter component designed for displaying and managing chat messages. It supports a wide range of message types, including:
Text, image, video, voice, file, system notification, emoji messages, and more.
Message actions via long-press menus, such as copy, delete, recall, and custom actions.
Extensive customization: configure bubble color, corner radius, font, and add custom actions.
Chat Message List | Message Long-Press Menu |
 |  |
MessageList is available as part of TUIKit Flutter. To integrate MessageList, add TUIKit Flutter to your project. For detailed setup instructions, refer to the TUIKit Flutter documentation.
Component Structure
MessageList exposes only its initialization method; all other internal logic is fully encapsulated.
Public Methods
Method | Parameters | Description |
MessageList | conversationID: String | Initializes MessageList and sets the conversation ID. For C2C Chat, use the format c2c_userID. For group chat, use group_groupID. |
| config: MessageListConfigProtocol | Initializes MessageList and applies the specified message list style. |
| customActions: List | Initializes MessageList with custom long-press menu options. |
| locateMessage: MessageInfo? | Initializes MessageList and scrolls to a specific message. Useful when navigating from search results to a specific message. |
| onUserClick: (String userID) {} | Initializes MessageList and sets a handler for avatar click events. |
Basic Usage
To initialize MessageList, provide a conversation ID. We recommend implementing
onUserClick for avatar interactions.MessageList(conversationID: 'conversation_123',onUserClick: (String userID) {// Handle avatar click event},),
Customization
MessageList supports flexible style and action customization.
Custom Styles
Implement
MessageListConfigProtocol to define custom styles:class MyCustomConfig extends MessageListConfigProtocol {@overrideString get alignment => AppBuilder.MESSAGE_ALIGNMENT_TWO_SIDED;@overridebool get isShowTimeMessage => true;@overridebool get isShowLeftAvatar => true;@overridebool get isShowLeftNickname => true;@overridebool get isShowRightAvatar => true;@overridebool get isShowRightNickname => true;// ... other required properties}// Apply custom styleMessageList(conversationID: 'conversation_123',config: MyCustomConfig(),);
MessageListConfigProtocol Property Reference
Property | Type | Description | Remarks |
alignment | String | Message alignment | MessageAlignment.LEFT：Left aligned.MessageAlignment.RIGHT：Right aligned.MessageAlignment.TWO_SIDED：Both sides aligned. |
isShowTimeMessage | bool | Show timestamp messages | Controls whether message timestamps are displayed. |
isShowLeftAvatar | bool | Show left avatar | Show sender's avatar for received messages. |
isShowLeftNickname | bool | Show left nickname | Show sender's nickname for received messages. |
isShowRightAvatar | bool | Show right avatar | Show your avatar for sent messages. |
isShowRightNickname | bool | Show right nickname | Show your nickname for sent messages. |
isShowTimeInBubble | bool | Show time inside bubble | Display timestamp inside the message bubble. |
cellSpacing | double | Message spacing | Set the space between adjacent messages. |
isShowSystemMessage | bool | Show system notification | Display system notification messages. |
isShowUnsupportMessage | bool | Show unsupported messages | Display messages of unsupported types. |
horizontalPadding | double | Horizontal padding | Set left and right padding for the message list. |
avatarSpacing | double | Avatar spacing | Set spacing between avatar and message content. |
isSupportCopy | bool | Enable copy action in menu | true: Enable copy action false: Disable copy action |
isSupportDelete | bool | Enable delete action in menu | true: Enable delete action false: Disable delete action |
isSupportRecall | bool | Enable recall action in menu | true：Enable recall action false: Disable recall action |
Custom Actions
You can customize the long-press menu actions using several approaches.
Option A: Locally Hide or Show Action Items
Set
isSupportCopy, isSupportDelete, and isSupportRecall in the config to show or hide specific actions:MessageList(conversationID: 'conversation_123',config: ChatMessageListConfig(isSupportCopy: false),);
Option B: Locally Add Custom Action Items
Pass custom actions to MessageList. These will be added below the default menu options:
MessageList(conversationID: 'conversation_123',customActions: [MessageCustomAction(title: 'Share',systemIconFallback: Icons.share,action: (MessageInfo messageInfo) {print('share message');},)],);
Option C: Configure Action Item Globally
Configure menu actions globally using
AppBuilderConfig:// Set global configuration at app startupawait AppBuilder.init();AppBuilder.getInstance().messageListConfig = MessageListConfig(messageActionList: [AppBuilder.MESSAGE_ACTION_COPY,AppBuilder.MESSAGE_ACTION_DELETE,AppBuilder.MESSAGE_ACTION_RECALL,],// other options);// All MessageList instances will inherit the global configurationMessageList(conversationID: 'conversation_123',);
Note：
Local configurations override global configuration settings.
Message List Actions (Default Options) | Message List Actions (Copy Option Hidden) | Message List Actions (Share Option Added) |
 |  |  |
피드백