目前市面上有较多厂商提供IM的UI组件库,如国外的getstream或国内的腾讯云IM。
目前,Flutter 正日益成为跨端开发的主流框架,它不仅能帮助客户端开发团队以最低成本开发多端应用,还能帮助众多的前端开发们,转型参与到APP及Web一体化开发中来。受到越来越多公司的追捧。
因此本文以腾讯云IM为例,演示如何快速为一个Flutter项目引入IM即时通信能力,基于他们提供的组件库。
步骤1:创建 Flutter 应用并添加权限
请参见 Flutter 文档 快速创建一个 Flutter 应用。
配置权限
一个IM项目,会涉及到拍摄/相册/录音/网络等权限,需要在 Native 的文件中手动声明,才可正常使用这些能力。
Android
打开 android/app/src/main/AndroidManifest.xml
,在 <manifest></manifest>
中,添加如下权限。
<uses-permission
android:name="android.permission.INTERNET"/>
<uses-permission
android:name="android.permission.RECORD_AUDIO"/>
<uses-permission
android:name="android.permission.FOREGROUND_SERVICE"/>
<uses-permission
android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission
android:name="android.permission.VIBRATE"/>
<uses-permission
android:name="android.permission.ACCESS_BACKGROUND_LOCATION"/>
<uses-permission
android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission
android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission
android:name="android.permission.CAMERA"/>
iOS
打开 ios/Podfile
,在文件末尾新增如下权限代码。
post_install do |installer|
installer.pods_project.targets.each do |target|
flutter_additional_ios_build_settings(target)
target.build_configurations.each do |config|
config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
'$(inherited)',
'PERMISSION_MICROPHONE=1',
'PERMISSION_CAMERA=1',
'PERMISSION_PHOTOS=1',
]
end
end
end
安装 IM TUIkit
他们官方的 IM UI组件库被称作TUIKit。用之前需要先安装下。
#在命令行执行:
flutter pub add tim_ui_kit
如果你的应用还需要打包一份Web版本,还得手动引入两个JS文件。
打开 web/index.html
,在 <head> </head>
间引入这两个JS文件。如下:
<script src='./tim-upload-plugin.js'></script>
<script src="./tim-js-friendship.js"></script>
步骤2:初始化
如果还没有创建腾讯云IM的应用,需要先去他们官网,创建一个,并记一下SDKAPPID。最好再创建几个测试账户,后面用起来方便些。
在应用启动时,初始化IM项目。
先执行 TIMUIKitCore.getInstance()
,再调用初始化函数 init()
,并将您的sdkAppID
传入。
/// main.dart
import 'package:tim_ui_kit/tim_ui_kit.dart';
final CoreServicesImpl _coreInstance = TIMUIKitCore.getInstance();
@override
void initState() {
_coreInstance.init(
sdkAppID: 0, // Replace 0 with the SDKAppID of your IM application when integrating
// language: LanguageEnum.en, // 界面语言配置,若不配置,则跟随系统语言
loglevel: LogLevelEnum.V2TIM_LOG_DEBUG,
onTUIKitCallbackListener: (TIMCallback callbackValue){}, // [建议配置,详见此部分](https://cloud.tencent.com/document/product/269/70746#callback)
listener: V2TimSDKListener());
super.initState();
}
}
登录测试账户
-
此时,您可以使用上一步在控制台生成的测试账户,完成登录验证。
-
调用
_coreInstance.login
方法,登录一个测试账户。import 'package:tim_ui_kit/tim_ui_kit.dart'; final CoreServicesImpl _coreInstance = TIMUIKitCore.getInstance(); _coreInstance.login(userID: userID, userSig: userSig);
步骤3:实现 - 会话列表页面
您可以以会话列表作为您的 IM 功能首页,其涵盖了与所有有聊天记录的用户及群聊的会话。
请创建一个 Conversation
类,body
中使用 TIMUIKitConversation
组件,渲染会话列表。
您仅需传入一个 onTapItem
事件的处理函数,用于跳转至具体会话聊天页的导航。关于 Chat
类,会在下一步讲解。
import 'package:flutter/material.dart';
import 'package:tim_ui_kit/tim_ui_kit.dart';
class Conversation extends StatelessWidget {
const Conversation({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(
"Message",
style: TextStyle(color: Colors.black),
),
),
body: TIMUIKitConversation(
onTapItem: (selectedConv) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Chat(
selectedConversation: selectedConv,
),
));
},
),
);
}
}
步骤4:实现 - 会话聊天页面
该页面由顶部主体聊天历史记录及底部发送消息模块组成。
请创建一个 Chat
类,body
中使用 TIMUIKitChat
组件,渲染聊天页面。
您最好传入一个 onTapAvatar
事件的处理函数,用于跳转至联系人的详细信息页。关于 UserProfile
类,会在下一步讲解。
import 'package:flutter/material.dart';
import 'package:tim_ui_kit/tim_ui_kit.dart';
class Chat extends StatelessWidget {
final V2TimConversation selectedConversation;
const Chat({Key? key, required this.selectedConversation}) : super(key: key);
String? _getConvID() {
return selectedConversation.type == 1
? selectedConversation.userID
: selectedConversation.groupID;
}
@override
Widget build(BuildContext context) {
return TIMUIKitChat(
conversationID: _getConvID() ?? '', // groupID or UserID
conversationType: selectedConversation.type ?? 1, // Conversation type
conversationShowName: selectedConversation.showName ?? "", // Conversation display name
onTapAvatar: (_) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => UserProfile(userID: userID),
));
}, // Callback for the clicking of the message sender profile photo. This callback can be used with `TIMUIKitProfile`.
);
}
步骤5:实现 - 用户详情页面
该页面默认,可在只传入一个 userID
的情况下,自动根据是否是好友,生成用户详情页。
请创建一个 UserProfile
类,body
中使用 TIMUIKitProfile
组件,渲染用户详情及关系链页面。
如果需要自定义该页面,建议先用
profileWidgetBuilder
传入需自定义的 profile 组件并配合profileWidgetsOrder
确定纵向排列顺序;如果无法满足,才可使用builder
。
import 'package:flutter/material.dart';
import 'package:tim_ui_kit/tim_ui_kit.dart';
class UserProfile extends StatelessWidget {
final String userID;
const UserProfile({required this.userID, Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(
"Message",
style: TextStyle(color: Colors.black),
),
),
body: TIMUIKitProfile(
userID: widget.userID,
),
);
}
}
此时,您的应用已经可以完成消息收发,管理好友关系,展示用户详情及展示会话列表。
TUIKit 的更多能力
大家还可以继续使用以下 TUIKit 组件快速实现完整 IM 功能。
- TIMUIKitContact:联系人列表页面。
- TIMUIKitGroupProfile:群资料页面,使用方式与
TIMUIKitProfile
基本一致。 - TIMUIKitGroup:群列表界面。
- TIMUIKitBlackList:黑名单列表界面。
- TIMUIKitNewContact:联系人(好友)申请列表。如需在外部显示小红点,可使用
TIMUIKitUnreadCount
小红点组件,其会自动挂载监听。 - 本地搜索:
TIMUIKitSearch
全局搜索组件,支持全局搜索联系人/群组/聊天记录,也支持使用TIMUIKitSearchMsgDetail
在特定会话中搜索聊天记录。两种模式取决于是否传入conversation
。
一些额外的插件
除 TUIKit 本体基础功能外,他们还提供了一些选装插件,可以进一步丰富 IM 能力。
个人比较推荐这些: