快速开始

大约 3 分钟

快速开始

利用环信单群聊 UIKit，你可以轻松实现单群和群聊。Flutter 单群聊 UIKit 支持 iOS 和 Android 平台。

本文介绍如何快速实现在单聊会话中发送消息。

前提条件

开始前，请确保你的开发环境满足以下条件：

  1. Flutter 版本
environment:
  sdk: '>=3.0.0 <4.0.0'
  flutter: ">=3.3.0"
  1. 你需要添加权限：
  • iOS: 在 <project root>/ios/Runner/Info.plist 中添加以下权限。
NSPhotoLibraryUsageDescription
NSCameraUsageDescription
NSMicrophoneUsageDescription
  • Android: em_chat_uikit 已经在 AndroidManifest.xml 中添加以下权限, 你不需要再重复添加。
  <uses-permission android:name="android.permission.CAMERA" />
  <uses-permission android:name="android.permission.RECORD_AUDIO" />
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

实现发送第一条单聊消息

本节介绍如何通过单群聊 UIKit 实现发送第一条单聊消息。

第一步 创建项目

flutter create chat_uikit_demo --platforms=android,ios

第二步 添加依赖

进入项目目录，添加最新版 em_chat_uikit：

cd chat_uikit_demo
flutter pub add em_chat_uikit
flutter pub get

第三步 添加主题

打开新建的项目(此处使用的 IDE 是 vscode), 添加 ChatUIKitTheme 主题依赖。

需要确保主题 ChatUIKitTheme 是 ChatUIKit 中所有组件的父组件，建议放在 MyApp 中，保证始终生效。

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      ...
      // 新添加的代码
      builder: (context, child) {
        return ChatUIKitTheme(child: child!);
      },
    );
  }
}

第四步 初始化

初始化 ChatUIKit，其中 appkey 需要替换为你自己的 App Key。


// 导入头文件
import 'package:em_chat_uikit/chat_uikit.dart';
...

void main() {
  ChatUIKit.instance
      .init(options: Options(appKey: appkey, autoLogin: false))
      .then((value) {
    runApp(const MyApp());
  });
}

第五步 登录

ChatUIKit 提供以下两种登录方法：用户 ID 和密码以及用户 ID 和 token。

提示

若你已集成了 IM SDK，SDK 的所有用户 ID 均可用于登录单群聊 UIKit。

ChatUIKit.instance.loginWithPassword(userId: userId, password: password);
  • 使用用户 ID 和 token 登录：

为了方便快速体验，你可以在环信即时通讯云控制台open in new window的应用概览 > 用户认证页面创建用户并查看用户 token。用户认证页面中的用户仅用于快速体验或调试目的。

在开发环境中，你需要在环信控制台创建 IM 用户，从你的 App Server 获取用户 token，详见使用环信用户 token 鉴权 。

ChatUIKit.instance.loginWithToken(userId: userId, token: token);

第六步 添加聊天页面

登录后显示聊天页面。

ChatUIKit 提供了 MessagesView，用于登录成功后显示聊天页面。

  @override
  Widget build(BuildContext context) {
    /// userId：接收方的用户 ID
    return MessagesView(profile: ChatUIKitProfile.contact(id: userId));
  }

第七步 发送第一条消息

在聊天页面下方输入消息，然后点击发送按钮发送消息。

img

参考

快速开始整个流程的完整代码如下：

import 'package:em_chat_uikit/chat_uikit.dart';
import 'package:flutter/material.dart';

const appkey = '';
const currentUserId = '';
const currentUserPwd = '';
const chatterId = '';
void main() {
  ChatUIKit.instance
      .init(options: Options(appKey: appkey, autoLogin: false))
      .then((value) {
    runApp(const MyApp());
  });
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
      builder: (context, child) {
        return ChatUIKitTheme(
          color: ChatUIKitColor.light(),
          child: child!,
        );
      },
      onGenerateRoute: (settings) {
        return null;
      },
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextButton(
              onPressed: () {
                if (ChatUIKit.instance.isLogged()) {
                  ChatUIKit.instance.logout().then((value) => setState(() {}));
                } else {
                  ChatUIKit.instance
                      .loginWithPassword(
                          userId: currentUserId, password: currentUserPwd)
                      .then((value) => setState(() {}));
                }
              },
              child: ChatUIKit.instance.isLogged()
                  ? const Text('Logout')
                  : const Text('Login'),
            ),
            if (ChatUIKit.instance.isLogged())
              const Expanded(child: ChatPage()),
          ],
        ),
      ),
    );
  }
}

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

  @override
  State<ChatPage> createState() => _ChatPageState();
}

class _ChatPageState extends State<ChatPage> {
  @override
  Widget build(BuildContext context) {
    return MessagesView(profile: ChatUIKitProfile.contact(id: chatterId));
  }
}
环信IM文档