Sample code

Download

Warning

The sample code is for reference only. ZEGOCLOUD does not provide the subsequent maintenance for the sample code.
If you plan to use this sample code in a production environment, please ensure sufficient testing before release to avoid potential issues that could cause losses.

Prerequisites

Go to ZEGOCLOUD Admin Console to create a new project, and get the AppID and AppSign of your project.
Contact ZEGOCLOUD Technical Support to enable the file sharing feature.

Prepare the environment

Please ensure that the development environment meets the following technical requirements:

Flutter version must be between 1.10.0 and 3.13.7 (inclusive).
Depending on the device running the sample code, the relevant technical requirements are as follows:

Please configure the development environment as follows:

Android Studio: Go to “Preferences > Plugins”, search for the “Flutter” plugin to download it, and configure the path of the downloaded Flutter SDK in the plugin settings.
Visual Studio Code: Search for the “Flutter” extension in the app store and download it. After configuring the Flutter environment in either of the above development environments, run flutter doctor in the terminal and follow the prompts to install any missing dependencies.

Sample code structure

The following directory structure represents the file structure of the sample code. All file paths mentioned in the text below are relative to this directory.

.superboard_view_flutter
├── CHANGELOG.md
├── LICENSE
├── README.md
├── README_zh.md
├── analysis_options.yaml
├── android
├── changes.txt
├── diff_script.sh
├── example
│   ├── README.md
│   ├── analysis_options.yaml
│   ├── android
│   ├── build
│   ├── images
│   ├── integration_test
│   ├── ios
│   ├── lib
│   │  ├── draw
│   │  ├── join_room_page.dart
│   │  ├── login_page.dart
│   │  ├── main.dart
│   │  ├── menu
│   │  ├── 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  // Enter your AppID and AppSign here
│   │  │   ├── zego_capture_whiteboard.dart
│   │  │   ├── zego_drawing_tool_manager.dart
│   │  │   ├── zego_env_manager.dart
│   │  │   └── zego_manager.dart
│   │  └── widget
│   ├── pubspec.lock
│   ├── pubspec.yaml
│   └── test
├── express_head
├── ios
├── lib
├── pubspec.lock
├── pubspec.yaml
├── superboard_view_flutter.iml
└── test

.superboard_view_flutter
├── CHANGELOG.md
├── LICENSE
├── README.md
├── README_zh.md
├── analysis_options.yaml
├── android
├── changes.txt
├── diff_script.sh
├── example
│   ├── README.md
│   ├── analysis_options.yaml
│   ├── android
│   ├── build
│   ├── images
│   ├── integration_test
│   ├── ios
│   ├── lib
│   │  ├── draw
│   │  ├── join_room_page.dart
│   │  ├── login_page.dart
│   │  ├── main.dart
│   │  ├── menu
│   │  ├── 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  // Enter your AppID and AppSign here
│   │  │   ├── zego_capture_whiteboard.dart
│   │  │   ├── zego_drawing_tool_manager.dart
│   │  │   ├── zego_env_manager.dart
│   │  │   └── zego_manager.dart
│   │  └── widget
│   ├── pubspec.lock
│   ├── pubspec.yaml
│   └── test
├── express_head
├── ios
├── lib
├── pubspec.lock
├── pubspec.yaml
├── superboard_view_flutter.iml
└── test

Fill in the configuration file

Download and unzip the sample code package from the beginning of this article to obtain the "superboard_view_flutter" folder, and open it using Android Studio/Visual Code Studio.
The sample code is missing the AppID and AppSign required for SDK initialization. You need to modify the “example/lib/uitils/zego_auth_constants.dart” file. Please fill in the AppID and AppSign obtained from the Prerequisites correctly.

Install dependencies

Navigate to the “superboard_view_flutter” folder, open Terminal, and execute flutter pub get or flutter pub upgrade.

Runs on Android devices

Open “superboard_view_flutter” using Android Studio/Visual Code Studio.
Connect an Android device (physical device) to your development computer.
Run the sample code.

Runs on iOS devices

Connect an iOS device (physical device) to your computer.
Open the “superboard_view_flutter/ios/Runner.xcworkspace” in the sample code directory using Xcode.
Log in with your Apple ID.

Open Xcode, click Xcode > Settings in the top-left corner, select the Account tab, click the + sign at the bottom left, and choose to add an Apple ID.

Enter the AppID and password.
Modify the developer certificate and the bundle identifier.
1. Click the "Runner" project on the left side in Xcode.
2. In the "Runner" page, find "TARGETS" and select "Runner".
3. Click the "Signing & Capabilities" tab.
4. In "Signing", find "Team" and select your developer certificate; find "Bundle Identifier" and modify the project's "Bundle Identifier".
Run the sample code

You can run the sample source code using Visual Studio Code or Xcode.
- Visual Studio Code
  1. Open the sample source code using Visual Studio Code.
  2. Click “Run > Start Debugging” in the top menu bar.
  3. Select an iOS physical device in the pop-up window to run the project.
- Xcode
  1. Navigate to the sample code folder in the terminal and enter the following commands to run the sample code.
    cd ios/ pod install
```
cd ios/
pod install
```
  2. Open the “superboard_demo/ios/Runner.xcworkspace” in the sample source code directory using Xcode, click the "Run" icon at the top, and you can run the project.

Experience ZEGOCLOUD Super Board

After a successful run, a login window will pop up automatically. Please enter your custom room ID, userName, and userID in this window to log in and experience the ZEGOCLOUD Super Board features.

Warning

room ID: A string with a maximum length of 128 bytes, supporting only numbers, English characters, and the symbols “~”, “!”, “@”, “#”, “$”, “%”, “^”, “&”, “*”, “(”, “)”, “_”, “+”, “=”, “-”, “`”, “;”, “'”, “,”, “.”, “<”, “>”, “/”. If interoperability with the ZEGOCLOUD Super Board for Web is required, please do not use '%'.
userName: A UTF8 encoded string with a maximum length of 256 bytes. Do not fill in user sensitive information in this field, including but not limited to phone numbers, ID card numbers, passport numbers, real names, etc.
userID: A string with a maximum length of 64 bytes, supporting only numbers, English characters, and the symbols “~”, “!”, “@”, “#”, “$”, “%”, “^”, “&”, “*”, “(”, “)”, “_”, “+”, “=”, “-”, “`”, “;”, “'”, “,”, “.”, “<”, “>”, “/”. If interoperability with the ZEGOCLOUD Super Board for Web SDK is required, please do not use '%'.