Creating Location Enabled Chat App in the Flutter using Firebase and Google Maps API
We have tons of chat applications these days like WhatsApp, Telegram, etc. This app is also the same as the existing applications with one additional feature that many applications haven’t implemented yet, maybe for privacy reasons. But for the experimenting purpose, I’m implementing that feature which is the live location of the contact. This will enable the user to know the live location of the person with whom the user is chatting. The user just has to go to the profile of the other person and he can see the live location of that person either in text form or the other option is to view the location on the map.
This is a mobile application and for building this app I’m using the Flutter framework which is the cross-platform framework for app development and creating beautiful UI. Also, I will integrate the Flutter with Firebase and Google Maps API.
I will divide the development into a few steps for easy understanding. So, let us start…
Step 1: Create an Authentication page
The authentication page will ask the user to first register and after that using the login button user can log in to his account to access the ChatApp services.
We will create one directory named auth inside the lib folder and create the auth.dart file inside this directory.
When the user clicks on the register button he will be directed to the registration screen and when the user clicks on the login button he will be directed to the login screen. But for achieving this navigation to the screens, we have to add routes to the respective screens in main.dart file.
As I already had planned the screens that I will implement, I’m adding all of the routes to the screens in the main.dart file and we will implement those screens later in this article.
The initialRoute of the app is set to the auth screen. This means whenever a user comes to this app, he has to authenticate himself first.
Step 2: Initialize firebase
As we are implementing user authentication using Firebase, we first have to install the firebase packages in our project and initialize the firebase.
First, we will head to the firebase console at https://console.firebase.google.com/ and create a firebase project for the ChatApp.
Go through the following three steps and create a firebase project.
To use firebase services in our application, we have to install the firebase packages. Add the following package dependencies in the pubspec.yaml file and run pub get command to download and install the dependencies.
cloud_firestore: ^0.14.0+2
firebase_core: ^0.5.0
firebase_auth: ^0.18.0+1
firebase_storage: ^4.0.0Get the pubspec.yaml file here.
After that initialize the firebase in the main.dart file.
Line no. 13 and 14 in the above code will initialize the firebase.
After installing the firebase and firestore dependencies, we can proceed to create an android app in our Firebase project.
After that go to the android/app/build.gradle file and get the application id and paste this id in the “Android Package Name” field.
Click on the Register app button.
Now, download the google-services.json file and place this file in the android/app/ folder.
Click on the Next button and add the lines in the mentioned files to add firebase SDK to the project.
After that, click on the Next button and run the Flutter application. If everything is configured correctly the green tick mark will appear in step 4.
After that click on Continue to the console button.
Finally, our firebase is configured correctly and now we can use the firebase services in our application.
Similarly, create an iOS app in the firebase project using these steps.
Step 3: Enabling firebase authentication
Go to the chat-app project we had created and click on the authentication button under the Develop options from the left panel. Go to the sign-in method tab and click on the edit icon next to the Email/Password provider.
Now, click on the enable toggle button and save.
After that, we will see that the Email/Password sign-in method is enabled for this project.
Now, we are all set to implement the authentication methods for our application.
First of all, we will create a registration screen inside the lib/auth/ directory that will enable users to register on our platform.
This screen will accept the email and password of the user because currently, we had enabled only the email authentication. Additionally, it will accept the username.
Get the code for reg.dart file from here.
Now, we will proceed further to implement the login screen.
We will create the login.dart file inside the /lib/auth/ folder. This screen will accept the email and password from the user and after the authentication is successful, it will allow the user to access the ChatApp services.
You will get the code for login.dart file from here.
The registration and login screens will look like this.
After a successful login, the user will be directed to the home screen(chat screen)where he can find the list of all of his past conversions/chats.
Step 4: Creating a home screen
We will create a home.dart file in the /lib/screens/ directory.
Get the code for home.dart file from here.
The home screen of this application will look like this.
Users can tap on any chat to start chatting.
Step 5: Creating a chat/conversation screen
Using the chat screen, the user can send messages to another contact. Currently, this supports only text messages with emojis. This screen will display the messages sent by the user to the contact along with the message time.
We will create the chat screen file in the /lib/screens/ directory with the name chat.dart.
You will get the chat screen code here.
The chat screen will look like this.
Step 6: Create a firestore database to store the chat
Now, we have our chat screen ready and the user can send messages. But, we have to store these messages somewhere. For storing the messages, I will use a Cloud Firestore which is a scalable database provided by the Firebase.
Let's create a database first.
Follow the following steps to create a database for storing all of the chats.
- Go to the firebase project and click on the Cloud Firestrore from the options in the left panel. After that click on the Create database button.
Choose the option to Start in test mode.
Select the location where you wish to store the Cloud Firestore data. I will choose asia-south1. And click on Enable.
Now, the firestore database setup is completed.
2. Now, we have to create a collection to store the chat. For this, click on the Start Collection button and enter the collection ID. I will enter the collection ID as chat and click on next.
Now click on the Auto-ID option and this will generate the ID automatically for the records that we will enter and click on Save.
This will add an empty document(a record) in the collection to initialize, but you can delete this empty document.
As Firestore is a NoSQL database, we don’t have to decide the schema first. On the go, we can put the records with different fields as we required.
Step 7: Sending and storing the chat messages
When the user sends a message, this message will be stored in the firestore. The ChatApp will send the text message along with the username and email ID of the user to the firestore. Also, it will send the timestamp of the message to the firestore.
The following code will get executed when the user clicks on the send message button.
This code will first get the username of the currently logged in user and current timestamp. And along with the message and the email of the logged-in user, it will store the username and timestamp in the firestore.
Let's verify if the messages are getting stored in the firestore.
Step 8: Get the live location of the user
When the user taps on the profile photo of the contact, he will be taken to the profile page of that contact and the current location of that contact will be shown.
For this, we first have to get the current location of the user. To get the current location of the user I’m using the Geolocator package.
When the user taps on the profile photo of the contact, the following code will get executed.
The Geolocator package gives us the position of the user as longitude and latitude.
But we have to display the current location of the user in the text form. For this, we need to obtain the address(placemark) of the user position. For getting the PlaceMark of the user location, we will use the Geocoder package.
To get the PlaceMark from the coordinates, the following function will run.
The above function will return the address and other information like postal code, state, district of the user location.
After this, the screen will be navigated to the profile page along with the data of the user location.
Step 9: Implementing the profile screen
The profile screen will simply contain the enlarged profile photo of the contact and the name of the contact.
After that, it will display the current location of the contact.
The code for the profile screen is here.
Step 10: Enable Google Maps API
When a user clicks on the show on map button, the current location of the contact will be shown on the map.
For showing the location on the map, we will use Google Maps. For this, we have to use the API provided by Google. So, first of all, we have to enable the Google Maps API from the Google Cloud.
Follow the following steps to set up the Google Maps API:
Go to the Google Cloud Console and create one project named ChatApp.
Click on the API & Services option from the left menu panel and click on credentials.
After that, click on Create credentials and choose API Key.
Copy the API key and keep it with you.
Now, we have to enable the Google Maps API. For this, go to the library option from the left panel in the API & services.
Search for the Google Maps API and click on Maps SDK for Android.
Click on the enable button to enable this API.
After the API is enabled, you will see the green tick.
Similarly, enable the Maps SDK for iOS.
Step 11: Set up the Location services for Flutter App
Now, we have Google Maps API enabled. But the locations services require permission to access the device location. So, we required to ask the users of this app for location permissions. For this, we will set up the location permissions for both Android and IOS devices.
For Android
To set up the location permissions for android go to the android/app/src/main/AndroidManifest.xml file and add the following two lines before the <application tag.
This will ask for the location permissions from the user.
Also, between the <application tag and the<activity tag add the line below that will provide the API key to access the Google Map services.
Replace the YOUR_API_KEY with the API key we had copied just before.
For iOS
For iOS, go to the ios/Runner/Info.plist file and add the following code before the </dict> tag.
Step 12: Create a screen to show the contact’s live location on the map
We will add one button on the profile screen to show the contact's location on the map. When the user clicks on this button, the map with the live location of the user is displayed.
You can find the code to display the live location of the contact on the map here.
Step 13: Change the default icon of the application
To change the app icon, we must have the logo created for our app. I have one logo with me. So, let's change the app icon for both Android and iOS apps.
First of all, we need to generate icons of different sizes. For this, there are some online app icon generators available. I’m using the https://appicon.co/ website to generate the app-icon of different sizes. Go to this site and select the icon you have. Then select the options to generate icons for android and ios. Leave the icon file name to default i.e. ic_launcher.png for now And click on generate. This will download the zip file with the icons of different sizes for both android and ios.
For Android
For android, all of the app icons will reside in the android/app/src/main/res/ directory. Go to this directory and replace the folders whose name starts with ‘mipmap-’ with the folders in the downloaded icons.
For iOS
For iOS, ios/Runner/Assets.xcassets/ directory has all of the icons for the iOS app. Make sure that the icon files name is the same as that of the default icon files in the ios/Runner/Assets.xcassets/ directory.
Finally, rebuild the Flutter App and test on your device/emulator/simulator to see the updated app icon.
At last, the fully functional chat app with the feature of the live location is ready for both Android and iOS.
Thanks for reading this article. I hope you got to learn something new from this article and a basic idea of how the chat applications work and implementing the location services.
For any help or suggestions connect with me on Twitter at @cankush625 or find me on LinkedIn.
