Flutter即时通讯插件superchat的使用

Super Chat

• 一个基于实时数据库的高度可扩展且完整的聊天应用程序。
• 这个插件特别为FlutterFlow开发者设计。
  • 如果你正在寻找一个适用于Flutter的包，请查找easychat包。

特性

初始化

在你的FlutterFlow项目中的main.dart文件里调用ChatService.instance.init()方法。

• databaseURL 必须设置为在Web平台上使用的实时数据库。

示例：

import 'package:superchat/superchat.dart';

Future initSuperchat() async {
  ChatService.instance.init(
    /// 提供Web平台的databaseURL
    databaseURL: "https://firebase-database-url.com",
  );
}

自定义组件

使用FF（假设FF是某种工具或框架）。

概述

• 该包使用实时数据库。
  • 它非常
    • 经济实惠
    • 简单
    • 快速

如何使用

聊天室列表自定义设计

组件

ValueListView

使用此组件来列出实时数据库中节点的值。这可以处理大多数情况下列出节点值的情况。

• 如果不调用fetchMore(index)，它将只获取数据的第一页。
• 如果只想显示最新或最旧的第一页，则无需调用fetchMore。
• 在此示例中，它使用PageView来列出数据。你可以使用ListView、GridView、CarouselView，或者甚至是Column、Row等。

示例：

ValueListView(
  query: FirebaseDatabase.instance.ref('/tmp'),
  pageSize: 3,
  builder: (snapshot, fetchMore) {
    return PageView.builder(
      itemCount: snapshot.docs.length,
      itemBuilder: (context, index) {
        print('index: $index');
        fetchMore(index);
        return ListTile(
          contentPadding: const EdgeInsets.all(64),
          title: Text(snapshot.docs[index].key!),
        );
      },
    );
  },
  errorBuilder: (s) => Text('Error: $s'),
  loadingBuilder: () => const CircularProgressIndicator(),
  emptyBuilder: () => const Text('Empty'),
),

反向查询示例

ValueListView(
  query: FirebaseDatabase.instance.ref('/tmp'),
  pageSize: 3,
  reverseQuery: true,
  builder: (snapshot, fetchMore) {
    return ListView.builder(
      itemCount: snapshot.docs.length,
      itemBuilder: (context, index) {
        print('index: $index');
        fetchMore(index);
        return ListTile(
          contentPadding: const EdgeInsets.all(64),
          title: Text(snapshot.docs[index].key!),
        );
      },
    );
  },
  errorBuilder: (s) => Text('Error: $s'),
  loadingBuilder: () => const CircularProgressIndicator(),
  emptyBuilder: () => const Text('Empty'),
),

UserService

初始化

当ChatService初始化时，UserService会自动将用户数据镜像到实时数据库。

ChatService.instance.init(
  userCollectionName: 'users',
  userPrivateFields: ['email', 'name'],
);

• userPrivateFields 是那些不对外公开的字段。这些字段在镜像用户数据到实时数据库时会被排除在外。

完整示例Demo

以下是一个完整的示例代码，展示了如何初始化和使用superchat插件。

import 'package:example/firebase_options.dart';
import 'package:example/screens/chat/chat_room.list.screen.dart';
import 'package:example/screens/user/profile.screen.dart';
import 'package:example/screens/user/sign_in.screen.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:superchat/superchat.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);

  /// 初始化super chat服务
  ChatService.instance.init(
    /// 提供Web平台的databaseURL
    databaseURL: DefaultFirebaseOptions.currentPlatform.databaseURL!,
    debug: true,
  );
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('Super chat'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'Sign in first before using chat feature',
            ),
            StreamBuilder(
                stream: FirebaseAuth.instance.authStateChanges(),
                builder: (context, snapshot) {
                  final user = FirebaseAuth.instance.currentUser;
                  if (user != null) {
                    return Column(
                      children: [
                        ElevatedButton(
                          onPressed: () {
                            FirebaseAuth.instance.signOut();
                          },
                          child: Text('UID: $myUid  Sign out'),
                        ),
                        ElevatedButton(
                          onPressed: () {
                            showGeneralDialog(
                              context: context,
                              pageBuilder: (_, __, ___) {
                                return const ProfileScreen();
                              },
                            );
                          },
                          child: const Text('Profile'),
                        )
                      ],
                    );
                  }
                  return ElevatedButton(
                    onPressed: () {
                      showGeneralDialog(
                        context: context,
                        pageBuilder: (_, __, ___) {
                          return const SignInScreen();
                        },
                      );
                    },
                    child: const Text('Sign in'),
                  );
                }),
            const Text(
              'Chat room menus:',
            ),
            ElevatedButton(
              onPressed: () {
                showGeneralDialog(
                  context: context,
                  pageBuilder: (_, __, ___) {
                    return const ChatRoomListScreen();
                  },
                );
              },
              child: const Text('Chat room list'),
            ),
            ElevatedButton(
              onPressed: () {
                showGeneralDialog(
                  context: context,
                  pageBuilder: (_, __, ___) {
                    return const ChatRoomListScreen();
                  },
                );
              },
              child: const Text('Chat Invitations'),
            ),
          ],
        ),
      ),
    );
  }
}