How to Create a Real-Time Chat Application in FlutterFlow

Create a conversations collection with fields: participants (List of Strings — user UIDs), lastMessage (String — preview text), lastMessageTime (Timestamp), and unreadCount (Map — keyed by userId, e.g., {uid1: 0, uid2: 3}). Create a subcollection conversations/{id}/messages with fields: senderId (String), text (String), type (String — text or image), imageUrl (String — empty for text messages), and timestamp (Timestamp). Set Firestore rules: allow read/write on conversations only if request.auth.uid is in participants array; allow read/write on messages if parent conversation's participants includes the user. Create a test conversation with a few messages between two test users.

Create a ConversationsPage with a ListView bound to a Backend Query on conversations where participants arrayContains currentUser.uid, ordered by lastMessageTime descending, with Single Time Query OFF for real-time updates. Each list item is a Row with: a CircleImage showing the other participant's avatar (query the users collection with the other UID from participants list), a Column with the other user's displayName in bold and lastMessage preview in secondary text (maxLines: 1, overflow: ellipsis), a Text showing relative time from lastMessageTime, and a Badge Container (circular, red, 20x20) showing the unread count for the current user from the unreadCount map. Apply Conditional Visibility on the badge: hide when unreadCount[currentUser.uid] == 0. On tap, navigate to ChatPage passing the conversation document reference.

Create ChatPage that receives a conversationRef parameter. Add a Backend Query for the messages subcollection under conversationRef, ordered by timestamp descending (reversed list shows newest at bottom), Single Time Query OFF for real-time streaming. Use a reversed ListView so new messages appear at the bottom and the user can scroll up for history. Each message is a Container styled conditionally: if senderId == currentUser.uid, align right with blue background and white text (sent bubble); otherwise align left with grey background and dark text (received bubble). Add rounded corners (borderRadius: 16 on message side, 4 on tail side). Show the timestamp below each bubble in caption style. For image messages, show an Image widget instead of Text when type == image, with borderRadius clipping.

Pin a Row at the bottom of the ChatPage using a Column with the ListView in an Expanded and the input Row below. The Row contains: a FlutterFlowUploadButton (camera icon) configured for Firebase Storage uploads to chat_images/{conversationId}/{timestamp}.jpg, a TextField (expanded, hint: 'Type a message...', multiline: false), and an IconButton (Icons.send, primary color). On Send tap, the Action Flow creates a document in the messages subcollection with senderId: currentUser.uid, text: textFieldValue, type: text, imageUrl: empty, timestamp: serverTimestamp. Then update the parent conversation document: set lastMessage to the text, lastMessageTime to now, and increment the other user's unreadCount by 1 using FieldValue.increment. Clear the TextField after sending. For image upload: on FlutterFlowUploadButton complete, create a message with type: image, imageUrl: uploadedUrl, and text: 'Sent an image'.

On ChatPage load, add an On Page Load action that updates the conversation document: set unreadCount[currentUser.uid] to 0. This clears the badge when the user opens the chat. For online presence, update the user document's lastSeen field to Timestamp.now() on every page load across the app. Additionally, add a Periodic Action (Timer) on your main scaffold that runs every 60 seconds and updates lastSeen. On the ConversationsPage, display a green dot next to users whose lastSeen is within the last 2 minutes (Conditional Visibility: lastSeen > now - 120 seconds). Create a Custom Function isOnline that takes a Timestamp and returns true if it is within the last 120 seconds of DateTime.now().