Flutter客户端SDK插件squadwe_client_sdk的使用
Flutter客户端SDK插件squadwe_client_sdk的使用
将Squadwe客户端集成到您的Flutter应用中,并实现实时与访客聊天。Squadwe帮助您与访客实时聊天并提供卓越的支持。要将Squadwe集成到您的Flutter应用中,请遵循以下步骤。
1. 在Squadwe中创建一个API收件箱
参考创建API通道文档。
2. 将插件添加到项目中
在终端运行以下命令:
flutter pub add squadwe_client_sdk
或者
在项目的pubspec.yaml
文件中添加:
dependencies:
squadwe_client_sdk: <<version>>
您可以在这里检查最新版本。
该库使用Hive进行本地存储,使用Flutter Chat UI作为用户界面。
3. 如何使用
替换baseUrl
和inboxIdentifier
为适当的值。有关如何获取您的baseUrl
和inboxIdentifier
的更多信息,请参阅此处。
a. 使用SquadweChatDialog
通过传递参数来调用SquadweChatDialog.show
以显示聊天对话框。要关闭对话框,请使用Navigator.pop(context)
。
// 示例
SquadweChatDialog.show(
context,
baseUrl: "https://app.squadwe.com",
inboxIdentifier: "xxxxxxxxxxxxxxxxxxx",
title: "Squadwe Support",
user: SquadweUser(
identifier: "test@test.com",
name: "Tester test",
email: "test@test.com",
),
);
可用参数
参数名 | 默认值 | 类型 | 描述 |
---|---|---|---|
context | - | BuildContext | 当前BuildContext |
baseUrl | - | String | Squadwe安装地址 |
inboxIdentifier | - | String | 目标Squadwe收件箱标识符 |
enablePersistance | true | bool | 启用持久化,保存Squadwe客户端实例的联系人、会话和消息到磁盘 true - 保存Squadwe客户端实例的数据(联系人、会话和消息)到磁盘。要清除已保存的数据,请调用SquadweClient.clearData或SquadweClient.clearAllData false - 将Squadwe客户端实例的数据保留在内存中,并在Squadwe客户端实例被销毁时清除 设置 |
title | - | String | 模态对话框的标题 |
user | null | SquadweUser | 自定义用户详细信息,附加到Squadwe联系人 |
primaryColor | Color(0xff1f93ff) | Color | SquadweChatTheme的主要颜色 |
secondaryColor | Colors.white | Color | SquadweChatTheme的次要颜色 |
backgroundColor | Color(0xfff4f6fb) | Color | SquadweChatTheme的背景色 |
l10n | SquadweL10n() | SquadweL10n | SquadweChat小部件的本地化字符串 |
timeFormat | DateFormat.Hm() | DateFormat | 聊天日期格式 |
dateFormat | DateFormat(“EEEE MMMM d”) | DateFormat | 聊天时间格式 |
b. 使用SquadweChat小部件
要在应用的一部分内嵌入SquadweChat小部件,请使用SquadweChat
小部件。通过传递带有自定义主题颜色和其他内容的SquadweChatTheme
来自定义聊天UI主题。
import 'package:squadwe_client_sdk/squadwe_client_sdk.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// 这个widget是你的应用的根。
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return SquadweChat(
baseUrl: "https://app.squadwe.com",
inboxIdentifier: "xxxxxxxxxxxxxxxxxxx",
user: SquadweUser(
identifier: "test1@test.com",
name: "Tester test1",
email: "test1@test.com",
),
appBar: AppBar(
title: Text(
"Squadwe",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold
),
),
backgroundColor: Colors.white,
),
onWelcome: (){
print("Welcome event received");
},
onPing: (){
print("Ping event received");
},
onConfirmedSubscription: (){
print("Confirmation event received");
},
onMessageDelivered: (_){
print("Message delivered event received");
},
onMessageSent: (_){
print("Message sent event received");
},
onConversationIsOffline: (){
print("Conversation is offline event received");
},
onConversationIsOnline: (){
print("Conversation is online event received");
},
onConversationStoppedTyping: (){
print("Conversation stopped typing event received");
},
onConversationStartedTyping: (){
print("Conversation started typing event received");
},
);
}
}
c. 使用Squadwe客户端
您还可以创建一个定制的聊天UI并使用SquadweClient
加载和发送消息。当创建客户端实例时,将触发如onMessageSent
和onMessageReceived
等消息事件。
final squadweCallbacks = SquadweCallbacks(
onWelcome: (){
print("on welcome");
},
onPing: (){
print("on ping");
},
onConfirmedSubscription: (){
print("on confirmed subscription");
},
onConversationStartedTyping: (){
print("on conversation started typing");
},
onConversationStoppedTyping: (){
print("on conversation stopped typing");
},
onPersistedMessagesRetrieved: (persistedMessages){
print("persisted messages retrieved");
},
onMessagesRetrieved: (messages){
print("messages retrieved");
},
onMessageReceived: (squadweMessage){
print("message received");
},
onMessageDelivered: (squadweMessage, echoId){
print("message delivered");
},
onMessageSent: (squadweMessage, echoId){
print("message sent");
},
onError: (error){
print("Ooops! Something went wrong. Error Cause: ${error.cause}");
},
);
SquadweClient.create(
baseUrl: widget.baseUrl,
inboxIdentifier: widget.inboxIdentifier,
user: widget.user,
enablePersistence: widget.enablePersistence,
callbacks: squadweCallbacks
).then((client) {
client.loadMessages();
}).onError((error, stackTrace) {
print("squadwe client creation failed with error $error: $stackTrace");
});
更多关于Flutter客户端SDK插件squadwe_client_sdk的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter客户端SDK插件squadwe_client_sdk的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是一个关于如何在Flutter项目中集成和使用squadwe_client_sdk
插件的示例代码。假设squadwe_client_sdk
已经发布在pub.dev上,你可以通过以下步骤进行集成和使用。
1. 添加依赖
首先,在你的pubspec.yaml
文件中添加squadwe_client_sdk
的依赖:
dependencies:
flutter:
sdk: flutter
squadwe_client_sdk: ^最新版本号 # 请替换为实际的最新版本号
然后运行flutter pub get
来获取依赖。
2. 导入插件
在你需要使用SDK的Dart文件中导入插件:
import 'package:squadwe_client_sdk/squadwe_client_sdk.dart';
3. 初始化SDK
通常SDK需要一些初始化步骤,比如设置API密钥或其他配置。假设SDK有一个初始化方法initialize
,你可以这样使用:
void main() async {
WidgetsFlutterBinding.ensureInitialized();
// 初始化SDK
await SquadweClientSdk.initialize(apiKey: '你的API密钥');
runApp(MyApp());
}
4. 使用SDK功能
假设SDK提供了一些功能,比如获取用户信息、执行某些操作等。以下是一些假设的方法调用示例:
获取用户信息
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
User? _user;
@override
void initState() {
super.initState();
_getUserInfo();
}
Future<void> _getUserInfo() async {
try {
User user = await SquadweClientSdk.getUserInfo();
setState(() {
_user = user;
});
} catch (e) {
print('Error getting user info: $e');
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Squadwe Client SDK Demo'),
),
body: Center(
child: _user != null
? Text('User: ${_user!.name} (${_user!.email})')
: CircularProgressIndicator(),
),
);
}
}
执行某个操作(例如发送请求)
Future<void> _performOperation() async {
try {
OperationResult result = await SquadweClientSdk.performOperation(
parameters: {
'param1': 'value1',
'param2': 'value2',
},
);
if (result.success) {
print('Operation successful: ${result.data}');
} else {
print('Operation failed: ${result.errorMessage}');
}
} catch (e) {
print('Error performing operation: $e');
}
}
5. 完整示例
结合以上代码,这里是一个完整的Flutter应用示例:
import 'package:flutter/material.dart';
import 'package:squadwe_client_sdk/squadwe_client_sdk.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
// 初始化SDK
await SquadweClientSdk.initialize(apiKey: '你的API密钥');
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Squadwe Client SDK Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
User? _user;
@override
void initState() {
super.initState();
_getUserInfo();
}
Future<void> _getUserInfo() async {
try {
User user = await SquadweClientSdk.getUserInfo();
setState(() {
_user = user;
});
} catch (e) {
print('Error getting user info: $e');
}
}
Future<void> _performOperation() async {
try {
OperationResult result = await SquadweClientSdk.performOperation(
parameters: {
'param1': 'value1',
'param2': 'value2',
},
);
if (result.success) {
print('Operation successful: ${result.data}');
} else {
print('Operation failed: ${result.errorMessage}');
}
} catch (e) {
print('Error performing operation: $e');
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Squadwe Client SDK Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_user != null
? Text('User: ${_user!.name} (${_user!.email})')
: CircularProgressIndicator(),
SizedBox(height: 20),
ElevatedButton(
onPressed: _performOperation,
child: Text('Perform Operation'),
),
],
),
),
);
}
}
// 假设User和OperationResult是SDK定义的数据模型
class User {
String? name;
String? email;
User({this.name, this.email});
}
class OperationResult {
bool success;
dynamic data;
String? errorMessage;
OperationResult({required this.success, this.data, this.errorMessage});
}
请注意,以上代码中的User
和OperationResult
类是基于假设的SDK数据模型。实际使用时,你应该根据squadwe_client_sdk
的文档来定义这些类。同样,SDK的具体方法名和参数也可能有所不同,请参考SDK的官方文档进行调整。