Flutter聊天界面UI组件插件cometchat_uikit_shared的使用

Flutter聊天界面UI组件插件cometchat_uikit_shared的使用

插件介绍

CometChat Flutter UIKit Shared Package 是两个强大 UI Kit 的基础：CometChat Chat UIKit 和 CometChat Calls UIKit。该包提供的资源和小部件的模块化设计确保了代码的高效重用和应用程序中一致的样式。

前置条件

• Flutter >= 3.10.5
• Dart >= 3.0.5
• Android Studio 2022.2
• Android 5.0, API 21 及以上
• Xcode 15
• iOS 12.0

注意事项

此包由 CometChat UI Kits 内部使用。不建议在没有其他必要的 CometChat 依赖项的情况下单独使用此包。

入门指南

要设置 CometChat 的 Flutter UIKit 并利用 CometChat 的聊天和通话功能，您需要按照以下步骤操作：

1. 注册 CometChat 账户：访问 CometChat Dashboard 创建一个账户。
2. 创建应用：登录后，创建一个新的应用。创建后，CometChat 将生成一个 Auth Key 和 App ID。请妥善保管这些凭据，稍后会用到。
3. 了解关键概念：查阅 CometChat 的关键概念文档，以了解其基本组件。
4. 集成步骤：参考集成步骤文档，将 CometChat 集成到您的 Flutter 应用中。

帮助与支持

如果您在运行项目或集成 UI Kits 时遇到问题，请查阅我们的文档或创建支持工单，或者通过 CometChat Dashboard 获取实时支持。

完整示例 Demo

以下是使用 cometchat_uikit_shared 插件的完整示例代码。请根据您的实际情况替换 appId、authKey 和 region。

import 'package:cometchat_uikit_shared/cometchat_uikit_shared.dart';
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

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

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

  // This widget is the root of your application.
  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      localizationsDelegates: [
        Translations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate
      ],
      supportedLocales: [
        Locale('en', ''),
        Locale('hi', ''),
        Locale('ar', ''),
        Locale('de', ''),
        Locale('es', ''),
        Locale('fr', ''),
        Locale('ms', ''),
        Locale('pt', ''),
        Locale('ru', ''),
        Locale('sv', ''),
        Locale('zh', ''),
      ],
      title: 'Flutter Demo',
      home: Home(),
    );
  }
}

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

  [@override](/user/override)
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final String appId = "YOUR_APP_ID"; // 替换为您的 App ID
  static const String authKey = "YOUR_AUTH_KEY"; // 替换为您的 Auth Key
  static const String region = "YOUR_REGION"; // 替换为您的 Region 代码

  bool isLoading = true;

  [@override](/user/override)
  void initState() {
    super.initState();
    initializeCometChat();
  }

  initializeCometChat() async {
    // 初始化 CometChat SDK，无需再次初始化
    UIKitSettings uiKitSettings = (UIKitSettingsBuilder()
          ..subscriptionType = CometChatSubscriptionType.allUsers
          ..region = region
          ..autoEstablishSocketConnection = true
          ..appId = appId
          ..authKey = authKey)
        .build();

    CometChatUIKit.init(
        uiKitSettings: uiKitSettings,
        onSuccess: (String successMessage) {
          login();
        },
        onError: (CometChatException excep) {
          debugPrint("Initialization failed with exception: ${excep.message}");
        });
  }

  login() async {
    String userId = "superhero2"; // 替换为实际用户 ID
    await CometChatUIKit.login(userId, onSuccess: (User loggedInUser) {
      debugPrint("Login Successful : $loggedInUser");
      setState(() {
        isLoading = false;
      });
    }, onError: (CometChatException e) {
      debugPrint("Login failed with exception: ${e.message}");
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    if (isLoading) {
      return const Scaffold(
        body: Center(
          child: CircularProgressIndicator(),
        ),
      );
    } else {
      return const Scaffold(
        body: Center(
          child: Text("Login Successful"),
        ),
      );
    }
  }
}