Location Enabled Chat App in Flutter using Firebase and Google Maps API.

This blog explains how to build a location-enabled Chat App in flutter using Firebase and Google Maps API. In this application, We will create an authentication page that has registration and login options. User details which he has entered in the registration and login page will be saved in Firebase’s Firestore and in the Authentication section of Firebase. User messages will also be saved in Firebase’s Firestore. In this app, You can also get the location of the user in the Profile of the user.

I will divide the development into a few steps for easy understanding. So, let us start.

pchat99/flutter_chat_app

You can check the above repository for code I have used in various steps.

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.

You can check out main.dart file here.

The initial route of the app is set to the auth screen. This means whenever a user comes to this app, he has to authenticate himself first. The user details will be saved in Firebase’s Authentication.

Step 2: Now we will initialize Firebase.

First, we will head to the firebase console at https://console.firebase.google.com/ and create a firebase project for the ChatApp.

To use firebase services in our application, we have to install the firebase packages. Add the following package dependencies in the pubspec.yaml. Save pubspec.yaml file and packages will get installed automatically.

cloud_firestore: ^0.14.0+2
firebase_core: ^0.5.0
firebase_auth: ^0.18.0+1
firebase_storage: ^4.0.0

Now initialize the firebase in main.dart file.

WidgetsFlutterBinding.ensureInitialized();

await Firebase.initializeApp();

The above line will initialize 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.

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.

You can refer to the registration.dart for code here.

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 can refer to the login.dart for code here.

After a successful login, the user will be directed to the home screen where he can find the list of all of his past chats.

This is how Authentication will look like.

This is how the Login screen will look.

Step 4: Creating a home screen.

We will create a home.dart file in the /lib/screens/ directory.

You can refer to the home.dart for code here.

The home screen of this application will look like this.

Users can tap on any chat to start a conversation.

Step 5: Creating a chat screen.

Using the chat screen, the user can send messages to another contact. 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. I have created a different chat screen.dart files for different users. You can refer to my GitHub repository for more details.

You can refer to the chatscreen.dart for code here.

The chat screen will look like this.

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.

Let’s create a database first.

Follow the following steps to create a database for storing all of the chats.

1. 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.
2. Choose the option to Start in test mode.
3. Select the location where you wish to store the Cloud Firestore data. I will choose asia-south1. And click on Enable.
4. Now, the firestore database setup is completed.

5. Now, the firestore database setup is completed. 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.

6. 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.

Step 6: 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.

This code will first get the username of the currently logged-in user and the current timestamp. It will store the username and timestamp in the firestore.

The messages are getting stored in the firestore.

Step 7: 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.

Step 8: Implementing the profile screen.

The profile screen will simply contain the enlarged profile photo of the contact and the name of the contact.it will also display the current location of the contact. I have created different profiles for different users.

You can refer to the profile.dart for code here.

Step 9: 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.

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.

Now, we have Google Maps API enabled. But the location services require permission to access the device location. So, we required to ask the users of this app for location permissions.

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.

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 below.

You can refer to the location.dart for code here.

Finally, rebuild the Flutter App and test it on your device.

At last, the fully functional chat app with the feature of the live location is ready.

Thanks for reading this article. I hope you got a basic idea of how the chat applications work and implementing the location services.

For any help or suggestions connect with me on Linkedin.