Flutter聊天支持插件flutter_support_chat的使用

Flutter聊天支持插件flutter_support_chat的使用

flutter_support_chat 是一个用于在Flutter应用程序中实现客户与产品支持之间基于Firestore的聊天功能的插件。通过该插件，您可以轻松地集成聊天界面，并管理客户与支持人员之间的对话。

1. 插件安装

首先，在 pubspec.yaml 文件中添加 flutter_support_chat 依赖：

dependencies:
  flutter_support_chat: ^最新版本号
  firebase_core: 最新版本号
  cloud_firestore: 最新版本号
  firebase_auth: 最新版本号

然后运行 flutter pub get 来安装依赖。

2. 初始化 Firebase

确保您已经在项目中集成了 Firebase。在 main.dart 文件中初始化 Firebase：

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

3. 使用 FlutterSupportChat 组件

FlutterSupportChat 是该插件的主要组件，用于显示聊天界面。以下是完整的示例代码，展示了如何在应用中使用 FlutterSupportChat：

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_support_chat/flutter_support_chat.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

import 'login.dart'; // 假设您有一个登录页面

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: const [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      debugShowCheckedModeBanner: false,
      title: 'flutter_support_chat example',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("flutter_support_chat example"),
      ),
      body: StreamBuilder<User?>(
        stream: FirebaseAuth.instance.authStateChanges(), // 监听用户认证状态的变化
        builder: (BuildContext context, AsyncSnapshot<User?> snapshot) {
          if (snapshot.connectionState == ConnectionState.active) {
            if (snapshot.hasData) {
              final User user = snapshot.data!;
              return StreamBuilder<User?>(
                stream: FirebaseAuth.instance.userChanges(), // 监听用户的实时变化
                builder: (BuildContext context, AsyncSnapshot<User?> userSnapshot) {
                  if (userSnapshot.connectionState == ConnectionState.active) {
                    if (userSnapshot.hasData) {
                      return FlutterSupportChat(
                        supporterIDs: [
                          'cedtegapps.de@gmail.com', // 支持人员的ID（可以是邮箱或其他唯一标识符）
                        ],
                        currentID: user.email!, // 当前用户的ID
                        firestoreInstance: FirebaseFirestore.instance, // Firestore实例
                        onNewCaseText: 'New Support Case', // 新建支持案例的文本提示
                        createCaseButtonText: "Create Support Case", // 创建支持案例按钮的文本
                        writeMessageText: "Write a Message", // 写消息的占位符文本
                        closeCaseText: "Do you really want to close this case?", // 关闭案例时的确认提示
                        onNewCaseCreated: () {}, // 新建案例时的回调函数
                        onNewMessageCreated: () {}, // 新建消息时的回调函数
                      );
                    }
                  }
                  return Center(child: CircularProgressIndicator()); // 加载中的指示器
                },
              );
            } else {
              return Login(); // 如果没有登录，跳转到登录页面
            }
          }
          return Center(child: CircularProgressIndicator()); // 加载中的指示器
        },
      ),
    );
  }
}

4. 参数说明

• supporterIDs: 支持人员的ID列表，通常可以是他们的邮箱地址或其他唯一标识符。
• currentID: 当前用户的ID，通常是用户的邮箱或UID。
• firestoreInstance: Firestore的实例，用于存储和读取聊天数据。
• onNewCaseText: 当创建新的支持案例时显示的文本提示。
• createCaseButtonText: 创建支持案例按钮的文本。
• writeMessageText: 写消息时的占位符文本。
• closeCaseText: 关闭支持案例时的确认提示文本。
• onNewCaseCreated: 当新的支持案例创建时触发的回调函数。
• onNewMessageCreated: 当新的消息创建时触发的回调函数。

5. 登录页面

在上面的代码中，如果用户未登录，会跳转到 Login 页面。您可以根据自己的需求实现登录功能，例如使用 FirebaseAuth 进行邮箱/密码登录、Google登录等。

// login.dart
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';

class Login extends StatelessWidget {
  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Login'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _emailController,
              decoration: InputDecoration(labelText: 'Email'),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                try {
                  await FirebaseAuth.instance.signInWithEmailAndPassword(
                    email: _emailController.text,
                    password: _passwordController.text,
                  );
                  Navigator.of(context).pop(); // 登录成功后返回上一页
                } catch (e) {
                  print(e);
                }
              },
              child: Text('Login'),
            ),
          ],
        ),
      ),
    );
  }
}