이 페이지는 현재 영어로만 제공되며 한국어 버전은 곧 제공될 예정입니다. 기다려 주셔서 감사드립니다.

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 {
  @override
  String get alignment => AppBuilder.MESSAGE_ALIGNMENT_TWO_SIDED;
﻿
  @override
  bool get isShowTimeMessage => true;
﻿
  @override
  bool get isShowLeftAvatar => true;
﻿
  @override
  bool get isShowLeftNickname => true;
﻿
  @override
  bool get isShowRightAvatar => true;
﻿
  @override
  bool get isShowRightNickname => true;
﻿
  // ... other required properties
}
﻿
// Apply custom style
MessageList(
  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 startup
await 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 configuration
MessageList(
  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)
﻿
﻿
﻿
﻿

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.

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

Message List Actions (Default Options)	Message List Actions (Copy Option Hidden)	Message List Actions (Share Option Added)

Chat Message List	Message Long-Press Menu