Flutter房间管理UI插件roomkit_flutter_ui的使用

ZEGO roomkit_flutter_ui Flutter SDK 是基于 RoomKit SDK(适用于 iOS 和 Android)的 Flutter 插件包装器,提供 Roomkit SDK 的服务。

了解更多解决方案: ZEGO官网

1️⃣ 下载并安装 Flutter

Flutter 入门指南

Flutter 官方文档

2️⃣ 配置开发环境

  • Android Studio: 在 Preferences -> Plugins 中搜索并下载 Flutter 插件,并在插件设置中配置 Flutter SDK 路径。
  • VS Code: 在应用商店中搜索并下载 Flutter 扩展。

完成任何一种开发环境的 Flutter 配置后,在命令行中执行 flutter doctor,根据提示完成相关未下载的依赖项。

3️⃣ 申请 ZEGO AppID

登录 ZEGO官方平台 注册账户,根据实际业务需求选择合适的场景,获取用于初始化 SDK 的 AppID 和 App Sign。

4️⃣ 导入 roomkit_flutter_ui

在项目中的 pubspec.yaml 文件中添加 roomkit_flutter_ui 依赖:

依赖于 pub(推荐)

dependencies:
  flutter:
    sdk: flutter

  roomkit_flutter_ui: ^0.0.5

保存文件后,执行 flutter pub get

5️⃣ API 文档

RoomkitFlutterUi API 参考


完整示例代码

以下是一个完整的示例代码,展示如何使用 roomkit_flutter_ui 插件。

示例代码:main.dart

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:roomkit_flutter_ui/roomkit_flutter_ui.dart'; // 导入 roomkit_flutter_ui
import 'package:roomkit_flutter_ui_example/page/home/home_page.dart'; // 自定义页面
import 'package:roomkit_flutter_ui_example/page/next_page.dart'; // 自定义页面
import 'package:roomkit_flutter_ui_example/tools/room_manager.dart'; // 房间管理工具
import 'package:roomkit_flutter_ui_example/uitils/app_navigator_observer.dart'; // 导航观察者
import 'package:roomkit_flutter_ui_example/uitils/zego_auth_constants.dart'; // ZEGO 鉴权常量
import 'generated/l10n.dart'; // 国际化支持

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized(); // 初始化 Flutter 框架
  await _setUpInit(); // 设置初始化
  SystemUiOverlayStyle dark = const SystemUiOverlayStyle(
    systemNavigationBarColor: Color(0xFF000000), // 设置导航栏颜色
    systemNavigationBarDividerColor: null,
    statusBarColor: Colors.transparent,
    systemNavigationBarIconBrightness: Brightness.light,
    statusBarIconBrightness: Brightness.dark,
    statusBarBrightness: Brightness.light,
  );
  SystemChrome.setSystemUIOverlayStyle(dark); // 设置系统 UI 样式
  runApp(const MyApp()); // 启动应用
}

// 初始化 RoomkitFlutterUi 和事件监听
Future _setUpInit() async {
  RoomkitFlutterUi.init(ZegoAuthConstants.kSecretID); // 初始化 SDK
  RoomkitFlutterUi.setInRoomEventListener(); // 设置房间内事件监听
}

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)
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: { // 定义路由
        '/home_page': (context) => const HomePage(), // 主页
      },
      navigatorObservers: [ // 添加导航观察者
        navigatorObserver,
      ],
      localizationsDelegates: const [ // 支持国际化
        GlobalWidgetsLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        S.delegate,
      ],
      supportedLocales: S.delegate.supportedLocales,
      debugShowCheckedModeBanner: false, // 禁用调试横幅
      home: const Scaffold( // 主界面
        backgroundColor: Colors.white,
        body: IndexPage(), // 首页
      ),
    );
  }
}

更多关于Flutter房间管理UI插件roomkit_flutter_ui的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter房间管理UI插件roomkit_flutter_ui的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


roomkit_flutter_ui 是一个用于构建房间管理界面的 Flutter 插件。它提供了一套预定义的 UI 组件,帮助开发者快速实现房间管理功能,如创建房间、加入房间、显示房间列表等。

安装

首先,你需要在 pubspec.yaml 文件中添加 roomkit_flutter_ui 依赖:

dependencies:
  flutter:
    sdk: flutter
  roomkit_flutter_ui: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

基本使用

1. 导入包

import 'package:roomkit_flutter_ui/roomkit_flutter_ui.dart';

2. 创建房间

RoomKitFlutterUI.createRoom(
  roomName: 'My Room',
  onRoomCreated: (roomId) {
    print('Room created with ID: $roomId');
  },
  onError: (error) {
    print('Error creating room: $error');
  },
);

3. 加入房间

RoomKitFlutterUI.joinRoom(
  roomId: '12345',
  onJoined: () {
    print('Successfully joined the room');
  },
  onError: (error) {
    print('Error joining room: $error');
  },
);

4. 显示房间列表

RoomKitFlutterUI.showRoomList(
  onRoomSelected: (roomId) {
    print('Selected room ID: $roomId');
  },
  onError: (error) {
    print('Error fetching room list: $error');
  },
);

自定义 UI

roomkit_flutter_ui 也允许你自定义 UI 组件的外观和行为。你可以通过传递自定义的 ThemeDataWidget 来实现。

自定义主题

RoomKitFlutterUI.setTheme(
  theme: ThemeData(
    primaryColor: Colors.blue,
    accentColor: Colors.green,
  ),
);

自定义房间列表项

RoomKitFlutterUI.setRoomListItemBuilder(
  builder: (context, room) {
    return ListTile(
      title: Text(room.name),
      subtitle: Text('ID: ${room.id}'),
      onTap: () {
        // Handle room selection
      },
    );
  },
);

高级功能

roomkit_flutter_ui 还提供了一些高级功能,如房间权限管理、房间成员管理、消息发送等。你可以通过查阅官方文档来了解更多细节。

示例

以下是一个完整的示例,展示了如何使用 roomkit_flutter_ui 创建和加入房间:

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('RoomKit Flutter UI Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {
                  RoomKitFlutterUI.createRoom(
                    roomName: 'My Room',
                    onRoomCreated: (roomId) {
                      print('Room created with ID: $roomId');
                    },
                    onError: (error) {
                      print('Error creating room: $error');
                    },
                  );
                },
                child: Text('Create Room'),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  RoomKitFlutterUI.joinRoom(
                    roomId: '12345',
                    onJoined: () {
                      print('Successfully joined the room');
                    },
                    onError: (error) {
                      print('Error joining room: $error');
                    },
                  );
                },
                child: Text('Join Room'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
回到顶部