Flutter实时聊天功能插件chat_supabase的使用

chat_supabase 是一个强大的、易于使用的 Flutter 聊天插件，它利用 Supabase 实现实时消息传递和数据存储。通过此插件，开发者可以轻松地为 Flutter 应用程序集成聊天功能，包括用户资料创建和消息流。

功能

快速且无缝地为您的 Flutter 应用程序添加聊天功能只需几行代码：

• 实时消息传递：支持实时发送和接收消息。
• 用户资料创建：可以为用户设置用户名和头像以方便识别。
• 聊天频道：通过频道标识符创建群聊。
• 消息分组：自动按日期对消息进行分组，提升可读性。
• 自定义UI：支持自定义消息气泡、用户头像和时间戳。
• Supabase 集成：使用 Supabase 的实时数据库功能实现流畅的数据处理。

开始使用

初始化

在应用程序的主方法中调用 initializeChatSupabase() 方法来初始化插件。

void main() async {
  // 初始化 Supabase
  await initializeChatSupabase();
  runApp(const MyApp());
}

创建用户资料

建议在注册时创建用户资料，通过调用 createChatUserProfile() 方法实现。传入用户名、用户图像以及用户的唯一标识符。

final uid = FirebaseAuth.instance.currentUser!.uid;
await createChatUserProfile(
  userIdentifier: uid,
  username: _username!,
  selectedImage: _selectedImage!,
);

导航到聊天屏幕

导航到 ChatScreen() 小部件，并传入频道名称和用户的唯一标识符。

FloatingActionButton(
  backgroundColor: AppColors.appDark,
  onPressed: () {
    openScreen(
      context,
      ChatScreen(
        channelName: 'mojito',
        userIdentifier: FirebaseAuth.instance.currentUser!.uid,
      ),
    );
  },
  child: const Icon(
    Icons.chat_rounded,
    color: AppColors.appGreen,
  ),
),

使用示例

以下是一个完整的示例代码，展示了如何使用 chat_supabase 插件实现聊天功能。

import 'dart:log';
import 'dart:io';
import 'package:chat_supabase/chat_supabase.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:visibly/services/auth_service.dart';
import 'package:visibly/widgets/user_image_picker.dart';
import '../utils/common_functions.dart';
import '../utils/constants.dart';
import '../utils/navigation_utils.dart';
import '../widgets/common_button.dart';
import '../widgets/common_text_field.dart';
import 'home_screen.dart';

void main() async {
  // 初始化 Supabase
  await initializeChatSupabase();
  runApp(const MyApp());
}

class SignupScreen extends StatefulWidget {
  const SignupScreen({super.key});

  @override
  State<SignupScreen> createState() => _SignupScreenState();
}

class _SignupScreenState extends State<SignupScreen> {
  bool _isLoading = false;
  final _formKey = GlobalKey<FormState>();
  File? _selectedImage;
  String? _email;
  String? _password;
  String? _username;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: AppColors.appDark,
        body: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20),
          child: Form(
            key: _formKey,
            child: SingleChildScrollView(
              child: Column(
                children: [
                  UserImagePicker(onPickImage: (pickedImage) {
                    _selectedImage = pickedImage;
                  }),
                  SizedBox(height: screenHeight(context) * .06),
                  CommonTextField(
                    validator: (val) => validateUserName(val),
                    hintText: 'Username',
                    onChanged: (value) {
                      _username = value;
                    },
                  ),
                  SizedBox(height: screenHeight(context) * .06),
                  _isLoading
                      ? const CommonButton(label: 'Loading...')
                      : GestureDetector(
                          onTap: () async {
                            if (_selectedImage == null) {
                              showToast('Please pick an image');
                            } else if (_formKey.currentState!.validate()) {
                              setState(() {
                                _isLoading = true;
                              });

                              // 用户注册逻辑
                              await AuthService.signUp(
                                password: _password!,
                                email: _email!,
                                context: context,
                              );

                              final uid = FirebaseAuth.instance.currentUser!.uid;
                              await createChatUserProfile(
                                userIdentifier: uid,
                                username: _username!,
                                selectedImage: _selectedImage!,
                              );

                              setState(() {
                                _isLoading = false;
                              });

                              Future.delayed(const Duration(seconds: 1));
                              if (mounted) {
                                openReplaceScreen(context, const HomeScreen());
                              }
                            } else {
                              log('Form is not valid');
                            }
                          },
                          child: const CommonButton(label: 'Sign up'),
                        ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        floatingActionButton: FloatingActionButton(
          backgroundColor: AppColors.appDark,
          onPressed: () {
            openScreen(
              context,
              ChatScreen(
                channelName: 'mojito',
                userIdentifier: FirebaseAuth.instance.currentUser!.uid,
              ),
            );
          },
          child: const Icon(
            Icons.chat_rounded,
            color: AppColors.appGreen,
          ),
        ),
        body: Container(),
      ),
    );
  }
}

安装

在项目的 pubspec.yaml 文件中添加 chat_supabase 包：

dependencies:
  chat_supabase: ^x.x.x