Flutter Chat App using Firebase Integration(Task 5)

vivek bisht

9 min readDec 9, 2020

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

Collections — Collections are nothing but a set of document.
Documents — Documents are set of sub-collections and field.
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

Basic user flow of our chat app.

Now lets get started:

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

firebase_core: "0.5.0" 
shared_preferences: ^0.5.12 // To store the login state of the user 
simple_animations: ^1.3.3 //(optional) for Fade in animation
firebase_auth: ^0.18.1+1  //for firebase authentication
google_sign_in: "^4.5.1"  //for google signin functionality
geolocator: ^5.3.2+2  // for accessing user geolocation   
google_maps_flutter: ^0.5.30   // google map integration

1️ create all the screens in a single folder named as view with the different names as:

Singin.dart
Singup.dart
Home.dart(Home page to display active converstaions).
Conversation_screen.dart
map.dart // for displaying the map
search.dart // user search screen

2️ 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

3️ 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.

Helper.dart // Shared preference Will allow us to Save so info loke login status and logged in Username and email to store in phone memory.

import 'package:shared_preferences/shared_preferences.dart';import 'package:flutter/material.dart';class HelperFunction {
static String sharedPreferencesUserLoggedInKey = "ISLOGGEDIN";
static String sharedPreferencesUserNameKey = "USERNAMEKEY";
static String sharedPreferencesUserEmailKey = "USEREMAILKEY";static Future<void> saveuserLoggedInSharedPreference(
bool isUserLoggedIn) async {
SharedPreferences prefs = await SharedPreferences.getInstance();
return await prefs.setBool(
sharedPreferencesUserLoggedInKey, isUserLoggedIn);
}
static Future<void> saveuserNameSharedPreference(String userName) async {
SharedPreferences prefs = await SharedPreferences.getInstance();
return await prefs.setString(sharedPreferencesUserNameKey, userName);
}
static Future<void> saveuserEmailSharedPreference(String userEmail) async {
SharedPreferences prefs = await SharedPreferences.getInstance();
return await prefs.setString(sharedPreferencesUserEmailKey, userEmail);
}
//getting the data form shared preferences
static Future<bool> GetuserLoggedInSharedPreference() async {
SharedPreferences prefs = await SharedPreferences.getInstance();
return prefs.getBool(sharedPreferencesUserLoggedInKey);
}
static Future<String> getuserNameSharedPreference() async {
SharedPreferences prefs = await SharedPreferences.getInstance();
return prefs.getString(sharedPreferencesUserNameKey);
}
static Future<String> getuserEmailSharedPreference() async {
SharedPreferences prefs = await SharedPreferences.getInstance();
return prefs.getString(sharedPreferencesUserEmailKey);
}
}

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.

import 'package:flutter/material.dart';
class Authenticate extends StatefulWidget {
@override
_AuthenticateState createState() => _AuthenticateState();
}
class _AuthenticateState extends State<Authenticate> {
bool showlogin = true;
@override
Widget build(BuildContext context) {
void toggleView() {
setState(() {
showlogin = !showlogin;
});
}
if (showlogin) {
return LoginPage(toggleView);
} else {
return SignUp(toggleView);
}
}
}

4️ 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 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 sign-in/Sign up with email and password.

If you are choosing to proceed with the Google Sign-in, then refer this link for information : https://firebase.flutter.dev/docs/auth/usage

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.

//code for google signUp using email and password
Future signUpWithEmailAndPassword(String email, String password) async {
try {
UserCredential userCredential = await _auth
.createUserWithEmailAndPassword(email: email, password: password);
User user = userCredential.user;
return _usercheck(user);
} on FirebaseAuthException catch (e) {
if (e.code == 'weak-password') {
print('The password provided is too weak.');
return 0;
}
 else if (e.code == 'email-already-in-use') {
print('The account already exists for that email.');return 1;
}
} catch (e) {
print(e.toString());
}
}//Code for Google Signin using email and password
User1 _usercheck(User user) {
if (user != null) {
return User1(userId: user.uid);
} else {
return null;
}
}
Future signinWithEmailAndPassword(String email, String password) async {
try {
UserCredential userCredential = await _auth.signInWithEmailAndPassword(
email: email, password: password);
User user = userCredential.user;
return _usercheck(user);
} on FirebaseAuthException catch (e) {
if (e.code == 'user-not-found') {
print('No user found for that email.');
return 0;
} else if (e.code == 'wrong-password') {
print('Wrong password provided for that user.');
return 1;
}
}
}//Sign Out Function
Future signOut() async {
try {
BotToast.showText(
text: "logged out Successfully",
);
HelperFunction.saveuserLoggedInSharedPreference(false);
return await _auth.signOut();
} catch (e) {
print(e.toString());
}
}
}

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.

// We have to call this function as soon as user signup this function will upload the user data to Firestore for registration.
uploaduserInfo(userMap) {
FirebaseFirestore.instance.collection("users").add(userMap);
}

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.

Chat Tile

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

This Function Will Search The user by its username is database.

//getusername search function will fetch the username.//This function will append all searched user in List of type searchmodel

Now to show the fetched users list we will use the following list widget which will return the search tile which two parameter that is username and email id.

Now after clicking on each tile we want to the conversation screen where we can chat to the searched user. But First we want to create the chat room in database. for that call the following fucntion which will create the chatroom with a specific unique id that id will be like username1_username2 .

it will create the chatroom in firestore database.

This function will create the unique id for the chatroom.

Step 4: Implementing Conversation Screen.

For the UI we need to include a text box and a button which will send the message and a chat list which will display the message from the both user who are chatting with each other .. message from the receiver will display on left and message send by the sender will appear on right.

Following is the chatmessagelist which will create a Stream of data to synchronize the message on database and app

Now to send the message we need a function which will take the text from the textconroller and call the setconversation method which we will include in database.dart file.

Add the following method in database.dart file. this method will send the message to database.

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.