Chat + Group Chat
Instead of building the chat feature from scratch, you can use the pre-built chat flow available right inside FlutterFlow. This helps you build the basic chat feature in minutes and allows you to focus more on your app's core features.
Before You Begin:
Ensure you have added the Firebase Authentication and have some user accounts created.
Adding chat feature
You need to go through the following steps for the chat feature to work correctly.
1. Add chat flow
Add a chat flow named 'Chat + Group (w/bubbles)' which includes multiple pages and components, including actions to run the chat feature successfully.
It will add the following collections to your app:
chats: This collection holds data about the last message and users involved in a chat.
chat_messages: This collection holds data about the actual chat message.
Here is how the 'chats' and 'chat_messages' collections are interconnected:
2. Deploy indexes
Adding indexes allows filtering and quering the collection result. For example, you need to show only the chat listings you are in and the most recent one at the top. This can be done by adding indexes.
To deploy indexes, follow the instructions on this page.
3. Deploy storage rules
The chat flow allows you to send images as well. The sent images are uploaded/stored on the Firebase storage, which you can access from the Firebase console. To enable users to send pictures seamlessly, you need to provide them permission by adding the storage rules.
To deploy storage rules, follow the instructions on this page.
4. Deploy Firestore database rules
We auto-create database rules essential to securing the chat data. All you need to do is deploy them.
5. Configure private or group chat
By default, the current flow lets you create both private and group chats. For instance, choosing a single user on the invite page (i.e., 'chat_2_InviteUsers') initiates a private chat, while selecting multiple users starts a group chat.
To restrict this to only private chats, you can modify the 'chat_2_InviteUsers' page to allow the selection of just one user. Additionally, remove the IconButton on the 'chat_2_Details' page that allows adding more users to the chat.
6. Chat page (Threads like UI)
In the current setup, chat messages are displayed in 'chat bubbles' with sender and receiver messages on opposite sides. If you prefer a 'Threads-like UI' similar to Slack, Microsoft Teams, or Discord, you can integrate this by adding the 'Chat + Group (Threads)' flow from the menu. This will change the format to a more organized, thread-based display for conversations.
Customization
When you add the chat feature via Flows, you gain full control over customizing each element, allowing for personalized adjustments to fit your specific needs.
Last Updated Date: December 11, 2023
Last updated
