Flutter白板功能插件whiteboard_sdk_flutter的使用

Flutter白板功能插件whiteboard_sdk_flutter的使用

1. 简介

whiteboard_sdk_flutter 是一个用于在Flutter应用中集成Agora白板功能的插件。通过该插件，开发者可以轻松地在应用中实现实时白板和回放功能。

2. 安装

2.1 添加依赖

在 pubspec.yaml 文件中添加 whiteboard_sdk_flutter 依赖：

dependencies:
  whiteboard_sdk_flutter: ^0.5.4

2.2 Android配置

确保在 AndroidManifest.xml 文件中添加 INTERNET 权限：

<uses-permission android:name="android.permission.INTERNET"/>

3. 使用示例

3.1 实时房间 (Live Room)

以下是创建并加入一个实时白板房间的完整示例代码：

import 'package:flutter/material.dart';
import 'package:whiteboard_sdk_flutter/whiteboard_sdk_flutter.dart';

class WhiteboardRoomPage extends StatefulWidget {
  [@override](/user/override)
  _WhiteboardRoomPageState createState() => _WhiteboardRoomPageState();
}

class _WhiteboardRoomPageState extends State<WhiteboardRoomPage> {
  WhiteSdk? whiteSdk;
  WhiteRoom? whiteRoom;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('实时白板'),
      ),
      body: WhiteboardView(
        options: WhiteOptions(
          appIdentifier: 'YOUR_APP_ID', // 替换为你的App ID
          log: true,
        ),
        onSdkCreated: (sdk) async {
          // 初始化SDK并加入房间
          var room = await sdk.joinRoom(
            options: RoomOptions(
              uuid: 'ROOM_UUID', // 替换为你的房间UUID
              roomToken: 'ROOM_TOKEN', // 替换为你的房间Token
              uid: 'UNIQUE_CLIENT_ID', // 替换为唯一的客户端ID
              isWritable: true, // 是否允许写入
            ),
          );

          setState(() {
            whiteSdk = sdk;
            whiteRoom = room;
          });
        },
      ),
    );
  }
}

3.2 回放 (Replay)

以下是创建并加入一个白板回放的完整示例代码：

import 'package:flutter/material.dart';
import 'package:whiteboard_sdk_flutter/whiteboard_sdk_flutter.dart';

class WhiteboardReplayPage extends StatefulWidget {
  [@override](/user/override)
  _WhiteboardReplayPageState createState() => _WhiteboardReplayPageState();
}

class _WhiteboardReplayPageState extends State<WhiteboardReplayPage> {
  WhiteSdk? whiteSdk;
  WhiteReplay? whiteReplay;

  void _onPlayerStateChanged(WhitePlayerState state) {
    print('Player state changed to: $state');
  }

  void _onPlayerPhaseChanged(WhitePlayerPhase phase) {
    print('Player phase changed to: $phase');
  }

  void _onScheduleTimeChanged(int time) {
    print('Schedule time changed to: $time');
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('白板回放'),
      ),
      body: WhiteboardView(
        options: WhiteOptions(
          appIdentifier: 'YOUR_APP_ID', // 替换为你的App ID
          log: true,
          backgroundColor: Color(0xFFF9F4E7), // 设置背景颜色
        ),
        onSdkCreated: (sdk) async {
          // 初始化SDK并加入回放
          var replay = await sdk.joinReplay(
            options: ReplayOptions(
              room: 'ROOM_UUID', // 替换为你的房间UUID
              roomToken: 'ROOM_TOKEN', // 替换为你的房间Token
            ),
            onPlayerStateChanged: _onPlayerStateChanged,
            onPlayerPhaseChanged: _onPlayerPhaseChanged,
            onScheduleTimeChanged: _onScheduleTimeChanged,
          );

          setState(() {
            whiteSdk = sdk;
            whiteReplay = replay;
          });
        },
      ),
    );
  }
}

4. 完整示例项目

以下是一个完整的示例项目结构，包含实时房间和回放功能：

import 'package:flutter/material.dart';
import 'package:whiteboard_sdk_flutter_example/white_example_page.dart';
import 'package:whiteboard_sdk_flutter_example/window_test_page.dart';
import 'package:whiteboard_sdk_flutter_example/replay_test_page.dart';
import 'package:whiteboard_sdk_flutter_example/room_test_page.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Whiteboard',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'White Example'),
    );
  }
}

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

  final String title;

  [@override](/user/override)
  MyHomePageState createState() => MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SizedBox(
                width: 200,
                height: 50,
                child: ElevatedButton(
                  onPressed: () => _pushPage(context, allPages[0]),
                  child: Text("Room"),
                )),
            SizedBox(height: 40),
            SizedBox(
                width: 200,
                height: 50,
                child: ElevatedButton(
                  onPressed: () => _pushPage(context, allPages[1]),
                  child: Text("Replay"),
                )),
            SizedBox(height: 40),
            SizedBox(
                width: 200,
                height: 50,
                child: ElevatedButton(
                  onPressed: () => _pushPage(context, allPages[2]),
                  child: Text("Window"),
                )),
          ],
        ),
      ),
    );
  }

  void _pushPage(BuildContext context, WhiteExamplePage page) {
    Navigator.of(context).push(MaterialPageRoute<void>(
        builder: (_) => Scaffold(
              appBar: AppBar(title: Text(page.title)),
              body: page,
            )));
  }
}

final List<WhiteExamplePage> allPages = <WhiteExamplePage>[
  RoomTestPage(),
  ReplayTestPage(),
  WindowTestPage(),
];