Chat + Group Chat

Adding a chat feature allows users to communicate with others inside the app. Instead of building the chat from scratch, you can use the ready-made templates available right inside FlutterFlow. This helps you build the chat feature in minutes and allows you to focus more on your app's core features.
On this page, you'll learn how to set up a chat and add private chat (1:1 chat), group chat, and customize it.
Prerequisites
Before you add the chat, make sure you have added the Firebase Authentication and have some user accounts created.
Private chat and Group chat
Chat setup
You need to set up a few things for the chat feature to work correctly. This includes adding a chat page with collections (to hold chat data) and deploying indexes, storage, and database rules.
1.​Adding chat page​
2.​Deploy indexes​
3.​Deploy storage rules​
4.​Deploy Firestore database rules​
1. Adding chat page
The chat page is the one on which the messages are sent and received. Adding the chat page automatically creates the two collections as chats and chat_messages. Together these collections are used to store all chat-related data. 
To add the chat page from the template:
Click Select Page or Component from the Navigation Menu (left side of your screen).
At the bottom of the screen, select +  Page button. This will open a new popup.
Enter the page name (e.g. Chat Page).
Select the Chat tab, find the Chat Page template and then select Use My Theme or Use Template Theme.
A pop-up will appear saying that it will also add the chats and chat_messages collections (with fields to hold chat data) to the project. Click Ok to continue.
Adding chat page
You can see the newly added chats and chat_messages collections, by clicking on the Firestore from the Navigation Menu (left side of your screen).
Here is how they look:
chats collection
chat_messages collection
2. Deploy indexes
Adding indexes allows you to filter and query the collection result. For example, you need to show only chat listings, you are in and by the most recent one at the top. This can be done by adding indexes. FlutterFlow creates such indexes for you. The only job for you is to deploy them.
To deploy indexes, follow the instructions on this page.
3. Deploy storage rules
The chat page (added in step 1) allows you to send images. The sent images are uploaded/stored on the Firebase storage, which you can access from the Firebase console. For the users to successfully send pictures, 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
FlutterFlow automatically generates the database rules essential to securing the chat data. The only job for you is to deploy them.
To deploy database rules, follow the instructions on this page.
Deploying database rules
Adding private chat (1:1 chat)
The private chat, also known as the personal chat or direct message, is used to start a conversation between two users. You can start the private chat by just passing the user record (of the user with whom you start the chat) to the chat page.
Let's build a private chat example, as shown in the visual below:
Private chat demo
To build the private chat, you need the following three pages:
1.AllChats: Shows a list of all chats.
2.InviteUser: This allows you to invite users to start the chat.
3.ChatPage: This allows you to send and receive messages.
The following flow illustrates how three pages work together:
Private chat flow
Building the private chat comprises the following steps:
1.​Adding pages​
2.​Adding navigation​
Prerequisites
Make sure you have completed the chat setup.
1. Adding pages
Add the required pages as per the step below:
To show the list of all chats (you are in), click on the +  Page button and add the All Chats Page from the template (i.e. AllChats page).
To start or invite the user to the chat, you need a page to select the user. To do so, create one more page (e.g. InviteUser page) that shows a list of all users.
Add a ListView and query the users collection, you can follow the instructions on this page.
While querying a collection, enable the Exclude Current User property. This hides the current/logged-in user from the list for obvious reasons. The logged-in users should not start the chat with themselves.
Adding pages
2. Adding navigation
Add the navigation as per the steps below:
Select the first page that shows all chat (i.e. AllChats page), and add the IconButton widget inside the AppBar action section with an action to navigate to the page that allows you to invite the user (i.e. inviteUser page).
Select the page that invites users (i.e. InviteUser page), Inside the ListView, on tap of the item, add an action to navigate to the chat page (added in step 1 of chat setup). Note: While adding the navigate action, pass the user Record (from ListView) to the chatUser parameter of the chat page.
Adding navigation
Adding group chat
The group chat allows you to start a conversation between multiple users (more than 3) of similar interest. You can build the group chat by utilizing the actions under the Group Chat Action.
Let's build a group chat example, as shown in the visual below:
Group chat demo
To build the group chat, you need the following four pages:
1.AllChats: Shows a list of all chats.
2.InviteUser: This allows you to invite users to start the group chat.
3.ChatPage: This allows you to exchange messages.
4.AddUserToGroup: This allows you to add a new member to the group chat.
The following flow illustrates how four pages work together:
Group chat flow
Building the group chat comprises the following steps:
1.​Adding pages​
2.​Adding navigation​
Prerequisites
Make sure you have completed the chat setup.
1. Adding pages
Add the required pages as per the step below:
To show the list of all chats (you are in), click on the +  Page button and add the All Chats Page from the template (i.e. AllChats page).
To start or invite another user to the group chat, you need to have a page to select the users (i.e IniviteUser page). To do so, click the +  Page button and add the Create Group Chat Page from the template.
By default, this page shows the current/logged-in user in the list. To hide the current user, select the Backend Query and then enable the Exclude Current User property. Click Confirm.
On the same page, select the Create Chat button, move to the action section, and see how the group is created using the Group Chat Action -> Create Group Chat. Note: Once the group is created, this action automatically navigates to the Chat Page.
To add new users to the group chat (i.e AddUserToGroup page):
First, add the Add Users Chat Page from the template. To hide the current user from the list, select the Backend Query and then enable the Exclude Current User property. Click Confirm.
On the same page, select the Invite to Chat button, move to the action section and see how the new users are added using the Group Chat Action -> Add Group Member(s).
The chat page on which the messages are sent and received is already added as a part of the chat setup.
Adding pages
2. Adding navigation
Add the navigation as per the steps below:
To navigate from AllChats page to InviteUser page, select the first page (i.e. AllChats page), and add the IconButton widget inside the AppBar action section with an action to navigate to the inviteUser page.
To navigate from the Chat page to the AddUserToGroup page, select the Chat page and add the IconButton widget inside the AppBar action section with an action to navigate to the page that allows you to add new users (i.e. AddUserToGroup page). Note: While adding navigate action, set the chat parameter as Source to Widget State and Available Options to Chat Document.
(Optional) To remove the existing user, you can use the Remove Group Member(s).
Adding navigation
Customization
You can customize the appearance of the ChatPreview and ChatPage to match your design.
Customizing ChatPreview
The ChatPreview displays some chat-related information such as user photo, last message, time of the last message sent, and an indicator informing users about the unread message.
To customize the ChatPreview:
Select the page that shows a list of all chats.
Select the ChatPreview widget from the widget tree or the canvas area.
Move to the properties panel, scroll down to the Chat Preview Properties section.
To change the background color, find the Color property, click on the box next to the already selected color, select the color, and then click Use Color or click on Unset and enter a Hex Code directly. You can also choose the color by clicking the Palette and Simple button.
To change the unread message indicator, find the Unread Indicator Color property, click on the box next to the already selected color, select the color, and then click Use Color or click on Unset and enter a Hex Code directly. You can also choose the color by clicking the Palette and Simple button.
To add some empty space around the chat preview, find the Content Padding property and set the padding for the Left, Top, Right, and Bottom sides. Use the 
 Lock button to change all values at the same time. Unlocking will allow you to modify each value separately.
