快速集成方案

什么是Flutter TIMUIKit?

Flutter TIMUIKit 是基于Flutter IM SDK 实现的一套UI组件，其中包含会话、聊天、关系链、群组等功能，基于UI组件您可以像搭积木一样快速搭建起自己的业务逻辑。

目前包含的组件如下：

TIMUIKitCore 核心
TIMUIKitConversation 会话
TIMUIKitChat 聊天
TIMUIKitContact 联系人
TIMUIKitProfile 好友管理
TIMUIKitGroupProfile 群管理
TIMUIKitGroup 我的群聊
TIMUIKitBlackList 黑名单
TIMUIKitNewContact 新的联系人

支持平台

Android
ios

如何集成？

如下会介绍如何使用TIMUIKit快速构建一个简单的即时通信应用.

步骤1: 创建Flutter应用

参考Flutter文档快速创建一个flutter应用。

步骤2: 安装依赖

在pubspec.yaml文件中的dependencies下添加tencent_cloud_chat_uikit。或者执行如下命令:

// step 1:
flutter pub add tencent_cloud_chat_uikit

// step 2:
flutter pub get

步骤3: 初始化TIMUIKit

在initState中初始化TIMUIKit，项目启动只需要初始化一次即可。

/// main.dart
import 'package:flutter/material.dart';
import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TIMUIKit Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'TIMUIKit Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final CoreServicesImpl _coreInstance = TIMUIKitCore.getInstance();

  @override
  void initState() {
    _coreInstance.init(
      sdkAppID: 0, // 控制台申请的sdkAppID
      loglevel: LogLevelEnum.V2TIM_LOG_DEBUG,
      listener: V2TimSDKListener());    
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(),
    );
  }
}

步骤4: 获取签名和登录

正确的 UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并提供面向 App 的接口，在需要 UserSig 时由您的 App 向业务服务器发起请求获取动态 UserSig。更多详情请参见服务端生成 UserSig。

添加两个TextField用于输入userID 和 userSig。点击登录后掉用登录接口。

/// main.dart
/// 省略
class _MyHomePageState extends State<MyHomePage> {
  /// 获取 TIMUIKitCore Instance
  final CoreServicesImpl _coreInstance = TIMUIKitCore.getInstance();
  String userID = "";
  String userSig = "";

  /// 省略

  void _login() {
    // 登录
    _coreInstance.login(userID: userID, userSig: userSig);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextField(
              onChanged: ((value) {
                setState(() {
                  userID = value;
                });
              }),
              decoration: InputDecoration(hintText: "userID"),
            ),
            TextField(
              onChanged: ((value) {
                setState(() {
                  userSig = value;
                });
              }),
              decoration: InputDecoration(hintText: "userSig"),
            ),
            ElevatedButton(
                onPressed: (() {
                  _login();
                }),
                child: const Text("登录"))
          ],
        ),
      ),
    );
  }
}

步骤4: 集成所需组件

创建message.dart文件集成TIMUIKitConversation 和 TIMUIKitChat包含不仅限于此。可根据您的需求集成更多的组件。
修改main.dart中代码，登录成功后跳转至该页面。

/// message.dart
import 'package:flutter/material.dart';
import 'package:tencent_cloud_chat_uikit/tencent_cloud_chat_uikit.dart';

class Conversation extends StatelessWidget {
  const Conversation({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          "消息",
          style: TextStyle(color: Colors.black),
        ),
      ),
      body: TIMUIKitConversation(
        onTapItem: (selectedConv) {
          Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => Chat(
                  selectedConversation: selectedConv,
                ),
              ));
        },
      ),
    );
  }
}

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 或者 userID
      conversationType: selectedConversation.type ?? 0, // 会话类型
      conversationShowName: selectedConversation.showName ?? "", // 会话展示名称
      onTapAvatar: (_) {}, // 点击消息发送者头像回调事件、可与TIMUIKitProfile关联使用
      appBarActions: [
        IconButton(
            onPressed: () {}, icon: const Icon(Icons.more_horiz_outlined))
      ],
    );
  }
}


/// main.dart

/// 部分代码省略
void _login() async {
    final res = await _coreInstance.login(userID: userID, userSig: userSig);
    if (res.code == 0) {
      Navigator.of(context).pushAndRemoveUntil(
        MaterialPageRoute(
            builder: (BuildContext context) => const Conversation()),
        (route) => false,
      );
    }
  }

常见问题

1: 引入了 `TIMUIKit` 还需要引入 `IM SDK` 吗？

不需要再次引入IM SDK了。如果需要使用IM SDK 相关的接口，可通过 TIMUIKitCore.getSDKInstance()获取。为了保证IM SDK 的版本一致性，我们推荐您使用该方式使用SDK。

2: 发送语音、图片、文件等消息闪退?

请查看是否打开了相机、麦克风、相册等权限。

7.0 KiB Raw Permalink Blame History Unescape Escape