syncfusion-flutter-chat
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseSyncfusion Flutter Chat & AI AssistView
Syncfusion Flutter Chat & AI AssistView
This skill covers two related Syncfusion Flutter components for conversational UI: SfChat (Chat widget) and SfAIAssistView (AI AssistView widget). While they share many visual and configuration features, they serve different primary purposes.
本技能介绍Syncfusion Flutter中用于对话UI的两个相关组件:SfChat(聊天组件)和SfAIAssistView(AI助手视图组件)。二者共享许多视觉和配置特性,但核心用途不同。
When to Use This Skill
何时使用本技能
Use this skill when you need to:
- Implement chat interfaces with multi-user conversations and messaging
- Add AI assistant functionality with request-response patterns
- Build messaging apps with incoming/outgoing message support
- Create AI chatbot interfaces with AI service integration
- Display conversation UI with messages, avatars, and timestamps
- Handle message composition with text editors and action buttons
- Customize message appearance with builders, themes, and styling
- Support placeholder screens for empty conversation states
- Enable suggestion chips for quick responses or actions
- Integrate toolbar actions for response messages (like, copy, retry)
- Show loading indicators for AI response generation
- Implement RTL support for right-to-left languages
当你需要完成以下需求时可使用本技能:
- 实现聊天界面,支持多用户对话和消息收发
- 添加AI助手功能,适配请求-响应交互模式
- 构建消息类应用,支持接收/发送消息
- 创建AI聊天机器人界面,可对接AI服务
- 展示对话UI,包含消息、头像和时间戳
- 处理消息输入,支持文本编辑器和操作按钮
- 自定义消息外观,通过构建器、主题和样式实现
- 支持占位屏,适配空对话状态
- 启用建议芯片,实现快捷回复或操作
- 集成工具栏操作,支持对回复消息点赞、复制、重试等
- 展示加载指示器,标识AI响应正在生成中
- 实现RTL支持,适配从右到左书写的语言
Choosing the Right Component
选择合适的组件
Use SfChat (Chat Widget) when:
以下场景使用 SfChat(聊天组件):
- You need multi-user conversation interfaces
- Your app requires incoming and outgoing messages differentiation
- You need traditional messaging app functionality (WhatsApp, Telegram style)
- Building chat for: team collaboration, customer support, social messaging, group chats
- Message suggestions should appear on both incoming/outgoing messages
- You need to identify the outgoing user explicitly
- 需要多用户对话界面
- 应用需要区分接收和发送的消息
- 需要实现传统消息类应用功能(类似WhatsApp、Telegram风格)
- 构建以下场景的聊天功能:团队协作、客户支持、社交消息、群聊
- 消息建议需要同时出现在接收/发送消息上
- 需要明确标识发送消息的用户
Use SfAIAssistView (AI AssistView Widget) when:
以下场景使用 SfAIAssistView(AI助手视图组件):
- You need AI assistant or chatbot functionality
- Your primary goal is request-response patterns with AI services
- You need toolbar items on response messages (like, dislike, copy, retry)
- You need loading indicators while AI generates responses
- Building UI for: AI assistants, chatbots, help bots, Q&A interfaces
- Message suggestions should only appear on AI response messages
- You need clear request vs response message distinction
- 需要实现AI助手或聊天机器人功能
- 核心需求是对接AI服务的请求-响应模式
- 需要在回复消息上添加工具栏项(点赞、点踩、复制、重试)
- 需要在AI生成回复时展示加载指示器
- 构建以下场景的UI:AI助手、聊天机器人、帮助机器人、问答界面
- 消息建议仅需要出现在AI回复消息上
- 需要明确区分请求和响应消息
Key Differences Summary:
核心差异汇总:
| Feature | SfChat | SfAIAssistView |
|---|---|---|
| Primary Purpose | Multi-user messaging | AI assistant interaction |
| Message Types | Incoming/Outgoing | Request/Response |
| User Identification | outgoingUser property | Author in each message |
| Suggestions | On any message | Only on response messages |
| Toolbar Items | ❌ Not supported | ✅ Response toolbar support |
| Loading Indicator | ❌ Not included | ✅ Response loading builder |
| Use Case | Chat apps, messaging | AI chatbots, assistants |
| Message Classes | ChatMessage | AssistMessage |
| Composer Classes | ChatComposer | AssistComposer |
| Action Button Classes | ChatActionButton | AssistActionButton |
| 特性 | SfChat | SfAIAssistView |
|---|---|---|
| 核心用途 | 多用户消息收发 | AI助手交互 |
| 消息类型 | 接收/发送 | 请求/响应 |
| 用户标识 | outgoingUser属性 | 每条消息的作者字段 |
| 建议展示 | 任意消息上 | 仅响应消息上 |
| 工具栏项 | ❌ 不支持 | ✅ 支持响应工具栏 |
| 加载指示器 | ❌ 未内置 | ✅ 支持响应加载构建器 |
| 适用场景 | 聊天应用、消息功能 | AI聊天机器人、助手 |
| 消息类 | ChatMessage | AssistMessage |
| 输入框类 | ChatComposer | AssistComposer |
| 操作按钮类 | ChatActionButton | AssistActionButton |
Documentation and Navigation Guide
文档和导航指南
Getting Started
入门指南
📄 Read: references/getting-started.md
- Installation and package setup for both components
- Basic SfChat implementation
- Basic SfAIAssistView implementation
- Package dependencies and imports
- Quick comparison and first examples
📄 阅读: references/getting-started.md
- 两个组件的安装和包配置
- SfChat基础实现
- SfAIAssistView基础实现
- 包依赖和导入
- 快速对比和入门示例
Component Overview
组件概述
📄 For Chat: references/chat-overview.md
- SfChat widget overview and features
- When to use Chat vs AI AssistView
- Multi-user conversation capabilities
- Incoming/outgoing message patterns
- Chat-specific capabilities
- Basic chat configuration
📄 For AI AssistView: references/aiassistview-overview.md
- SfAIAssistView widget overview and features
- When to use AI AssistView vs Chat
- Request/response patterns
- AI integration capabilities
- AIAssistView-specific capabilities
- Basic AIAssistView configuration
📄 Chat组件相关: references/chat-overview.md
- SfChat组件概述和特性
- 何时使用Chat vs AI AssistView
- 多用户对话能力
- 接收/发送消息模式
- Chat专属能力
- Chat基础配置
📄 AI AssistView组件相关: references/aiassistview-overview.md
- SfAIAssistView组件概述和特性
- 何时使用AI AssistView vs Chat
- 请求/响应模式
- AI集成能力
- AIAssistView专属能力
- AIAssistView基础配置
Conversation Area and Messages
对话区域和消息
📄 Read: references/conversation-area.md
- Message structure and display
- Incoming/outgoing messages (Chat)
- Request/response messages (AIAssistView)
- Message settings and customization
- Headers and timestamps
- Footers and additional info
- Message avatars
- Content area styling
- Message suggestions (both components)
- Toolbar items (AIAssistView only)
- Loading indicators (AIAssistView only)
📄 阅读: references/conversation-area.md
- 消息结构和展示
- 接收/发送消息(Chat组件)
- 请求/响应消息(AIAssistView组件)
- 消息设置和自定义
- 头部和时间戳
- 底部和附加信息
- 消息头像
- 内容区域样式
- 消息建议(两个组件均支持)
- 工具栏项(仅AIAssistView支持)
- 加载指示器(仅AIAssistView支持)
Composer and Input
输入框和输入功能
📄 Read: references/composer.md
- Default composer configuration
- Text editor customization
- Minimum and maximum lines
- Decoration and styling
- Hint text and placeholders
- Borders and padding
- Prefix and suffix icons
- Text style customization
- Margin configuration
- Custom composer builder
📄 阅读: references/composer.md
- 默认输入框配置
- 文本编辑器自定义
- 最小/最大行数
- 装饰和样式
- 提示文本和占位符
- 边框和内边距
- 前后缀图标
- 文本样式自定义
- 外边距配置
- 自定义输入框构建器
Action Button
操作按钮
📄 Read: references/action-button.md
- Action button overview
- Send button functionality
- Custom child widgets
- onPressed callback
- Tooltip text
- Colors (foreground, background, focus, hover, splash)
- Elevation settings
- Mouse cursor customization
- Shape and border radius
- Margin and size
📄 阅读: references/action-button.md
- 操作按钮概述
- 发送按钮功能
- 自定义子组件
- onPressed回调
- 提示文本
- 颜色配置(前景、背景、聚焦、悬浮、水波纹)
- 阴影设置
- 鼠标指针自定义
- 形状和圆角
- 外边距和尺寸
Placeholder
占位符
📄 Read: references/placeholder.md
- Placeholder builder overview
- Custom placeholder widgets
- Empty conversation state design
- Welcome messages
- Getting started hints
- Examples for both components
📄 阅读: references/placeholder.md
- 占位符构建器概述
- 自定义占位符组件
- 空对话状态设计
- 欢迎消息
- 入门提示
- 两个组件的示例
Theming and Customization
主题和自定义
📄 Read: references/theming.md
- Theme overview (Chat vs AIAssistView)
- SfChatTheme and SfAIAssistViewTheme
- Action button theming
- Avatar colors and styling
- Message background colors
- Content text styles
- Header text styles
- Suggestion styling
- Message shapes and borders
- Toolbar theming (AIAssistView only)
📄 阅读: references/theming.md
- 主题概述(Chat vs AIAssistView)
- SfChatTheme和SfAIAssistViewTheme
- 操作按钮主题
- 头像颜色和样式
- 消息背景色
- 内容文本样式
- 头部文本样式
- 建议项样式
- 消息形状和边框
- 工具栏主题(仅AIAssistView支持)
Localization and Accessibility
本地化和无障碍
📄 Read: references/right-to-left.md
- Right-to-left (RTL) support
- Directionality widget usage
- RTL rendering for all elements
- RTL for placeholder
- RTL for composer
- RTL for action button
- RTL for messages and content
📄 阅读: references/right-to-left.md
- RTL(从右到左)支持
- Directionality组件使用
- 所有元素的RTL渲染
- 占位符的RTL适配
- 输入框的RTL适配
- 操作按钮的RTL适配
- 消息和内容的RTL适配
Common Patterns
通用模式
📄 Read: references/common-patterns.md
- Message settings customization
- Custom composer with multiple actions
- Custom placeholder for empty state
- Loading indicator for AI responses
- Theming for consistent brand experience
📄 阅读: references/common-patterns.md
- 消息设置自定义
- 带多操作的自定义输入框
- 空状态的自定义占位符
- AI响应的加载指示器
- 统一品牌体验的主题设置
Quick Start Examples
快速入门示例
Basic Chat with Messages
基础带消息的Chat
dart
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/chat.dart';
class MyChat extends StatefulWidget {
State<MyChat> createState() => _MyChatState();
}
class _MyChatState extends State<MyChat> {
List<ChatMessage> _messages = <ChatMessage>[];
void initState() {
super.initState();
_messages = <ChatMessage>[
ChatMessage(
text: 'Hi! How can I help you today?',
time: DateTime.now(),
author: const ChatAuthor(
id: '123-001',
name: 'John Doe',
),
),
ChatMessage(
text: 'I need help with my order.',
time: DateTime.now(),
author: const ChatAuthor(
id: '123-002',
name: 'Jane Smith',
),
),
];
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Chat')),
body: SfChat(
messages: _messages,
outgoingUser: '123-002',
composer: const ChatComposer(
decoration: InputDecoration(
hintText: 'Type a message',
),
),
actionButton: ChatActionButton(
onPressed: (String newMessage) {
setState(() {
_messages.add(
ChatMessage(
text: newMessage,
time: DateTime.now(),
author: const ChatAuthor(
id: '123-002',
name: 'Jane Smith',
),
),
);
});
},
),
),
);
}
}dart
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/chat.dart';
class MyChat extends StatefulWidget {
State<MyChat> createState() => _MyChatState();
}
class _MyChatState extends State<MyChat> {
List<ChatMessage> _messages = <ChatMessage>[];
void initState() {
super.initState();
_messages = <ChatMessage>[
ChatMessage(
text: 'Hi! How can I help you today?',
time: DateTime.now(),
author: const ChatAuthor(
id: '123-001',
name: 'John Doe',
),
),
ChatMessage(
text: 'I need help with my order.',
time: DateTime.now(),
author: const ChatAuthor(
id: '123-002',
name: 'Jane Smith',
),
),
];
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Chat')),
body: SfChat(
messages: _messages,
outgoingUser: '123-002',
composer: const ChatComposer(
decoration: InputDecoration(
hintText: 'Type a message',
),
),
actionButton: ChatActionButton(
onPressed: (String newMessage) {
setState(() {
_messages.add(
ChatMessage(
text: newMessage,
time: DateTime.now(),
author: const ChatAuthor(
id: '123-002',
name: 'Jane Smith',
),
),
);
});
},
),
),
);
}
}Basic AI AssistView with AI Integration
基础带AI集成的AI AssistView
dart
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/assist_view.dart';
class MyAIAssistView extends StatefulWidget {
State<MyAIAssistView> createState() => _MyAIAssistViewState();
}
class _MyAIAssistViewState extends State<MyAIAssistView> {
List<AssistMessage> _messages = <AssistMessage>[];
void _generateAIResponse(String userRequest) async {
// Call your AI service here
final String aiResponse = await _getAIResponse(userRequest);
setState(() {
_messages.add(
AssistMessage.response(
data: aiResponse,
time: DateTime.now(),
author: const AssistMessageAuthor(
id: 'ai-001',
name: 'AI Assistant',
),
),
);
});
}
Future<String> _getAIResponse(String request) async {
// Connect with your preferred AI service
// Example: OpenAI, Google AI, Azure AI, etc.
await Future.delayed(Duration(seconds: 2)); // Simulate API call
return 'This is a response to: $request';
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('AI Assistant')),
body: SfAIAssistView(
messages: _messages,
composer: const AssistComposer(
decoration: InputDecoration(
hintText: 'Ask me anything',
),
),
actionButton: AssistActionButton(
onPressed: (String userRequest) {
setState(() {
_messages.add(
AssistMessage.request(
data: userRequest,
time: DateTime.now(),
author: const AssistMessageAuthor(
id: 'user-001',
name: 'User',
),
),
);
_generateAIResponse(userRequest);
});
},
),
placeholderBuilder: (BuildContext context) {
return const Center(
child: Text(
'What can I help you with today?',
style: TextStyle(fontSize: 16),
),
);
},
),
);
}
}dart
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_chat/assist_view.dart';
class MyAIAssistView extends StatefulWidget {
State<MyAIAssistView> createState() => _MyAIAssistViewState();
}
class _MyAIAssistViewState extends State<MyAIAssistView> {
List<AssistMessage> _messages = <AssistMessage>[];
void _generateAIResponse(String userRequest) async {
// 在此处调用你的AI服务
final String aiResponse = await _getAIResponse(userRequest);
setState(() {
_messages.add(
AssistMessage.response(
data: aiResponse,
time: DateTime.now(),
author: const AssistMessageAuthor(
id: 'ai-001',
name: 'AI Assistant',
),
),
);
});
}
Future<String> _getAIResponse(String request) async {
// 对接你选择的AI服务
// 示例:OpenAI、Google AI、Azure AI等
await Future.delayed(Duration(seconds: 2)); // 模拟API调用
return 'This is a response to: $request';
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('AI Assistant')),
body: SfAIAssistView(
messages: _messages,
composer: const AssistComposer(
decoration: InputDecoration(
hintText: 'Ask me anything',
),
),
actionButton: AssistActionButton(
onPressed: (String userRequest) {
setState(() {
_messages.add(
AssistMessage.request(
data: userRequest,
time: DateTime.now(),
author: const AssistMessageAuthor(
id: 'user-001',
name: 'User',
),
),
);
_generateAIResponse(userRequest);
});
},
),
placeholderBuilder: (BuildContext context) {
return const Center(
child: Text(
'What can I help you with today?',
style: TextStyle(fontSize: 16),
),
);
},
),
);
}
}Chat with Suggestions
带建议项的Chat
dart
SfChat(
messages: <ChatMessage>[
ChatMessage(
text: 'Which programming language should I learn?',
time: DateTime.now(),
author: const ChatAuthor(id: '1', name: 'Alice'),
),
ChatMessage(
text: 'It depends on your goals. What interests you?',
time: DateTime.now(),
author: const ChatAuthor(id: '2', name: 'Bob'),
suggestions: <ChatMessageSuggestion>[
const ChatMessageSuggestion(data: 'Web Development'),
const ChatMessageSuggestion(data: 'Mobile Apps'),
const ChatMessageSuggestion(data: 'Data Science'),
const ChatMessageSuggestion(data: 'Game Development'),
],
),
],
outgoingUser: '1',
)dart
SfChat(
messages: <ChatMessage>[
ChatMessage(
text: 'Which programming language should I learn?',
time: DateTime.now(),
author: const ChatAuthor(id: '1', name: 'Alice'),
),
ChatMessage(
text: 'It depends on your goals. What interests you?',
time: DateTime.now(),
author: const ChatAuthor(id: '2', name: 'Bob'),
suggestions: <ChatMessageSuggestion>[
const ChatMessageSuggestion(data: 'Web Development'),
const ChatMessageSuggestion(data: 'Mobile Apps'),
const ChatMessageSuggestion(data: 'Data Science'),
const ChatMessageSuggestion(data: 'Game Development'),
],
),
],
outgoingUser: '1',
)AI AssistView with Toolbar Items
带工具栏项的AI AssistView
dart
void _generateResponse(String request) async {
final String response = await _getAIResponse(request);
setState(() {
_messages.add(
AssistMessage.response(
data: response,
time: DateTime.now(),
author: const AssistMessageAuthor(id: 'ai', name: 'AI'),
toolbarItems: <AssistMessageToolbarItem>[
const AssistMessageToolbarItem(
content: Icon(Icons.thumb_up_outlined),
tooltip: 'Like',
),
const AssistMessageToolbarItem(
content: Icon(Icons.thumb_down_outlined),
tooltip: 'Dislike',
),
const AssistMessageToolbarItem(
content: Icon(Icons.copy),
tooltip: 'Copy',
),
const AssistMessageToolbarItem(
content: Icon(Icons.restart_alt),
tooltip: 'Regenerate',
),
],
),
);
});
}
SfAIAssistView(
messages: _messages,
onToolbarItemSelected: (bool selected, int messageIndex,
AssistMessageToolbarItem item, int toolbarItemIndex) {
// Handle toolbar action (like, dislike, copy, etc.)
print('Toolbar item selected at index $toolbarItemIndex');
},
)dart
void _generateResponse(String request) async {
final String response = await _getAIResponse(request);
setState(() {
_messages.add(
AssistMessage.response(
data: response,
time: DateTime.now(),
author: const AssistMessageAuthor(id: 'ai', name: 'AI'),
toolbarItems: <AssistMessageToolbarItem>[
const AssistMessageToolbarItem(
content: Icon(Icons.thumb_up_outlined),
tooltip: 'Like',
),
const AssistMessageToolbarItem(
content: Icon(Icons.thumb_down_outlined),
tooltip: 'Dislike',
),
const AssistMessageToolbarItem(
content: Icon(Icons.copy),
tooltip: 'Copy',
),
const AssistMessageToolbarItem(
content: Icon(Icons.restart_alt),
tooltip: 'Regenerate',
),
],
),
);
});
}
SfAIAssistView(
messages: _messages,
onToolbarItemSelected: (bool selected, int messageIndex,
AssistMessageToolbarItem item, int toolbarItemIndex) {
// 处理工具栏操作(点赞、点踩、复制等)
print('Toolbar item selected at index $toolbarItemIndex');
},
)Key Properties
核心属性
SfChat Essential Properties
SfChat核心属性
- - List of ChatMessage objects to display
messages - - ID of the user sending messages (distinguishes incoming/outgoing)
outgoingUser - - ChatComposer for text input
composer - - ChatActionButton for sending messages
actionButton - - Custom widget for empty state
placeholderBuilder - - Settings for incoming messages
incomingMessageSettings - - Settings for outgoing messages
outgoingMessageSettings - - Custom header for each message
messageHeaderBuilder - - Custom footer for each message
messageFooterBuilder - - Custom content for each message
messageContentBuilder - - Custom avatar for each message
messageAvatarBuilder
- - 要展示的ChatMessage对象列表
messages - - 发送消息的用户ID(用于区分接收/发送消息)
outgoingUser - - 用于文本输入的ChatComposer
composer - - 用于发送消息的ChatActionButton
actionButton - - 空状态的自定义组件
placeholderBuilder - - 接收消息的设置
incomingMessageSettings - - 发送消息的设置
outgoingMessageSettings - - 每条消息的自定义头部
messageHeaderBuilder - - 每条消息的自定义底部
messageFooterBuilder - - 每条消息的自定义内容
messageContentBuilder - - 每条消息的自定义头像
messageAvatarBuilder
SfAIAssistView Essential Properties
SfAIAssistView核心属性
- - List of AssistMessage objects (request/response)
messages - - AssistComposer for text input
composer - - AssistActionButton for sending requests
actionButton - - Custom widget for empty state
placeholderBuilder - - Settings for request messages
requestMessageSettings - - Settings for response messages
responseMessageSettings - - Custom header for each message
messageHeaderBuilder - - Custom footer for each message
messageFooterBuilder - - Custom content for each message
messageContentBuilder - - Custom avatar for each message
messageAvatarBuilder - - Custom loading indicator while AI responds
responseLoadingBuilder - - Callback when toolbar item is tapped
onToolbarItemSelected - - Callback when suggestion chip is tapped
onSuggestionItemSelected
- - AssistMessage对象列表(请求/响应)
messages - - 用于文本输入的AssistComposer
composer - - 用于发送请求的AssistActionButton
actionButton - - 空状态的自定义组件
placeholderBuilder - - 请求消息的设置
requestMessageSettings - - 响应消息的设置
responseMessageSettings - - 每条消息的自定义头部
messageHeaderBuilder - - 每条消息的自定义底部
messageFooterBuilder - - 每条消息的自定义内容
messageContentBuilder - - 每条消息的自定义头像
messageAvatarBuilder - - AI响应过程中的自定义加载指示器
responseLoadingBuilder - - 工具栏项被点击时的回调
onToolbarItemSelected - - 建议芯片被点击时的回调
onSuggestionItemSelected
ChatMessage / AssistMessage Properties
ChatMessage / AssistMessage属性
ChatMessage:
- - Message content
text - - Timestamp of the message
time - - ChatAuthor with id, name, and avatar
author - - List of ChatMessageSuggestion items
suggestions
AssistMessage:
- - Message content
data - - Timestamp of the message
time - - AssistMessageAuthor with id, name, and avatar
author - - List of AssistMessageSuggestion items (response only)
suggestions - - List of AssistMessageToolbarItem (response only)
toolbarItems
ChatMessage:
- - 消息内容
text - - 消息时间戳
time - - 包含id、名称和头像的ChatAuthor对象
author - - ChatMessageSuggestion项列表
suggestions
AssistMessage:
- - 消息内容
data - - 消息时间戳
time - - 包含id、名称和头像的AssistMessageAuthor对象
author - - AssistMessageSuggestion项列表(仅响应消息支持)
suggestions - - AssistMessageToolbarItem列表(仅响应消息支持)
toolbarItems
Composer Properties (Both Components)
输入框属性(两个组件通用)
- - Minimum lines in text editor (default: 1)
minLines - - Maximum lines in text editor (default: 6)
maxLines - - InputDecoration for styling
decoration - - Space around the composer
margin - - Text style for input
textStyle - - Custom composer widget
builder
- - 文本编辑器最小行数(默认:1)
minLines - - 文本编辑器最大行数(默认:6)
maxLines - - 用于样式设置的InputDecoration
decoration - - 输入框的外边距
margin - - 输入文本的样式
textStyle - - 自定义输入框组件
builder
Action Button Properties (Both Components)
操作按钮属性(两个组件通用)
- - Custom widget for button
child - - Callback when button is pressed
onPressed - - Tooltip text
tooltip - - Icon/text color
foregroundColor - - Button background color
backgroundColor - - Color when focused
focusColor - - Color when hovered
hoverColor - - Ripple effect color
splashColor - - Shadow elevation
elevation - - Elevation when focused
focusElevation - - Elevation when hovered
hoverElevation - - Elevation when pressed
highlightElevation - - Cursor style on hover
mouseCursor - - Button shape and border
shape - - Space around button
margin - - Button dimensions
size
- - 按钮的自定义子组件
child - - 按钮被点击时的回调
onPressed - - 提示文本
tooltip - - 图标/文本颜色
foregroundColor - - 按钮背景色
backgroundColor - - 聚焦时的颜色
focusColor - - 悬浮时的颜色
hoverColor - - 水波纹效果颜色
splashColor - - 阴影高度
elevation - - 聚焦时的阴影高度
focusElevation - - 悬浮时的阴影高度
hoverElevation - - 按下时的阴影高度
highlightElevation - - 悬浮时的指针样式
mouseCursor - - 按钮形状和边框
shape - - 按钮的外边距
margin - - 按钮尺寸
size
Message Settings Properties (Both Components)
消息设置属性(两个组件通用)
- - Show/hide author name
showAuthorName - - Show/hide timestamp
showTimestamp - - Show/hide avatar
showAuthorAvatar - - DateFormat for timestamp
timestampFormat - - Message background color
backgroundColor - - Message text style
textStyle - - Header text style
headerTextStyle - - Message bubble shape
shape - - Message width relative to screen (0-1)
widthFactor - - Avatar dimensions
avatarSize - - Space around message
margin - - Padding inside message
padding - - Padding around avatar
avatarPadding - - Padding around header
headerPadding - - Padding around footer
footerPadding
- - 显示/隐藏作者名称
showAuthorName - - 显示/隐藏时间戳
showTimestamp - - 显示/隐藏头像
showAuthorAvatar - - 时间戳的DateFormat格式
timestampFormat - - 消息背景色
backgroundColor - - 消息文本样式
textStyle - - 头部文本样式
headerTextStyle - - 消息气泡形状
shape - - 消息宽度占屏幕的比例(0-1)
widthFactor - - 头像尺寸
avatarSize - - 消息的外边距
margin - - 消息的内边距
padding - - 头像的内边距
avatarPadding - - 头部的内边距
headerPadding - - 底部的内边距
footerPadding
Common Use Cases
通用适用场景
For SfChat: Customer support chat, team messaging, social messaging, live chat support with multi-user conversations and incoming/outgoing message patterns.
For SfAIAssistView: AI chatbots, AI assistants, help bots, Q&A interfaces with request/response patterns, toolbar items, and loading indicators.
SfChat适用场景: 客户支持聊天、团队消息、社交消息、支持多用户对话和接收/发送消息模式的实时聊天支持。
SfAIAssistView适用场景: AI聊天机器人、AI助手、帮助机器人、支持请求/响应模式、工具栏项和加载指示器的问答界面。