Flutter即时通讯插件zego_zimkit的使用

ZIMKit(ZegoCloud In-App Chat UIKit)

ZIMKit 是 ZegoCloud 提供的一个即用型聊天 UI 套件，支持多种即时通讯功能。以下是 ZIMKit 的主要功能：

🥳 beta 支持:

• 创建点对点聊天 / 创建群聊 / 加入群聊
• 发送文本、图片（<10M）、GIF（<10M）、视频（<100M）、文件（<100M）
• 长按会话列表项删除会话或退出群聊
• 自定义 UI（请检查小部件的参数）

✨ 即将推出:

• 邀请加入群聊 / 设置用户头像 / 设置群头像
• 下载文件

1. 初始化 IMKit

在 main.dart 文件中初始化 ZIMKit：

void main() {
  ZIMKit().init(
    appID: YOUR_APP_ID, // 你的 App ID
    appSign: YOUR_APP_SIGN, // 你的 App Sign
  );
  runApp(const ZIMKitDemo());
}

2. 用户登录

创建一个按钮，用户点击后进行登录操作：

ElevatedButton(
  onPressed: () async {
    await ZIMKit()
        .connectUser(id: userID.text, name: userName.text);
    Navigator.of(context).pushReplacement(
      MaterialPageRoute(
        builder: (context) => const ZIMKitDemoHomePage(),
      ),
    );
  },
  child: const Text("登录"),
)

3. 享受聊天功能

创建一个主页，显示会话列表并导航到消息页面：

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

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async => false,
      child: Scaffold(
        appBar: AppBar(title: const Text('会话')),
        body: ZIMKitConversationListView(
          onPressed: (context, conversation, defaultAction) {
            Navigator.push(context, MaterialPageRoute(
              builder: (context) {
                return ZIMKitMessageListPage(
                  conversationID: conversation.id,
                  conversationType: conversation.type,
                );
              },
            ));
          },
        ),
      ),
    );
  }
}

示例代码

以下是一个完整的示例代码，展示了如何使用 ZIMKit 进行即时通讯：

main.dart

import 'package:flutter/material.dart';
import 'package:zego_zimkit/zego_zimkit.dart';
import 'package:zego_zimkit_example/home_page.dart';

void main() {
  ZIMKit().init(
    appID: YOUR_APP_ID, // 你的 App ID
    appSign: YOUR_APP_SIGN, // 你的 App Sign
  );
  runApp(const ZIMKitDemo());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ZIMKit Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const LoginPage(),
    );
  }
}

class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

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

class _LoginPageState extends State<LoginPage> {
  final TextEditingController userIDController = TextEditingController();
  final TextEditingController userNameController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('登录')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(
              controller: userIDController,
              decoration: const InputDecoration(labelText: '用户ID'),
            ),
            TextField(
              controller: userNameController,
              decoration: const InputDecoration(labelText: '用户名'),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                await ZIMKit()
                    .connectUser(id: userIDController.text, name: userNameController.text);
                Navigator.of(context).pushReplacement(
                  MaterialPageRoute(
                    builder: (context) => const ZIMKitDemoHomePage(),
                  ),
                );
              },
              child: const Text("登录"),
            ),
          ],
        ),
      ),
    );
  }
}

home_page.dart

import 'package:flutter/material.dart';
import 'package:zego_zimkit/zego_zimkit.dart';

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

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async => false,
      child: Scaffold(
        appBar: AppBar(title: const Text('会话')),
        body: ZIMKitConversationListView(
          onPressed: (context, conversation, defaultAction) {
            Navigator.push(context, MaterialPageRoute(
              builder: (context) {
                return ZIMKitMessageListPage(
                  conversationID: conversation.id,
                  conversationType: conversation.type,
                );
              },
            ));
          },
        ),
      ),
    );
  }
}

pubspec.yaml

确保在 pubspec.yaml 文件中添加 ZIMKit 依赖：

dependencies:
  flutter:
    sdk: flutter
  zego_zimkit: ^1.0.0

通过以上步骤，你可以快速集成 ZegoCloud 的 ZIMKit 到你的 Flutter 应用中，实现即时通讯功能。希望这些信息对你有所帮助！如果有任何问题，请随时联系 ZegoCloud 的技术支持团队。