Flutter即时通讯插件apptex_chat的使用

Flutter即时通讯插件apptex_chat的使用

本包是实现Flutter应用程序中实时聊天功能的强大且多功能的解决方案。基于Firebase Firestore和Firebase Cloud构建，此插件提供了一个独特的预设计聊天系统，具有诸如推送通知和可定制的主题等特性。

平台测试结果

主要特性

• 易于使用：该插件提供了一个简单直接的实现过程，使你能够无缝地将聊天功能集成到你的应用中。
• 直接集成：Firebase Firestore和Firebase Cloud直接集成，确保用户之间的通信可靠高效。
• 预构建UI：该插件附带了聊天屏幕的预构建用户界面，无需进行大量的设计工作。
• 通过单个函数启动聊天：只需调用一个函数即可发起聊天，使用户能够快速连接和沟通。
• 可定制主题：可以自定义主页和聊天屏幕的主题以匹配你的应用的设计和品牌。

相册

安装

要开始使用，请在pubspec.yaml文件中添加以下依赖项：

dependencies:
  apptex_chat: ^2.0.0

然后运行flutter pub get来安装插件。

使用

步骤 1：Firebase配置

1. 在项目中安装Firebase。
2. 从Firebase下载google-services.json和GoogleService-Info.plist文件。
3. 在主函数中初始化Firebase。

步骤 2：用户认证

为了启用聊天功能，你需要对用户进行身份验证。当用户注册或登录时，你可以通过initChat方法将他们的信息传递给AppTexChat。

// 这里你可以设置当前用户到Apptex聊天
AppTexChat.instance.initChat(
  currentUser: ChatUserModel(
    uid: "{uid}",
    profileUrl: "{Profile url}",
    name: "{Currect User Name}",
    fcmToken: "{Fcm Token}", // 如果没有fcm token，请传递空字符串
  ),
);

将当前用户名、uid、头像URL和fcm token替换为用户的相应值。

步骤 3：启动聊天

要与另一个用户开始聊天，调用startNewConversationWith函数：

// 这里你需要传递另一个用户的详细信息
AppTexChat.instance.startNewConversationWith(
  ChatUserModel(
    uid: "其他用户uid",
    profileUrl: '其他用户头像',
    name: '其他用户名',
    fcmToken: '其他用户fcm token',
  ),
);

在收件箱屏幕上显示对话

要查看所有对话列表，可以使用ConversationsScreen小部件。它有一个builder参数，可以根据你的应用设计来列出对话。

// 示例
ConversationsScreen(
  builder: (conversations, isLoading) => ListView.separated(
    separatorBuilder: (context, index) => SizedBox(height: 20),
    shrinkWrap: true,
    padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
    itemCount: conversations.length,
    itemBuilder: (context, index) => Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.5),
            spreadRadius: 1,
            blurRadius: 2,
            offset: Offset(0, 1),
          )
        ],
      ),
      padding: EdgeInsets.all(10),
      child: ListTile(
        onTap: () {
          // TODO: 导航到聊天屏幕
        },
        leading: CircleAvatar(
          backgroundImage:
              NetworkImage(conversations[index].otherUser.profileUrl ?? ''),
        ),
        title: Text(conversations[index].otherUser.name),
        subtitle: Text(conversations[index].lastMessage),
        trailing: Container(
          padding: EdgeInsets.all(5),
          decoration: BoxDecoration(
            color: Colors.blue,
            shape: BoxShape.circle,
          ),
          child: Text(
            conversations[index].unreadMessageCount.toString(),
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    ),
  ),
);

显示特定对话的消息

要查看特定对话的消息，可以使用ChatScreen小部件。它有一个必需的appBarBuilder和一个可选的bubbleBuilder参数，这使你能够根据你的应用设计创建自定义的appbar和聊天气泡。

ChatScreen(
  conversationModel: conversationModel, 
  showMicButton: false, // 默认为true，如果你不想使用语音消息则设为false
  appBarBuilder: ((currentUser, otherUser) => AppBar()), // 构建器用于创建自定义AppBar
);

功能状态

• 聊天 ✅
• 语音消息 ✅
• 图片 ✅
• 表情符号 ✅
• 视频 🚫
• 文档 🚫
• 位置 🚫

其他信息

更多即将推出的功能：

• 推送通知
• 为Web平台支持

使用的框架

• Firebase Firestore
• Firebase Cloud存储

贡献者

维护帮助

示例代码

// 忽略对公共成员API文档的检查，忽略构造函数排序
// 忽略不可变性

import 'package:example/firebase_options.dart';
import 'package:example/login.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
  runApp(const MyApp());
}

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

  // 此小部件是您的应用的根组件。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Apptex Chat Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Login(),
    );
  }
}