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

简介

CometChat Chat UIKit 提供了一套预构建的用户界面组件，开发者可以快速将其集成到现有的或新的应用中，以实现可靠且功能齐全的聊天体验。

前提条件

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

入门指南

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

1. 注册并创建应用：

   • 访问 CometChat Dashboard 注册一个账户。
   • 登录后，创建一个新的应用。创建后，CometChat 会生成一个 Auth Key 和 App ID。请妥善保管这些凭证，因为后续需要使用它们。

2. 了解基本概念：

   • 查看 关键概念 以理解 CometChat 的基本组件。

3. 集成到 Flutter 应用：

   • 参考 集成步骤 文档，将 CometChat 集成到你的 Flutter 应用中。

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 CometChat Chat UIKit。

example/example.dart

import 'package:flutter/material.dart';
import 'package:cometchat_chat_uikit/cometchat_chat_uikit.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
  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
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final String appId = "YOUR_APP_ID"; // Replace with your app id
  static const String authKey = "YOUR_AUTH_KEY"; // Replace with your auth key
  static const String region = "YOUR_REGION"; // Replace with your Region code

  bool isLoading = true;

  @override
  void initState() {
    super.initState();

    initializeCometChat();
  }

  initializeCometChat() async {
    // CometChat SDK should be initialized at the start of application. No need to initialize it again
    UIKitSettings uiKitSettings = (UIKitSettingsBuilder()
          ..subscriptionType = CometChatSubscriptionType.allUsers
          ..region = region
          ..autoEstablishSocketConnection = true
          ..appId = appId
          ..authKey = authKey
          ..extensions = CometChatUIKitChatExtensions.getDefaultExtensions()
          ..aiFeature = CometChatUIKitChatAIFeatures.getDefaultAiFeatures())
        .build();

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

  login() async {
    String userId = "superhero1";
    await CometChatUIKit.login(userId, onSuccess: (User loggedInUser) {
      debugPrint("Login Successful : $loggedInUser");
      Navigator.push(
          context,
          MaterialPageRoute(
              builder: (context) => const CometChatConversationsWithMessages()));
    }, onError: (CometChatException e) {
      debugPrint("Login failed with exception: ${e.message}");
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: isLoading ? const CircularProgressIndicator() : const Text("Logged In"),
      ),
    );
  }
}

说明

1. 初始化 CometChat：

   • 在 initializeCometChat 方法中，使用 UIKitSettingsBuilder 构建 UIKitSettings 对象，并调用 CometChatUIKit.init 方法初始化 CometChat。

2. 登录用户：

   • 在 login 方法中，调用 CometChatUIKit.login 方法登录用户。登录成功后，导航到聊天界面。

3. 显示加载指示器：

   • 在 build 方法中，根据 isLoading 的值显示加载指示器或登录成功的提示。

帮助和支持

如果在运行项目或集成 UI Kit 时遇到问题，请参考 文档 或创建 支持工单，或通过 CometChat Dashboard 获取实时支持。