Messenger Clone built with Flutter & Firebase

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:

1. Firebase Firestore (updated 2021) create, update, read
2. Firestore Query & Composite Query
3. Google Sign In with Firebase Auth & Sign Out
4. User Login Persistence.
5. 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

Let's Build More fully functioning apps with Flutter :

Build a Recipe App with Flutter

Written Tutorial: https://flutternerd.com/build-a-recipe-app-with-flutter

https://youtu.be/VTR5HpRfS0A

Build a Wallpaper App with Flutter From Scratch

written tutorial: https://flutternerd.com/build-a-wallpaper-app-with-flutter-a-flutter-project/

https://youtu.be/EKdAU3l_0gA

Build a Quiz Maker App with Flutter & Firebase

https://youtu.be/ixWtgO22hBE

Build a Fully Functioning Flutter Chat App with Firebase

written tutorial: https://flutternerd.com/build-a-fully-functioning-flutter-chat-app-with-firebase-part-1-4/

https://youtu.be/FTju8w4zEno

Comments

[kris]

Thanks for providing this stepwise tutorial. Really easy to understand and grab the concept. The UI build for the messenger clone looks awesome just as in the original all. The integration of firebase into the Flutter framework is exemplary. Likewise, there are similar flutter messenger clone apps in the market that provide great UI build along with robust features which you should definitely check out.