跑通示例源码

示例源码

本地下载

注意

该示例源码仅供开发者接入时参考，ZEGO 不负责示例源码的后续维护。
若开发者计划将该示例源码用于生产环境，请确保发布前进行充分测试，避免发生潜在问题造成损失。

准备环境

请确保开发环境满足以下技术要求：

Flutter 版本需要高于 3.16（包括 3.16）。
根据示例 App 运行设备，相关技术要求如下：

请配置开发环境如下：

Android Studio：“Preferences > Plugins”，搜索 “Flutter” 插件进行下载，并在插件中配置已经下载好的 Flutter 的 SDK 路径。
Visual Studio Code: 在应用商店中搜索 “Flutter” 扩展并下载。以上任一开发环境配置好 Flutter 环境后，在终端执行 flutter doctor，根据提示内容补全相关未下载的依赖项。

前提条件

已在 ZEGO 控制台创建项目，并申请有效的 AppID，详情请参考控制台 - 项目管理中的“项目信息”。
文件共享功能不是默认开启的，使用前请在 ZEGO 控制台自助开通（开通步骤请参考控制台文档服务配置 - 文件共享），或联系 ZEGO 技术支持开通。

示例源码项目结构

下面目录结构为示例源码的文件结构，下文所涉及的文件路径均为相对于此目录的路径。

ZegoSuperBoardDemo_flutter_src
├── README.md
├── android
│   ├── app
│   │   ├── build.gradle.kts
│   │   ├── libs
│   │   │   ├── zegodocsview.aar
│   │   │   ├── zegosuperboard.aar
│   │   │   └── zegowhiteboardview.aar
│   │   └── src
│   │       ├── debug
│   │       │   └── AndroidManifest.xml
│   │       ├── main
│   │       │   ├── AndroidManifest.xml
│   │       │   ├── kotlin
│   │       │   │   └── com
│   │       │   │       └── example
│   │       │   │           └── zego_superboard_example
│   │       │   │               ├── MainActivity.kt
│   │       │   │               └── ZegoCaptureWhiteboardPlugin.kt
│   │       │   └── res
│   │       └── profile
│   │           └── AndroidManifest.xml
│   ├── build.gradle.kts
│   ├── gradle
│   ├── gradle.properties
│   └── settings.gradle.kts
├── images
├── ios
│   ├── Flutter
│   │   ├── AppFrameworkInfo.plist
│   │   ├── Debug.xcconfig
│   │   └── Release.xcconfig
│   ├── Podfile
│   ├── Runner
│   │   ├── AppDelegate.swift
│   │   ├── Assets.xcassets
│   │   │   ├── AppIcon.appiconset
│   │   │   └── LaunchImage.imageset
│   │   ├── Base.lproj
│   │   │   ├── LaunchScreen.storyboard
│   │   │   └── Main.storyboard
│   │   ├── Info.plist
│   │   ├── Runner-Bridging-Header.h
│   │   ├── ZegoCaptureWhiteboardPlugin.h
│   │   └── ZegoCaptureWhiteboardPlugin.m
│   ├── Runner.xcodeproj
│   ├── Runner.xcworkspace
│   └── RunnerTests
├── lib
│   ├── draw
│   │   ├── darw_tool_custom_image.dart
│   │   ├── darw_tool_format.dart
│   │   └── darw_tool_geometry.dart
│   ├── join_room_page.dart
│   ├── login_page.dart
│   ├── main.dart
│   ├── menu
│   │   ├── menu_draw_page.dart
│   │   ├── menu_file_page.dart
│   │   └── menu_supre_board_page.dart
│   ├── quick_join_item.dart
│   ├── setting_environment_page.dart
│   ├── setting_page.dart
│   ├── superboard_page.dart
│   ├── superboard_view_page.dart
│   ├── uitils
│   │   ├── adapt.dart
│   │   ├── app_navigator_observer.dart
│   │   ├── capture_utils.dart
│   │   ├── date_extension.dart
│   │   ├── date_util.dart
│   │   ├── extension.dart
│   │   ├── function_util.dart
│   │   ├── global.dart
│   │   ├── navigator_util.dart
│   │   ├── sp_constant.dart
│   │   ├── sp_util.dart
│   │   ├── toast_util.dart
│   │   ├── widget_utils.dart
│   │   ├── zego_auth_constants.dart
│   │   ├── zego_capture_whiteboard.dart
│   │   ├── zego_drawing_tool_manager.dart
│   │   ├── zego_env_manager.dart
│   │   └── zego_manager.dart
│   └── widget
│       ├── custom_bottom_sheet.dart
│       ├── custom_route_animation.dart
│       ├── format_table_view.dart
│       ├── loading_page.dart
│       ├── page_route_animate.dart
│       └── upload_file_type_page.dart
└── pubspec.yaml

