App5— SocialChat App using Flutter Framework and Firebase with Geo location sharing.
App5 — Flutter App Development (LW)
Description:
1* Create a chat app representing beautiful UI
2* store/retrieve user data into firebase
3* Integrate the app with map API
4* prompt current location of your friend on Google maps of the user on click of the Button.
This blog will guide you on how to develop high performing chat app with Geo location sharing in Flutter with Firebase in simple steps…
Let’s begin with the essential points
“4” 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
· Adding Geolocation sharing.
Before moving on Further first lets understand the firestore storage.
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
1. Collections — Collections are nothing but a set of document.
2. Documents — Documents are set of sub-collections and field.
3. Fields — Field consists of attribute and value. The values are of the type of string, number, Boolean, map, array, null, timestamp, geopoints and reference.
· If you observe the building blocks of Firestore you can find that it is similar to JSON structure where you can store data in any form, any structure and any depth.
Any complex feature can be implemented easily with proper model design. In this article we will learn how to define and implement model both abstract and specific for programming language
Now lets create the Application:
Step 1: Setting up the Basic architecture of app of easier development process.
Open the pubspec.yaml file in your project and add the following dependencies into it.
2️. create all the screens in a single folder named as view with the different names as:
· Signin.dart
· Signup.dart
· Home.dart(Home page to display active converstaions).
· Conversation_screen.dart
· map.dart for Geolocation
· search.dart
and all the functionality were been controled by main .dart.
3. create the following file in a single folder named as Services with the different names as: These file will include the file which deals with authentication and database services.
· Auth.dart
· database.dart
4 . create the following file in a single folder named as helper with the different names .This folder will include the files which deals with Helping functions // Don’t panic we will understand the use of each and every file further.
· authenticate.dart // This file will will help user to choose to signup or signin with will be the base file which will redirecte the user to different scaffold for signup and signin.
5. create the following files in a single folder named as Model with the different names .This folder will include the files which deals Model(data) part of the application.
· Constants.dart // you can add more value that you want to save in phone memeory.
· SearchModel.dart(model data for user searchlist)
> user.dart
Step 1: Firebase Authentication in the App: Sign in, Sign up or Sign 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 sign-in/Sign up with email and password.
First Make the UI for the Login page .
As we Know that we Will keep our all Authentication related function in a single dart file named authentication in Services folder.
Include the following Functions in the dart file, We will use these function at the time of implementation.
Implementing the SignMeup function in Signup View file which we have to call under OnPressed method of a button by calling this function it will take the text from the text controller and call the required google signup function which we have added in authentication file.
Now as soon as user sign up for first time we have to save the user info in phone memory we will do that using shared preferences and we have to make a user in database to do that
add the following functions in database.dart file.
Step 2: Implementing Chat Home Screen
Now after logged in We have to create the Home screen which will contain the active Chats list.
Create a desired Ui for the home screen and use the below provided code for backend integration .
Following function in home.dart file will fetch the logged in username that we have saved during Signin Process, then after fetching the logged in username it will search the active chatroom in the firebase database which include the name of the user .
The Above getuserInfo will fetch the following chatroom for database.chat room will be created when any one of two member message the other person for the first time. that we will implement later.
Now after Fetching the active chat room using the following chat list widget we will display the each chat tile according the data fetched.
Step 3: Implementing Search Screen.
First implement the search screen basic layout which will contain a text box for username to search. after pressing the search button the following code will be executed.
fetch function will call the getusername function. add the following function in database.dart file
Step 5: Implementing Geo Location feature.
for this we will add a button in conversation screen appbar actions button pressing which we will be able to see the location of the user.
But first we want every user should update its location to the database for this we want a function which will execute first on user home screen or where ever you want. Add the following in database.dart and call them when you want the user to update its current location.
Now add the following in map.dart This will be the screen which will show your friends location on google map.
this function will fetch the location of your friend.
widget for displaying google map
