Originally published at : Messenger Clone built with Flutter & Firebase

Let's learn how to build a chat app with flutter and firebase by building messenger clone. [Full source code]

https://youtu.be/2d1fslyxBjQ

If you like to learn via video then you can watch it on Youtube, Or you can watch the demo at least, source code link in the end.

📕 Things covered in this video:

Firebase Firestore (updated 2021) create, update, read
Firestore Query & Composite Query
Google Sign In with Firebase Auth & Sign Out
User Login Persistence.
Save user info locally with shared preference

App Features:

Sign in with Google
Search user via username
Send user message real time (it's better)

Prerequisites :

Install Flutter if not already https://flutter.dev/docs/get-started/install

Step1: Creating Flutter project & Refactor Code

Step2: Import required packages in pubspec.yaml

  firebase_auth:
  firebase_core:
  google_sign_in:
  shared_preferences:
  random_string:
  cloud_firestore:

Step3: Implemnet Sign In with Google

for this we will create a folder called services/auth.dart file

As you can see in auth.dart once the user is signed in we save user info to local database with sharedpreference so we need to create those functions.

Step4: Create function to get and save data with sharedpreference. so create a folder helperfun/sharedpref_helper.dart file.

Step5: Connect flutter app with firebase.

Step6: Add Sha1 key to firebase project to make google sign in work properly

run this command in terminal/cmd link to answer on stackoverflow

keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android

then add the sha1 key to firebase> project settings > Add fingerprint > Save.

Step7: Upload user info to firestore.

create a file in services/database.dart create a class called DatabaseMethods and add this function to it.

addUserInfoToDB(
      {String userID,
      String email,
      String username,
      String name,
      String profileUrl}) {
    FirebaseFirestore.instance.collection("users").doc(userID).set({
      "email": email,
      "username": username,
      "name": name,
      "imgUrl": profileUrl
    });
  }

Step8: Fix multidex Issue

open android/app/build.gradle and add multidex to true (multiDexEnabled true) in default config.

    defaultConfig {
        // Enabling multidex support.
        multiDexEnabled true
    }

and add the dependency.

dependencies {
    implementation 'com.android.support:multidex:1.0.3'
}

Step9: Implement search user by username

First we will create the user interface with a textfield, search icon & back icon to cancel search.

Then we will create a firebase query function to fetch the user info from firestore where username is equal to what we are searching for.

Future<Stream<QuerySnapshot>> getUserByUserName(String username) async {
    return FirebaseFirestore.instance
        .collection("users")
        .where("username", isEqualTo: username)
        .snapshots();
  }

Step10: Create Conversation screen

we will start by creating the message box.

Step11: Write function to add message to firebase database.

Step12: Check & Create Chatroom with usernames

Step13: Get and Set Messages

now since we have added messages now let's fetch them and show in a list view with custom list item.

Step14: Show list of chatrooms

Full source code: https://github.com/theindianappguy/messenger-clone-flutter

appfromscratch

Messenger Clone built with Flutter & Firebase

Join Our Newsletter. No Spam, Only the good stuff.