{"id":18438145,"url":"https://github.com/easemob/easemob-uikit-flutter","last_synced_at":"2025-04-07T20:34:54.609Z","repository":{"id":220294204,"uuid":"750856340","full_name":"easemob/easemob-uikit-flutter","owner":"easemob","description":null,"archived":false,"fork":false,"pushed_at":"2024-12-18T05:50:05.000Z","size":2221,"stargazers_count":3,"open_issues_count":0,"forks_count":4,"subscribers_count":9,"default_branch":"main","last_synced_at":"2025-03-23T00:31:48.892Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/easemob.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-01-31T13:11:14.000Z","updated_at":"2024-12-20T02:36:47.000Z","dependencies_parsed_at":"2024-05-15T21:41:45.050Z","dependency_job_id":"4666d944-c6ab-4e8a-a15b-287da0e16655","html_url":"https://github.com/easemob/easemob-uikit-flutter","commit_stats":null,"previous_names":["easemob/chatuikit-flutter","easemob/easemob-uikit-flutter"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/easemob%2Feasemob-uikit-flutter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/easemob%2Feasemob-uikit-flutter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/easemob%2Feasemob-uikit-flutter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/easemob%2Feasemob-uikit-flutter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/easemob","download_url":"https://codeload.github.com/easemob/easemob-uikit-flutter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247726221,"owners_count":20985846,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-06T06:18:47.866Z","updated_at":"2025-04-07T20:34:52.724Z","avatar_url":"https://github.com/easemob.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 快速开始\n\n利用环信单群聊 UIKit，你可以轻松实现单群和群聊。Flutter 单群聊 UIKit 支持 iOS 和 Android 平台。\n\n本文介绍如何快速实现在单聊会话中发送消息。\n\n## 前提条件\n\n开始前，请确保你的开发环境满足以下条件：\n\n1. Flutter 版本\n\n```yaml\nenvironment:\n  sdk: '\u003e=3.0.0 \u003c4.0.0'\n  flutter: \"\u003e=3.3.0\"\n```\n\n2. 你需要添加权限：\n\n- iOS: 在 `\u003cproject root\u003e/ios/Runner/Info.plist` 中添加以下权限。\n\n```xml\nNSPhotoLibraryUsageDescription\nNSCameraUsageDescription\nNSMicrophoneUsageDescription\n```\n\n- Android: `em_chat_uikit` 已经在 `AndroidManifest.xml` 中添加以下权限, 你不需要再重复添加。\n\n```xml\n  \u003cuses-permission android:name=\"android.permission.CAMERA\" /\u003e\n  \u003cuses-permission android:name=\"android.permission.RECORD_AUDIO\" /\u003e\n  \u003cuses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\" /\u003e\n```\n\n\n## 实现发送第一条单聊消息\n\n本节介绍如何通过单群聊 UIKit 实现发送第一条单聊消息。\n\n### 第一步 创建项目\n\n```bash\nflutter create chat_uikit_demo --platforms=android,ios\n```\n\n### 第二步 添加依赖\n\n进入项目目录，添加最新版 `em_chat_uikit`：\n\n```bash\ncd chat_uikit_demo\nflutter pub add em_chat_uikit\nflutter pub get\n```\n\n### 第三步 添加主题\n\n打开新建的项目(此处使用的 IDE 是 `vscode`), 添加 `ChatUIKitTheme` 主题依赖。\n\n需要确保主题 `ChatUIKitTheme` 是 `ChatUIKit` 中所有组件的父组件，建议放在 `MyApp` 中，保证始终生效。\n\n```dart\nclass MyApp extends StatelessWidget {\n   MyApp({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      ...\n      // 新添加的代码\n      builder: (context, child) {\n        return ChatUIKitTheme(child: child!);\n      },\n    );\n  }\n}\n```\n\n### 第四步 添加国际化\n\n```dart\nclass MyApp extends StatelessWidget {\n  // 新添加的代码\n  final ChatUIKitLocalizations _localization = ChatUIKitLocalizations();\n   MyApp({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      // 新添加的代码\n      supportedLocales: _localization.supportedLocales,\n      localizationsDelegates: _localization.localizationsDelegates,\n      localeResolutionCallback: _localization.localeResolutionCallback,\n      locale: _localization.currentLocale,\n\n      ...\n    );\n  }\n}\n```\n\n\n### 第五步 初始化\n\n初始化 `ChatUIKit`，其中 `appkey` 需要替换为你自己的 App Key。\n\n```dart\n\n// 导入头文件\nimport 'package:em_chat_uikit/chat_uikit.dart';\n...\n\nvoid main() {\n  ChatUIKit.instance\n      .init(options: Options(appKey: appkey, autoLogin: false))\n      .then((value) {\n    runApp(MyApp());\n  });\n}\n\n```\n\n### 第六步 登录\n\n`ChatUIKit` 提供以下两种登录方法：用户 ID 和密码以及用户 ID 和 token。\n\n:::tip\n若你已集成了 IM SDK，SDK 的所有用户 ID 均可用于登录单群聊 UIKit。\n:::\n\n- [使用用户 ID 和密码登录](/product/enable_and_configure_IM.html#创建-im-用户)：\n\n```dart \nChatUIKit.instance.loginWithPassword(userId: userId, password: password);\n```\n\n- 使用用户 ID 和 token 登录：\n\n为了方便快速体验，你可以在[环信即时通讯云控制台](https://console.easemob.com/user/login)的**应用概览** \u003e **用户认证**页面创建用户并查看用户 token。**用户认证**页面中的用户仅用于快速体验或调试目的。\n\n在开发环境中，你需要在环信控制台[创建 IM 用户](/product/enable_and_configure_IM.html#创建-im-用户)，从你的 App Server 获取用户 token，详见[使用环信用户 token 鉴权](/product/easemob_user_token.html) 。\n\n```dart\nChatUIKit.instance.loginWithToken(userId: userId, token: token);\n```\n\n### 第七步 添加聊天页面\n\n登录后显示聊天页面。\n\n`ChatUIKit` 提供了 `MessagesView`，用于登录成功后显示聊天页面。\n\n```dart\n  @override\n  Widget build(BuildContext context) {\n    /// userId：接收方的用户 ID\n    return MessagesView(profile: ChatUIKitProfile.contact(id: userId));\n  }\n```\n\n### 第七步 发送第一条消息\n\n在聊天页面下方输入消息，然后点击**发送**按钮发送消息。\n\n![img](@static/images/uikit/chatuikit/android/message_first.png =300x650) \n\n## 参考\n\n快速开始整个流程的完整代码如下：\n\n```dart\nimport 'package:em_chat_uikit/chat_uikit.dart';\nimport 'package:flutter/material.dart';\n\nconst appkey = '';\nconst currentUserId = '';\nconst currentUserPwd = '';\nconst chatterId = '';\nvoid main() {\n  ChatUIKit.instance.init(options: Options(appKey: appkey, autoLogin: false)).then((value) {\n    runApp(MyApp());\n  });\n}\n\nclass MyApp extends StatelessWidget {\n  MyApp({super.key});\n  final ChatUIKitLocalizations _localization = ChatUIKitLocalizations();\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      // 设置demo国际化支持语言\n      supportedLocales: _localization.supportedLocales,\n      // 提供语言包内容给demo\n      localizationsDelegates: _localization.localizationsDelegates,\n      // 当国际化语言不支持时，提供语言默认实现\n      localeResolutionCallback: _localization.localeResolutionCallback,\n      locale: _localization.currentLocale,\n      title: 'Flutter Demo',\n      theme: ThemeData(\n        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),\n        useMaterial3: true,\n      ),\n      home: const MyHomePage(title: 'Flutter Demo Home Page'),\n      builder: (context, child) {\n        return ChatUIKitTheme(\n          color: ChatUIKitColor.light(),\n          child: child!,\n        );\n      },\n      onGenerateRoute: (settings) {\n        return null;\n      },\n    );\n  }\n}\n\nclass MyHomePage extends StatefulWidget {\n  const MyHomePage({super.key, required this.title});\n\n  final String title;\n\n  @override\n  State\u003cMyHomePage\u003e createState() =\u003e _MyHomePageState();\n}\n\nclass _MyHomePageState extends State\u003cMyHomePage\u003e {\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(\n        backgroundColor: Theme.of(context).colorScheme.inversePrimary,\n        title: Text(widget.title),\n      ),\n      body: Center(\n        child: Column(\n          mainAxisAlignment: MainAxisAlignment.center,\n          children: \u003cWidget\u003e[\n            TextButton(\n              onPressed: () {\n                if (ChatUIKit.instance.isLogged()) {\n                  ChatUIKit.instance.logout().then((value) =\u003e setState(() {}));\n                } else {\n                  ChatUIKit.instance\n                      .loginWithPassword(userId: currentUserId, password: currentUserPwd)\n                      .then((value) =\u003e setState(() {}));\n                }\n              },\n              child: ChatUIKit.instance.isLogged() ? const Text('Logout') : const Text('Login'),\n            ),\n            if (ChatUIKit.instance.isLogged()) const Expanded(child: ChatPage()),\n          ],\n        ),\n      ),\n    );\n  }\n}\n\nclass ChatPage extends StatefulWidget {\n  const ChatPage({super.key});\n\n  @override\n  State\u003cChatPage\u003e createState() =\u003e _ChatPageState();\n}\n\nclass _ChatPageState extends State\u003cChatPage\u003e {\n  @override\n  Widget build(BuildContext context) {\n    return MessagesView(profile: ChatUIKitProfile.contact(id: chatterId));\n  }\n}\n\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feasemob%2Feasemob-uikit-flutter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feasemob%2Feasemob-uikit-flutter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feasemob%2Feasemob-uikit-flutter/lists"}