Flutter聊天界面UI插件sendbird_uikit的使用

Flutter聊天界面UI插件sendbird_uikit的使用

Sendbird UIKit for Flutter 是一组预构建的UI组件，使您能够轻松地在应用程序中创建一个包含所有基本消息功能的内置聊天。我们的开发套件包括浅色和深色主题、字体、颜色等。您可以自定义这些组件以创建独特的交互式消息界面。

Sendbird UIKit 目前仅支持群聊。请按照以下指南从头开始发送消息。

需求

Sendbird UIKit for Flutter 的最低要求为：

• Dart 3.3.0 或更高版本
• Flutter 3.19.0 或更高版本

注意：为了支持苹果隐私声明，将 ios/Resources/PrivacyInfo.xcprivacy 文件的内容添加到项目的 PrivacyInfo.xcprivacy 中。

开始使用

您可以通过安装 Sendbird UIKit 来开始在应用程序中构建消息体验。

注意：最快的方法是从 样本仓库 使用示例应用。

步骤1：从仪表板创建Sendbird应用

您需要在 Sendbird仪表盘 创建一个Sendbird应用。初始化Sendbird UIKit时需要您的应用ID。

注意：每个Sendbird应用可以与单个客户端应用集成。在同一应用内，用户可以在各种平台（移动设备或网页）之间相互交流。

步骤2：创建项目

创建一个新的Flutter项目。

步骤3：安装UIKit

在 pubspec.yaml 文件中添加以下依赖项和字体。

dependencies:
  sendbird_uikit: ^1.0.1
  sendbird_chat_sdk: ^4.2.30

flutter:
  fonts:
    - family: SendbirdIcons
      fonts:
        - asset: packages/sendbird_uikit/fonts/SendbirdIcons.ttf

在项目目录中运行 flutter pub get 命令。

步骤4：初始化UIKit

在使用UIKit之前，必须调用 SendbirdUIKit.init()、SendbirdUIKit.connect() 和 SendbirdUIKit.provider() 方法。

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await SendbirdUIKit.init(appId: 'YOUR_APP_ID');
  await SendbirdUIKit.connect('YOUR_USER_ID');

  runApp(const MyApp());
}

步骤5：应用UIKit屏幕

您可以轻松添加 SBUGroupChannelListScreen、SBUGroupChannelCreateScreen 和 SBUGroupChannelScreen。主要可定制类是 SBUGroupChannelListScreen 和 SBUGroupChannelScreen。

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      builder: (context, child) {
        return SendbirdUIKit.provider(
          child: Navigator(
            onGenerateRoute: (settings) => MaterialPageRoute(
              builder: (context) => child!,
            ),
          ),
        );
      },
      home: const HomeScreen(), // 分离的屏幕部件
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SBUGroupChannelListScreen(
          onCreateButtonClicked: () {
            moveToGroupChannelCreateScreen(context);
          },
          onListItemClicked: (channel) {
            moveToGroupChannelScreen(context, channel.channelUrl);
          },
        ),
      ),
    );
  }

  void moveToGroupChannelCreateScreen(BuildContext context) {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => Scaffold(
          body: SafeArea(
            child: SBUGroupChannelCreateScreen(
              onChannelCreated: (channel) {
                moveToGroupChannelScreen(context, channel.channelUrl);
              },
            ),
          ),
        ),
      ),
    );
  }

  void moveToGroupChannelScreen(BuildContext context, String channelUrl) {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => Scaffold(
          body: SafeArea(
            child: SBUGroupChannelScreen(
              channelUrl: channelUrl,
            ),
          ),
        ),
      ),
    );
  }
}