Flutter UI组件插件spect8_ui的使用

1- 简介

spect8-chat SDK为Flutter提供了强大的扩展功能，使得跨平台应用（包括iOS、Android和Web）能够实现实时消息传递、轮询、商品销售等功能。这些服务具有高可靠性、低延迟和高效能的特点。

spect8_ui :

引言

Spect8 UI 包含一个可定制的UI组件工具包，为你提供所需的精确控制量。你可以创建理想的Flutter聊天体验，包括富文本消息、反应、线程等众多支持。

安装

添加依赖项

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

dependencies:
  spect8_ui: ^1.0.0

下载依赖项

从命令行安装包：

$ flutter pub get

导入包

导入包使用以下命令：

import 'package:spect8_ui/spect8_ui.dart';

使用spect8-ui

要使用spect8-ui显示用户聊天，需要遵循一些步骤。如果你已经认证并且有正确的channelManager，请直接跳到第3步。

1- 添加客户端配置

为了使用该包，必须先配置客户端。在登录前添加以下代码：

final spect8Client = Spect8Client(
    config: ClientConfig(
  authURL: 'some-auth-url',
  coreURL: 'some-core-url',
  webSocketURL: 'some-websockets-url',
));

2- 登录

为了区分聊天中的用户，需要进行身份验证。为此，你需要一个示例用户ID（demoUserId）和租户ID（tenantId）。demoUserId用于识别用户，而tenantId由我们提供。身份验证会给你提供一个tenantManager，我们将在下一步中使用它。

Future<void> main() async {
  TenantManager tenantManager = await spect8Client.connectDemoUser(
      demoUserId: 'some-user-id', tenantId: 'your-tenant-id');
  runApp(MyApp());
}

3- 识别频道

Spect8支持每个租户的多个广播和每个广播的多个频道。因此，每个租户可以有不同的广播，每个广播也可以有不同的频道。选择正确的频道来显示选项卡非常重要。

4- 获取当前用户管理器

获取一个CurrentUserManager实例，用于与当前用户相关的操作。

CurrentUserManager currentUserManager = tenantManager.getCurrentUserManager();

5- 获取广播管理器

获取一个BroadcastManager实例，用于与特定广播相关的操作。

BroadcastManager broadcastManager = tenantManager.getBroadcastManager(
    broadcastId: 'id-of-a-broadcast');

6- Spect8chat作为小部件

下面是一个使用Spect8Chat组件的示例：

class Chatview extends StatelessWidget {
  const Chatview({
    Key key,
  }) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Expanded(
            child: Spect8Chat(
              currentUserManager: tenantManager.getCurrentUserManager(),
              broadcastManager: tenantManager.getBroadcastManager(
                  broadcastId: 'some-broadcast-id'),
            ),
          ),
        ],
      ),
    );
  }
}

示例代码

import 'package:flutter/material.dart';
import 'package:spect8_ui/spect8_ui.dart';
import 'package:spect8_ui/ui_components/spect8_chat.dart';
import 'package:username_gen/username_gen.dart';

// 示例租户ID
String adminTenantId = "some-admin-tenant-id";
final userId = UsernameGen().generate();

/// 客户端配置

final spect8Client = Spect8Client(
    config: ClientConfig(
  authURL: 'some-auth-url',
  coreURL: 'some-core-url',
  webSocketURL: 'some-websockets-url',
));

late TenantManager tenantManager;

/// 认证演示用户

Future<void> main() async {
  tenantManager = await spect8Client.connectDemoUser(
    demoUserId: 'some-user-id',
    tenantId: 'some-tenant-id',
  );

  runApp(
    Spect8UiExample(),
  );
}

class Spect8UiExample extends StatefulWidget {
  Spect8UiExample();

  [@override](/user/override)
  State<Spect8UiExample> createState() => _Spect8UiExampleState();
}

class _Spect8UiExampleState extends State<Spect8UiExample> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(brightness: Brightness.light),
      home: Scaffold(
        body: Spect8Chat(
          currentUserManager: tenantManager.getCurrentUserManager(),
          broadcastManager: tenantManager.getBroadcastManager(
              broadcastId: 'some-broadcast-id'),
        ),
      ),
    );
  }
}