How to create a chat application in Flutter?

4 min readDec 5, 2021

Chat is an integral component in any mobile application whether it be for connecting with others (as in a social app), with support (from the team for any queries), or for joining interest-based groups/chat rooms.

In this tutorial, we’ll build a simple chat feature that can be easily integrated into your projects. Our goal is to minimize developer effort in adding chat functionality.

Let's get started 🚀

Get started by creating a new Flutter project or launch an existing one!

Project Structure

Real quick will need to create some dart files and add the required packages to the pubspec.yaml

Note: The generated_plugin_registrant.dart is a generated file and you don’t have to create it.

Dependencies

For the backend, we’ll use Firebase and would have to set it up for our project. You can watch my video to quickly add Firebase to your Flutter app.

The dependencies then needed to be added to the project would be:

firebase_core: ^1.10.0
firebase_auth: ^3.2.0
cloud_firestore: ^3.1.1

Other than the setup, you’ll have to go over to the Firestore Database on Firebase console and ‘Create database’ in either production or test with read & write permission to save messages in the database.

Enable Cloud Firestore on Firebase console

Authentication

We’d want to know who is sending the messages. For this project, I’ll use the email — password auth provided by Firebase.

Let us create a simple sign-up and sign-in screen with two text fields for email and password to quickly set up auth.

Sign-up

First-time users would have to create a new account before they can sign in and use the app!

Sign-in

The sign-in screen would be used to log in to the app.

By default, the app opens to the Sign-in screen and the user can click on the “Don’t have an account?” text button to navigate to the Sign-up screen and authenticate with email and password.

Note: The screens are kept basic for simplicity. Feel free to modify UI.

Chat Feature

After the user authenticates, they’ll be directed to a new screen called the chat_screen.dart. The first step would be getting the currently logged-in user to display when sending the messages.

I’ll create a stateful widget called ChatScreen that’d have a getCurrentUser() function in the initSatate().

@override
void initState() {
  super.initState();

  getCurrentUser();
}

void getCurrentUser() async {
  try {
    final user = _auth.currentUser;
    if (user != null) {
      loggedInUser = user;
    }
  } catch (e) {
    print(e);
  }
}

We’ll create a messages collection on our Firestore that would save the text messages with the corresponding sender. Then, we would use a StreamBuilder to display the messages in the collection and add a check currentUser == messageSender to build the UI accordingly.

The ChatScreen widget would look like:

These changes add a bottom text field to send messages, a sign-out method, and a new widget that would display the stream of messages.

The next step would be to build this MessageStream to get the messages and display them on-screen. You’d notice that I used a StreamBuilder that gets these messages and displays a list of message bubbles.

Also, I have introduced a new variable isMe to check if the current user is the one sending the message or not. This would help us position the messages on the left or right of the screen as is in other chat apps.

The last step is to add the MessageBubble that would take in the sender and the text message and display it on screen.

With that done, we have a basic chat app ready! 🎉

Now to test it out, I’ll create a new account and log in with a new id.

The complete chat_screen.dart code is:

Thank you for reading till the end ❤

The next goal is to make this chat app both interest-based by diversifying collections and also adding one on one functionality. All this while we need to look into the best possible architecture and optimize the performance of the app.

If you liked it so far, do give it some claps 👏