To change the title style, find the Title Text Style property and follow the instructions here.
To change the date style, find the Date Text Style property and follow the instructions here.
To change the preview text style, find the Preview Text Style property and follow the instructions here.
Customzing chat preview
Customizing ChatPage
You can customize the appearance and behavior of the chat page by using various settings available under the Chat Properties.
Allow sending image
Using this setting, You can allow users to send images inside the chat. By default, this is turned on.
To change allow image settings:
Select the Chat Page.
Select the ChatPage widget from the widget or that canvas area.
Move to the properties panel, and find the Chat Properties section.
Find the Allows Images toggle and change it as per your need.
Allow image setting
Changing chat background color
To change the chat background color:
Select the Chat Page.
Select the ChatPage widget from the widget or that canvas area.
Move to the properties panel, and find the Chat Properties section.
Find the Background Color property, click on the box next to the already selected color, select the color, and then click Use Color or click on Unset and enter a Hex Code directly. You can also choose the color by clicking the Palette and Simple button.
Changing chat background color
Changing time display settings
By default, the time of the message is displayed when you click on the message. Using this setting, you can decide whether to keep the current settings or always show or hide the time of the message.
To change the time display settings:
Select the Chat Page.
Select the ChatPage widget from the widget or that canvas area.
Move to the properties panel, and find the Chat Properties section.
Find the Time Display Settings dropdown and select among the Always Visible, Always Invisible, and Visible on Tap (show time when tapping on a message).
Allow sending push notifications.
You can send users a push notification for the new/unread message if they don't have an app open. By default, this setting is disabled.
To allows sending push notifications:
Select the Chat Page.
Select the ChatPage widget from the widget or that canvas area.
Move to the properties panel, and find the Chat Properties section.
Turn on the Send Push Notifications toggle.
To deliver the notification with default users' device sound and vibration, turn on the Deliver With Sound toggle.
Learn more about adding push notifications support to your project.
Allow sending push notifications
Customizing current user message
You can change the appearance of the sent message using the properties available under the User Message Props and User Text Style.
To customize the current user message:
Select the Chat Page.
Select the ChatPage widget from the widget or that canvas area.
To change the color and border of the message, move to the properties panel, and find the User Message Props section.
To change the message background color, find the Color property, click on the box next to the already selected color, select the color, and then click Use Color or click on Unset and enter a Hex Code directly. You can also choose the color by clicking the Palette and Simple button.
To change the border around the message:
Find the Border Color property, click on the box next to Unset, select the color, and then click Use Color or click on Unset and enter a Hex Code directly. You can also choose the color by clicking the Palette and Simple button.
To adjust the rounding corners, find the Border Radius property and enter the value. Use the lock icon to change all values at the same time.
Now, find the Border Width property below and enter the value. (e.g. 2,5,10).
To change the text style of the message, move to the properties panel, and find the User Text Style section and follow the instructions as per here.
Customizing current user message
Customizing other user(s) message
You can change the appearance of the message received using the properties available under the Other User(s) Message Props and Other User(s) Text Style.
To customize the other user message:
Select the Chat Page.
Select the ChatPage widget from the widget or that canvas area.
To change the color and border of the message, move to the properties panel, and find the Other User(s) Message Props section.
To change the message background color, find the Color property, click on the box next to the already selected color, select the color, and then click Use Color or click on Unset and enter a Hex Code directly. You can also choose the color by clicking the Palette and Simple button.
To change the border around the message:
Find the Border Color property, click on the box next to Unset, select the color, and then click Use Color or click on Unset and enter a Hex Code directly. You can also choose the color by clicking the Palette and Simple button.
To adjust the rounding corners, find the Border Radius property and enter the value. Use the lock icon to change all values at the same time.
Now, find the Border Width property below and enter the value. (e.g. 2,5,10).
To change the text style of the message, move to the properties panel, and find the Other User(s) Text Style section and follow the instructions as per here.
Customizing other user(s) message
Changing hint and text style
To change the hint and text style of the widget that accepts the message:
Select the Chat Page.
Select the ChatPage widget from the widget or that canvas area.
To change the hint style, move to the properties panel, find the Input Hint Style section and change the style as per here.
To change the text style, move to the properties panel, find the Input Text Style section and change the style as per here.
Changing hint and text style
Setting empty chat widget
The empty chat widget is displayed when there are no messages in the current chat. You can set three types of widgets for this—image, Icon, and Component.
To set the empty chat widget:
Select the Chat Page.
Select the ChatPage widget from the widget or that canvas area.
Move to the properties panel, and find the Empty Chat Widget section.
By default, the Image widget is selected with a dummy image. To change it, find the Widget Type section and change it to Icon or Component.
To change and modify the image widget settings, follow the instructions here.
To set the component, you must have a component created in your project. Learn how to create the component.
To view the empty chat widget in UI builder, toggle the View in UI Builder.
To get the image in the center, toggle the Center Image.
Setting empty chat widget
Last modified 8mo ago