Super Chat

  • A highly scalable and complete chat application based on Realtime Database.
  • This is designed especially for FlutterFlow developers.
    • If you are looking for a package for Flutter, look for easychat package.

Features

Initialize

  • Call ChatService.instance.init() in the main.dart in your FlutterFlow project.
    • databaseURL must be set to user the realtime database in the web platform.

Example:

import 'package:superchat/superchat.dart';

Future initSuperchat() async {
  ChatService.instance.init(
    /// Provide databaseURL for web
    databaseURL: "https://firebase-database-url.com",
  );
}

Customize widget

Using FF

Overview

  • This package users the realtime database.
    • It is very
      • cheap
      • simple
      • fast

How to

Chat room list custom design

Widgets

ValueListView

  • Use this widget to list the values of a node in Realtime database. This can handle most of the cases of listing the values of a node in Realtime database.

  • If you don't call fetchMore(index), it will only fetch the first page of data.

  • If you want to get only the first page of list to show the latest or the oldest, you don't have to call fetchMore.

  • In this example, it is using PageView to list the data. You can use ListView, GridView, CarouselView, or even Column, Row, or whatever.

  • Use reverseQuery to show the oldest data first.

Example:

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'),
),
  • The example below is using reverseQuery to show the oldest data first.
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

Initialization

When the ChatService is initialized, the UserService will automatically mirrors the user data into the Realtime database.

ChatService.instance.init(
  userCollectionName: 'users',
  userPrivateFields: ['email', 'name'],
);
  • userPrivateFields is the fields that are not exposed to the public. These fields are excluded in mirroring the user data into the Realtime database.

Libraries

superchat