🔰如何使用 ZEGOCLOUD ZIMKit 在 Flutter 中构建实时聊天应用（无需后端）

Source: Dev.to

介绍

实时聊天功能已成为现代应用的核心特性——无论是创建类似 WhatsApp 的消息平台、客服聊天，还是社区群组应用。与其自行搭建服务器、处理 WebSocket 并手动同步消息，ZEGOCLOUD 为 Flutter 开发者提供即用的 API 和 UI 组件。借助 ZIMKit，你可以在几分钟内创建实时聊天应用——无需管理任何后端基础设施。

在本教程中，我们将构建一个具备以下功能的实时聊天应用：

• 登录
• 私聊
• 群聊
• 实时消息
• 无需后端

您将构建的内容

阅读完本文后，你将能够：

• 在 Flutter 中集成 ZEGOCLOUD ZIMKit
• 初始化聊天 SDK
• 本地注册用户
• 创建私聊会话
• 创建并加入群聊
• 实时显示会话列表

什么是 ZEGOCLOUD？

ZEGOCLOUD 是一个通信平台，提供以下 SDK：

• 应用内聊天
• 语音与视频通话
• 直播流媒体
• 互动房间

网站：
应用内聊天产品：
Flutter 文档：

步骤 1 — 安装 Zego ZIMKit

打开 pubspec.yaml 文件并添加 ZIMKit 依赖：

然后运行：

flutter pub get

步骤 2 — 初始化聊天 SDK

创建一个用于存放凭证的文件，例如 utils/app_string.dart。

⚠️ 切勿在公共仓库中泄露你的 AppSign。

必需的 Android 配置

权限

在 android/app/src/main/AndroidManifest.xml 中添加所需权限：

Proguard 规则（发布模式）

创建或编辑 android/app/proguard-rules.pro：

构建 Gradle 配置

编辑 android/app/build.gradle 并启用 minify + proguard：

步骤 3 — 在 main.dart 中初始化 ZIMKit

import 'package:chat_app_zegogloud/screens/login.dart';
import 'package:chat_app_zegogloud/utils/app_string.dart';
import 'package:flutter/material.dart';
import 'package:zego_zimkit/zego_zimkit.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  ZIMKit().init(appID: AppString.appID, appSign: AppString.appSign);
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

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

步骤 4 — 创建登录页面

我们使用 userID 和 username 在本地进行用户认证——无需后端。

screens/login.dart

import 'package:chat_app_zegogloud/screens/home.dart';
import 'package:flutter/material.dart';
import 'package:zego_zimkit/zego_zimkit.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({super.key});

  @override
  State create() => _LoginPageState();
}

class _LoginPageState extends State {
  final userId = TextEditingController();
  final userName = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Login to Chat')),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: userId,
              decoration: const InputDecoration(labelText: 'User ID'),
            ),
            TextField(
              controller: userName,
              decoration: const InputDecoration(labelText: 'User Name'),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                ZIMKit().connectUser(id: userId.text, name: userName.text);
                Navigator.of(context).push(
                  MaterialPageRoute(builder: (_) => const HomePage()),
                );
              },
              child: const Text('Login'),
            ),
          ],
        ),
      ),
    );
  }
}

步骤 5 — 带会话列表的主页

此页面展示所有私聊和群聊会话。

screens/home.dart

import 'package:chat_app_zegogloud/screens/login.dart';
import 'package:chat_app_zegogloud/screens/home_page_popUp.dart';
import 'package:flutter/material.dart';
import 'package:zego_zimkit/zego_zimkit.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State create() => _HomePageState();
}

class _HomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home Page'),
        actions: [
          IconButton(icon: const Icon(Icons.logout), onPressed: _handleLogout),
          const HomePagePopup(),
        ],
      ),
      body: ZIMKitConversationListView(
        onPressed: (context, conversation) {
          // Navigate to chat screen (implementation omitted for brevity)
        },
      ),
    );
  }

  void _handleLogout() {
    ZIMKit().logout();
    Navigator.of(context).pushReplacement(
      MaterialPageRoute(builder: (_) => const LoginPage()),
    );
  }
}

其余 UI（聊天界面、群组创建等）遵循相同模式，使用 ZIMKitMessageListView、ZIMKitMessageInput 等 ZIMKit 组件。根据你的应用设计自行调整。