✍Build Chat App In the Flutter using firebase and Google Maps API

Priya Soni

5 min readNov 23, 2020

✍TASK Description:-

💫Create a chat app representing beautiful UI.

💫store/retrieve user data into firebase.

💫Integrate the app with map API.

💫prompt current location of the user on click of the user profile.

✍Major Steps to Develop Chat App using Flutter With Firebase:-

Firebase Authorization: Sign in, Sign up or Sing Out
Firebase Firestore for Installing Plugins: Upload, Remove and Retrieve Data Stored in Cloud Firestore
Creating the Layout of the Chat App Screen
Final Linking of the Flutter Chat App with Firebase
Adding Geolocation sharing.

✍What is Cloud Firestore?

Cloud Firestore is a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud Platform.
Like Firebase Realtime Database, it keeps your data in-sync across client apps through real-time listeners and offers offline support for mobile and web so you can build responsive apps that work regardless of network latency or Internet connectivity.
Cloud FireStore also offers seamless integration with other Firebase and Google Cloud Platform products, including Cloud Functions.

👉 FireStore Database consists of 3 things:-

Collections — Collections are nothing but a set of documents.
Documents — Documents are a set of sub-collections and fields.
Fields — Field consists of attribute and value. The values are of the type of string, number, Boolean, map, array, null, timestamp, geopoints, and reference.

👉 Major Steps to Develop Chat App in Flutter With Firebase:-

Firebase Authorization: Sign in, Sign up or Sing Out
Firebase Firestore for Installing Plugins: Upload, Remove and Retrieve Data Stored in Cloud Firestore
Creating the Layout of the Chat App Screen
Final Linking of the Flutter Chat App with Firebase

👉Step 1: Firebase Authentication in the App: Sign in, Sign up or Sing Out

This is a most essential part of any chat app to keep your data secure by directly sign-in the app with your username. So here’s what you need to understand to create a Google sign-in.
If you are choosing to proceed with the Google Sign-in, then you can use terminal/CMD or VS code, as both will work as a streamlined code editor and providing support for development operations like debugging, task running and version control.
After that directly jump off all the comments in the main.dart and getting rid of MyHomePage() stateful widget and create a folder inside the library.

👉Try to create all the screens in this folder with the different names as:-

Singin.dart
Singup.dart
Forgetpassword.dart
Chatroomscreen.dart

After sorting all the images with certain names, you need to create a widget called Sing-in inside the Sign-in.dart, where you will use scaffold, appBar, body and floating action buttons. In addition, since appBar is going to be very similar for all the screens, so it would be recommended to create it in a separate file, which makes it easier to use it in other screens as well.

Then for adding, use this “import ‘package:flutter/material.dart’;” for importing the files to AppDelegate.h.

After that start the cloud Firestore and storage and then enable sign-in method with Google.
By using the import link, you can easily transfer the files to the app delegate and cut down the risk of manually adding or editing any data at Firebase.
Now you are done with the first step!

👉Step 2: Installing Widgets To Add Functionality to the App

When it comes to developing a chat app, it is important to integrate the right set of plugins to make it run smoothly.
There are majorly two vital things you need to keep in mind while installing plugins:
Following the right instructions
Using the right plugins
Let’s learn it in deep…

✍These plugins are:-

👉Firebase Auth for Flutter: To get started with this plugin, you need to see the documentation.
👉Google Sign-In: To access Google Sing-in, you’ll need to register your application for Android integration. But, for iOS integrations, you’ll need to follow these instructions.

👉Cloud Firestore Plugin for Flutter: You can easily access this plugin with the help of detailed documentation.
👉Firebase Cloud Storage For Flutter: To use this plugin, add firebase_storage but still, in case if you are facing any issue, then it is best to see the directory for a complete sample app using Firebase Cloud Storage.

And here’s another set of plugins that most flutter app development companies usually considered in the chat app:

Fluttertoast to show a toast
Image_picker to pick images from the gallery.

👉Step 3: Creating The Layout of the Chat App Screens

1. Layout of the Login Screen

Once the user successfully sign-in the app, the return variable firebaseUser contains some essential information of the user including displayName, PhotoUrl and more.

2. Layout the Main Screen

Now, this the main page of your chat app that not just have listed all the users available on the database, but also showcase the complete information including nickname, about me, and avatar. If you want to get into depth and would like to design more fields for the user info, then create a detailed screen to see all particular user info.

Here’s how you can list users by using StreamBuilder. Have a look at the example of codes for further assistance:-

3. Layout of the Setting Screen

This page will help the user to edit their info like change avatar, nickname and about me a description. You can provide the editing access to additional fields as well if you have created the main page in detail.

So firstly, you need to load current user info from the disk that you wrote at the time of login and show it on UI. Like this:-

4. Layout of the Chat Screen

Now the chat screen is where user can send text and image message to a friend and vice versa. So it means chat screen will be handling multiple things.