Flutter快速面板控制插件fastboard_flutter的使用

Flutter快速面板控制插件fastboard_flutter的使用

快速入门

Agora Fastboard SDK 是由 Agora 推出的一款用于帮助开发者快速构建白板应用程序的新一代白板 SDK。它简化了白板 SDK 的 API 并添加了 UI 实现。这些改进使你只需几行代码即可加入房间，并立即体验使用各种丰富的编辑工具进行实时互动协作。

主要特性包括：

• 低成本
• 针对场景优化
• 可配置性

前提条件

在开始之前，请确保满足以下条件：

• 一个有效的 Agora 账户
• 启用了互动白板功能的 Agora 项目。从 Agora 控制台获取应用标识符和 SDK 令牌。 请参阅 启用和配置互动白板

开始使用

在你的 Flutter 项目中添加依赖项：

dependencies:
  fastboard_flutter: ^0.1.2

使用说明

你可以通过克隆此仓库并运行示例来开始使用。主要的示例代码位于 quick_start.dart 和 custom_layout.dart。

使用 FastRoomView

首先，在你的 Flutter 项目中嵌入 FastRoomView 组件。

[@override](/user/override)
Widget build(BuildContext context) {
  return FastRoomView(
    fastRoomOptions: FastRoomOptions(
      appId: APP_ID,
      uuid: ROOM_UUID,
      token: ROOM_TOKEN,
      uid: UNIQUE_CLIENT_ID,
      writable: true,
      fastRegion: FastRegion.cn_hz,
    ),
  );
}

切换暗模式

Fastboard 提供了一套内置的暗模式配置，你可以通过配置 FastRoomView.useDarkTheme 来切换暗模式和亮模式。

[@override](/user/override)
Widget build(BuildContext context) {
  return FastRoomView(
    fastRoomOptions: FastRoomOptions(
      appId: APP_ID,
      uuid: ROOM_UUID,
      token: ROOM_TOKEN,
      uid: UNIQUE_CLIENT_ID,
      writable: true,
      fastRegion: FastRegion.cn_hz,
    ),
    useDarkTheme: true,
  );
}

你也可以通过 FastRoomView.theme 和 FastRoomView.darkTheme 来更改内置控件的颜色。

[@override](/user/override)
Widget build(BuildContext context) {
  return FastRoomView(
    fastRoomOptions: FastRoomOptions(
      appId: APP_ID,
      uuid: ROOM_UUID,
      token: ROOM_TOKEN,
      uid: UNIQUE_CLIENT_ID,
      writable: true,
      fastRegion: FastRegion.cn_hz,
    ),
    theme: FastThemeData.light().copyWith(mainColor: Color(0xFF00BCD4)),
    darkTheme: FastThemeData.dark().copyWith(mainColor: Color(0xFF0097A7)),
    useDarkTheme: true,
  );
}

自定义布局

你可以隐藏或显示内置组件，或者自定义组件的布局。

[@override](/user/override)
Widget build(BuildContext context) {
  return FastRoomView(
    fastRoomOptions: FastRoomOptions(
      appId: APP_ID,
      uuid: ROOM_UUID,
      token: ROOM_TOKEN,
      uid: UNIQUE_CLIENT_ID,
      writable: true,
      fastRegion: FastRegion.cn_hz,
    ),
    builder: customBuilder,
  );
}

Widget customBuilder(BuildContext context, FastRoomController controller) {
  return Stack(
    alignment: Alignment.center,
    children: [
      FastOverlayHandlerView(controller),
      Positioned(
        child: FastPageIndicator(controller),
        bottom: FastGap.gap_3,
        right: FastGap.gap_3,
      ),
      FastToolBoxExpand(controller),
      FastStateHandlerView(controller),
    ],
  );
}

配置工具箱项

你可以通过 FastUiSettings.toolboxItems 来配置工具箱中的工具。

void main() {
  FastUiSettings.toolboxItems = [
    ToolboxItem(appliances: [FastAppliance.clicker]),
    ToolboxItem(appliances: [FastAppliance.selector]),
    ToolboxItem(appliances: [FastAppliance.pencil]),
    ToolboxItem(appliances: [FastAppliance.eraser]),
    ToolboxItem(appliances: [
      FastAppliance.rectangle,
      FastAppliance.ellipse,
      FastAppliance.straight,
      FastAppliance.arrow,
      FastAppliance.pentagram,
      FastAppliance.rhombus,
      FastAppliance.triangle,
      FastAppliance.balloon,
    ]),
    
    // 移除清除工具
    // ToolboxItem(appliances: [FastAppliance.clear]),
  ];
  runApp(const MyApp());
}

示例代码

以下是完整的示例代码：

import 'package:flutter/material.dart';

import 'custom_layout.dart';
import 'page.dart';
import 'quick_start.dart';

final List<FastExamplePage> _allPages = [
  const QuickStartPage(),
  const CustomLayoutPage(),
];

void main() {
  const bool isProduction = bool.fromEnvironment('dart.vm.product');
  if (isProduction) {
    debugPrint = (String? message, {int? wrapWidth}) => null;
  }
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: const Text('FFastboard'),
          ),
          body: ListView.builder(
            itemCount: _allPages.length,
            itemBuilder: (appContext, index) => ListTile(
              leading: _allPages[index].leading,
              title: Text(_allPages[index].title),
              onTap: () => _pushPage(appContext, _allPages[index]),
            ),
          )
          // body: _allPages[0],
          ),
    );
  }

  void _pushPage(BuildContext context, FastExamplePage page) {
    Navigator.of(context).push(MaterialPageRoute<void>(
        builder: (_) => Scaffold(
              body: page,
              // 防止键盘出现时调整大小
              resizeToAvoidBottomInset: false,
            )));
  }
}