Building Chat Application with Flutter and Firebase

Chat application has become an essential application for anyone who has access to the Internet. Some very popular chat applications are WhatsApp, Telegram and Facebook Messenger. Most developers out there including me have always wonder how to build one. So in this article, I will show you how I developed a chat mobile application using Flutter and Firebase.

To follow along, you must have the Flutter framework installed on your PC. You can learn more here https://flutter.dev/.

Sample screenshot

Chat page UI

Content summary

1. Project setup
2. Authentication
3. Data Model
4. Homepage - Chat history
5. Find friend page - Find friends to chat
6. Chat page - Read and write chat messages
7. Conclusion

Project setup

1. Run flutter create command to create a new Flutter project.
2. Log in to https://firebase.google.com/ and create a new project.
3. Add your app to the Firebase project by clicking the “Add app” button and just follow the given instructions or steps.
4. Add these packages to your project:
   - firebase_core
   - firebase_auth
   - cloud_firestore
   - intl

Authentication

To use this application, the user must be registered and logged in. Therefore, we will use Firebase authentication to add this feature. To start, we need to enable authentication on the Firebase console. We will use the simple email and password authentication method.

Let's create a login and registration page. This page will have TextField widgets which allow the users to put in their email and password. Use AutofillHints so the users can use their saved email and password. Add button widget to handle the login and registration process.

Register page

Login Page

After the user logged in, the app will fetch the username first and if the username does not exist, that means the user is new and just registered. The new user will be redirected to the “set username page” to add their username.

Set username page

Now, let’s take a look at “main.dart” file. In this file, there is a Root widget that will be the root of our application. The build method will return a StreamBuilder widget that listens to authStateChanges method from Firebase Auth and rebuild each time the user logged in or logged out. If the user is not logged in, it will return the login page or otherwise, it will return a FutureBuilder widget that fetches the user’s username first before returning the home page.

main.dart

Data Model

In our Firestore Database, we will have 3 collections which are users, conversations and messages.

Users Collection

Document ID: User ID
- email: user’s email
- username: user’s username

Conversations Collection

Document ID: Auto ID
- members: Array of user ids who involved in this conversation
- updatedAt: When this conversation was updated (Timestamp)

Messages Collection

Document ID: Auto ID
- message: Chat message
- authorId: Author’s user id
- conversationId: Document id from conversations collection
- createdAt: When this message was sent (Timestamp)
- readAt: When this message was read and can be null if not read yet (Timestamp or null)

Before we create the home page, let’s create “chat.dart” and write Chat and Message class here. Chat represents a conversation between the user and his or her friend. Message represents a single message. Chat can has many messages and they are stored as a list of Message. Chat has a ValueNotifier property named notifier where it will be used to notify listeners or update the UI whenever this conversation is updated. This notifier will hold the number of milliseconds since epoch time until the time when this conversation is updated. This notifier value can be anything as long as we change the value when this conversation is updated.

chat.dart

Home page

The home page will list all the past conversations or chat history. In the initState method, the app listens to the conversations collection from Firestore database. The document of the collection has a “members” field which is an array of user ids. It refers to the members who are involved in that particular conversation. If there are any changes made to the documents which contain the user’s id in the “members” field, the app will fetch new messages and update the UI respectively. Use ListTile widget for each conversation and display the number of new messages if exist at the trail of the ListTile widget.

To chat with a new friend, add a FloatingActionButton widget that will navigate the user to the “find friend page”.

home_page.dart

Find friend page

The user can find his or her friend by using email. Use showDialog to tell the user if the given email does not belong to any registered user. When the user taps the find button, the app will search the user from the users collection on the Firestore database.

find_friend_page.dart

Chat page

Let’s create a MessageItem widget and use it as a container of the message. The appearance of this widget depends on who is the author of this message.

message_item.dart

Now, create “chat_page.dart” file. This file contains a ChatPage widget which allows the user to read and send messages to their friends. Use ValueNotifierBuilder widget which has a builder method that will rebuild automatically whenever this conversation is updated. Use ValueNotifier named notifier from the chat instance that we passed to this page.

chat_page.dart

Run flutter run command to run this application.

Hooray!!! We made a chat application with Flutter and Firebase.

Conclusion

You can see how easy it is to build a chat application with these two powerful technologies, Flutter and Firebase. This is just the basic chat app. You can add more features such as group chats, update profile, delete messages and more.

Thank you for reading.