Summary: Let’s learn how to build a chat app with flutter and firebase by building messenger clone. [Full source code]
Let’s learn how to build a chat app with flutter and firebase by building messenger clone.
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
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
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.
Step8: Fix multidex Issue
open android/app/build.gradle and add multidex to true (multiDexEnabled true) in default config.
and add the dependency.
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.
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
Build a Wallpaper App with Flutter From Scratch
Build a Quiz Maker App with Flutter & Firebase
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/