ZegoSuperBoardDemo_flutter_src
├── README.md
├── android
│   ├── app
│   │   ├── build.gradle.kts
│   │   ├── libs
│   │   │   ├── zegodocsview.aar
│   │   │   ├── zegosuperboard.aar
│   │   │   └── zegowhiteboardview.aar
│   │   └── src
│   │       ├── debug
│   │       │   └── AndroidManifest.xml
│   │       ├── main
│   │       │   ├── AndroidManifest.xml
│   │       │   ├── kotlin
│   │       │   │   └── com
│   │       │   │       └── example
│   │       │   │           └── zego_superboard_example
│   │       │   │               ├── MainActivity.kt
│   │       │   │               └── ZegoCaptureWhiteboardPlugin.kt
│   │       │   └── res
│   │       └── profile
│   │           └── AndroidManifest.xml
│   ├── build.gradle.kts
│   ├── gradle
│   ├── gradle.properties
│   └── settings.gradle.kts
├── images
├── ios
│   ├── Flutter
│   │   ├── AppFrameworkInfo.plist
│   │   ├── Debug.xcconfig
│   │   └── Release.xcconfig
│   ├── Podfile
│   ├── Runner
│   │   ├── AppDelegate.swift
│   │   ├── Assets.xcassets
│   │   │   ├── AppIcon.appiconset
│   │   │   └── LaunchImage.imageset
│   │   ├── Base.lproj
│   │   │   ├── LaunchScreen.storyboard
│   │   │   └── Main.storyboard
│   │   ├── Info.plist
│   │   ├── Runner-Bridging-Header.h
│   │   ├── ZegoCaptureWhiteboardPlugin.h
│   │   └── ZegoCaptureWhiteboardPlugin.m
│   ├── Runner.xcodeproj
│   ├── Runner.xcworkspace
│   └── RunnerTests
├── lib
│   ├── draw
│   │   ├── darw_tool_custom_image.dart
│   │   ├── darw_tool_format.dart
│   │   └── darw_tool_geometry.dart
│   ├── join_room_page.dart
│   ├── login_page.dart
│   ├── main.dart
│   ├── menu
│   │   ├── menu_draw_page.dart
│   │   ├── menu_file_page.dart
│   │   └── menu_supre_board_page.dart
│   ├── quick_join_item.dart
│   ├── setting_environment_page.dart
│   ├── setting_page.dart
│   ├── superboard_page.dart
│   ├── superboard_view_page.dart
│   ├── uitils
│   │   ├── adapt.dart
│   │   ├── app_navigator_observer.dart
│   │   ├── capture_utils.dart
│   │   ├── date_extension.dart
│   │   ├── date_util.dart
│   │   ├── extension.dart
│   │   ├── function_util.dart
│   │   ├── global.dart
│   │   ├── navigator_util.dart
│   │   ├── sp_constant.dart
│   │   ├── sp_util.dart
│   │   ├── toast_util.dart
│   │   ├── widget_utils.dart
│   │   ├── zego_auth_constants.dart
│   │   ├── zego_capture_whiteboard.dart
│   │   ├── zego_drawing_tool_manager.dart
│   │   ├── zego_env_manager.dart
│   │   └── zego_manager.dart
│   └── widget
│       ├── custom_bottom_sheet.dart
│       ├── custom_route_animation.dart
│       ├── format_table_view.dart
│       ├── loading_page.dart
│       ├── page_route_animate.dart
│       └── upload_file_type_page.dart
└── pubspec.yaml

填写配置文件

从本文开头处下载并解压示例源码压缩包，获得“ZegoSuperBoardDemo_flutter_src”文件夹，并使用 Android Studio/Visual Code Studio 打开。
下载的示例源码中缺少 SDK 初始化所需的 AppID 和 AppSign，需要修改 “lib/uitils/zego_auth_constants.dart” 文件。请使用本文前提条件已获取的 AppID 和 AppSign 正确填写。

安装依赖

进入“ZegoSuperBoardDemo_flutter_src”文件夹，打开 Terminal，执行 flutter pub get 或 flutter pub upgrade。

在 Android 设备运行

使用 Android Studio/Visual Code Studio 打开 “ZegoSuperBoardDemo_flutter_src”。
将一台 Android 设备（真机）连接到开发电脑。
运行示例源码。

在 iOS 设备上运行

将一台 iOS 设备（真机）连接到电脑。
使用 Xcode 打开示例源码目录中的“/ios/Runner.xcworkspace”。
登录 Apple ID。

打开 Xcode, 点击左上角 Xcode > Settings，选择 Account 选项卡，点击左下角的 + 号，选择添加 Apple ID。

输入 AppID 和密码。
修改开发者证书和 Bundle Identifier。
1. 在 Xcode 单击左侧的“Runner”项目。
2. 在“Runner”页面中找到“TARGETS”，选择“Runner”。
3. 单击“Signing & Capabilities”页签。
4. 在“Signing”中找到“Team”，选择您的开发者证书；找到“Bundle Identifier”，修改项目的“Bundle Identifier”。
运行源码

您可以使用 Visual Studio Code 或 Xcode 运行示例源码。
- Visual Studio Code
  1. 使用 Visual Studio Code 打开示例源码。
  2. 在顶部菜单栏中点击“Run > Start Debugging“。
  3. 在弹窗中选择 iOS 真机设备，即可运行项目。
- Xcode
  1. 在终端前往源码所在文件夹，输入以下指令，运行示例源码。
    cd ios/ pod install
```
cd ios/
pod install
```
  2. 使用 Xcode 打开示例源码目录中的“/ios/Runner.xcworkspace”，单击顶部“运行”图标，即可运行项目。

体验超级白板

运行成功后将会自动弹出登录窗口，请在此窗口输入自定义的 room ID、userName、userID，登录应用，体验超级白板功能。

注意

room ID：最大长度为 128 字节的字符串，仅支持数字，英文字符和“~”、“!”、“@”、“#”、“$”、“%”、“^”、“&”、“*”、“(”、“)”、“_”、“+”、“=”、“-”、“`”、“;”、“’”、“,”、“.”、“<”、“>”、“/”。如果需要与 Web SDK 互通，请不要使用 '%'。
userName：最大长度不超过 256 字节的 utf8 编码字符串。请勿在此字段填写用户敏感信息，包括但不限于手机号、身份证号、护照编号、真实姓名等。
userID：最大长度为 64 字节的字符串，仅支持数字，英文字符和“~”、“!”、“@”、“#”、“$”、“%”、“^”、“&”、“*”、“(”、“)”、“_”、“+”、“=”、“-”、“`”、“;”、“’”、“,”、“.”、“<”、“>”、“/”。如果需要与 Web SDK 互通，请不要使用 '%'。