I Built a Chat App Using Flutter and Firebase in 1 Hour- Here’s How You Can Too!

A Step-by-Step Manual to Create a Chat App in Flutter with Firebase

Published in

Quick Code

10 min readOct 11, 2021

A step-by-step guide to creating a chat application in Flutter with Firebase. (Plus, critical technical insights from a Flutter app development company that dabbles in several mobile app development services.) Both platforms (Flutter & Firebase) are evolving, so keep checking back for updates.

Let’s say, you need a simple application that allows you to sign-up, login, and log out, talk to other users with stickers, texts, and images, and keep track of your conversations.

Designing the UI for something like that is pretty easy and quick, thanks to Flutter. But, this application will run on multiple devices and you need a shared data source- a backend -for all of them. It has to be secure, maintain a strong real-time connection, and keep everybody in sync.

That’s why we have Firebase (And Cloud FireStore, but more on that later!)

In this space, you will find answers to the following queries.

How do I create a chat app with Firebase & Flutter?
Is Firebase a good choice to build a chat app?
Can I build a Flutter chat app without Firebase?

We will also discuss the cost structure and the pros and cons in case you choose to outsource Flutter app development services.

Here we go!

A Quick Summary of What We Are Doing Today

We are going to develop a chat application. The framework of choice- Flutter. Backend- Google Firebase.

This chat app will have the following features, at the very least.

Sign-in, Sign-up, and Sign-out options with a Google account
Text, images, and stickers in the chat options
User profile with basic details and an avatar
Data upload & retrieval

I am assuming we have a Flutter project in a semi-working condition. Nothing too fancy, so don’t worry. You do not have to hire mobile app developers just yet! The project only needs to have the skeleton for our chat application. That includes the page (home, chat, sign-in, etc.)

Introductions

Google Firebase

Firebase is a Google-backed, Backend-as-a-Service platform. It’s used to build and run software applications.

Building a chat app on Firebase is easy and a wonderful way to understand how real-time databases work. And, it provides tools to solve common app development challenges.

Is Firebase A Good Choice To Build A Chat App?

It is, for a number of reasons. I present a few:

Unlimited analytics reporting, free for 500 individual events
Secure authentication systems, and hence, an intuitive sign-in experience
Configurations to customize user onboarding flow
Email and password accounts, plus social media log-in
Password authentication
Real-time database, real-time data syncing, and offline access to data
A time-efficient crash reporter
Simplified cross-device, cross-configuration app testing
Minimal learning curve

Flutter

Flutter is a Google product- an open-source, free, portable UI toolkit. It is used to build native mobile applications for different systems (like Android & iOS) through code reuse and a single codebase.

Why Do We Prefer Flutter?

Flutter is the favorite of most leading mobile app development services. Development in Flutter is relatively cheaper and more productive.

Many other reasons make Flutter a good choice for app development.

Fast UI coding
Ready-made widgets
Dart- a simple object-oriented language
A mild learning curve
Plenty of documentation
Hot reload tool for real-time updates

4 Steps to Develop a Chat App in Flutter with Firebase

Create a Project in Firebase
Connect Firebase to Your Flutter App
Install Plugins
Create the Screen Layouts
Log-in Screen
Home Screen
Profile Page
Chat Screen

1. Create A Project in Firebase

The first step to working with Firebase is a Google account. You need one to sign in and get to the Firebase console, where you can create a new project.

Once you get here, click on the ‘Create a Project’ button. Next, enter ‘Project Name’ and click ‘Continue.’

The next step is to register your app with Firebase, i.e., add Firebase to your iOS, Android, or web app. The console will ask you for an iOS bundle ID or Android package name. You can find that detail in Android Manifest or Source Stream.

If you plan to release your chat app on more than one platform, like iOS and Android, you need to register all applications on Firebase. You can add more than one application here, so that’s not an issue.

Now, remember, the idea is to establish authentication and storage via Google Firebase. We will use Cloud FireStore for this purpose.

Create a new database. You can start in production mode or testing mode.

At this point, you are all set to create collections. You have a working backend. Now, we need to connect this to your Flutter application to establish a seamless, active connection.

2. Connect Firebase to Flutter

You need to add the Cloud Firestore plugin to your Flutter application. To do that, we’ll get back to the configuration files named google-services.json.

Go to your Flutter project source and place the config file in the android/app directory.

Once that’s done, open the build.gradle file. Add a single line of code to the dependency section.

classpath ‘com.google.gms:google-services:3.2.0’

Then, open the build.gradle file at the app level and add another line of code at the bottom.

apply plugin:’com.google.gms.google-services’

This is for Android. For iOS, drag the property list file, i.e., the configuration file downloaded when registering the iOS app on Firebase, to the project’s Runner folder on Flutter.

Now, you just need to establish the final link. Open the pubspec.yaml file in Flutter. This is where Flutter stores project metadata and dependencies. Here, add cloud_firestore: under the dependencies section. Then, click on ‘Tools’, ‘Flutter’ menu, and ‘Flutter Packages Get.’

That’s it! The plugin has been imported. Your Flutter app project and Firebase are now ready to communicate.

3. Get the Right Plugins for the Chat App

Let’s go back to when we discussed the amenities in our Firebase & Flutter chat app. Or, ask yourself- How do I use a real-time chat app?

Sign-up or sign-in
Reach a home page with all open chats
Click on one
Type a text
Send an image
Read through old texts
Set profile pictures and usernames
View other user’s profile pictures and usernames

From a developer’s point of view, each of these actions needs permission to perform in Flutter and permission from Firebase to fetch, record and use data. That’s done through plugins.

Specifically, these ones.

firebase_auth — For the Firebase Authentication API
google_sign_in — A plugin to facilitate signing in with a Google account on Android or iOS
cloud_firestore — For Google Firestore (we already used this one)
firebase_storage
fluttertoast — Toast library for Flutter
shared_preferences — Facilitates easy reading and writing of key-value pairs
image_picker — To pick photos from the internal gallery and take photos from the camera
Cached_network_image — For loading and caching network images
intl — To handle the localized message, date formatting, number formatting, to-&-fro texts, parsing, and other internationalization issues

Depending on how you scale and add functionalities, remember to put in the right plugins so that your Flutter and Firebase can interact without any problems. To get the latest version of these packages, type the package name+Flutter on a search engine.

Click on the ‘Pub.devhttps://pub.dev’ result.

You can get all these plugins easily via this trick.

4. Screen Layout Design in Flutter & Firebase Using Plugins and Widgets

Good so far?

Perfect!

Let’s talk about screens, the backend database, and using plugins to connect the two.

A conversion about screen layouts includes how they look and behave. For example, how do you add a chatbox on Flutter?

You write code and design a UI with a textbox and a background, and a send button. But, you also link it to a database and define where the text goes, or the image is stored when one user sends a message to another.

Image Source: (https://www.youtube.com/watch?v=wHIcJDQbBFs)

When our user logs in, that data should be recorded in the Firebase storage. This should happen when users change avatars. Image names and URLs should be stored at the backend. When two users chat, the data should be read and written at the same node in Firebase.

So, when we connect our Flutter app with Google Firebase and run tests by signing up or logging in, or sending texts or images, it should reflect in the database.

This is what your database looks like with a few entries in it.

I am hoping you have created pages in Flutter for every screen. If you haven’t, now is the time to do so. For the sake of convenience, we’ll name them like-

Signin-dart
Signup.dart
Homescreen.dart
Chatscreen.dart
Passwordforgot.dart
Profile.dart

In each of these files, you will create a widget and add UI elements (buttons, scaffolds, etc.) needed for the particular screen.

Once done with this part of your Flutter chat app design, open lib/main.dart and add a single line of code for the plugin you want to activate. Here are a few examples.

import ‘package:flutter/material.dart’;
import ‘package:google_sign_in/google_sign_in.dart’;
import ‘package:image_picker/image_picker.dart’;

You get the idea!

Because we have added the cloud_firestore: dependency in the pubspec.yaml file already, this import link will act as the power button and start Cloud Firestore for the intended plugin. When a user sends data to your app using any screen, the content will automatically get recorded on Firebase.

The second command would record the data (username, etc.) for any sign-in via Google in the database.
The third command will record image details.
The first would change the UI background.

Depending on the screen, we use plugins to define the functionality of your layout and channel the data automatically to Firebase. This eliminates database errors and makes your job quicker.

At this point, remember to also store certain specific information to the local storage. For instance, this can be used to store and load stickers and emojis.

Cost to Create a Chat App in Flutter and Firebase

There are two ways to do this.

Use the process shown here, research a bit more, and build it yourself.
Hire mobile app developers from a Flutter app development company.

I mention this because the cost to create a Flutter chat app varies by the method you choose. And, both phases have their ups and downs.

The DIY way will help your learning process. However, you may notice gaps in my tutorial. We have talked about the steps to build a chat application with Firebase, Flutter, and the internet. But, I have focussed more on Google Firebase. If you want to know more about creating a chat app in Flutter, you will need a more exhaustive guide.

On the other hand, if you hire software developers while understanding what you can achieve with Firebase and Flutter (I’ve made this plenty clear in this article), that gives you an upper hand. You know what you need and where your development is heading. And, the Flutter app development services will handle the nitty-gritty for you. No stress. No hassle.

Having said that, take a look at this cost structure to gauge the situation around a Flutter chat app.

Also, the features you choose will impact the final price you pay to any mobile app development services provider. Here’s an example of what things cost when building a Flutter app like Facebook Messenger.

My advice: Determine your functional, complexity, and scaling needs. Customize the outsourcing charges accordingly.

And, We’re Done!

You have built a working, albeit naive, Flutter chap app using Firebase. Congratulations!

Before we move further, I am solving some common queries related to the subject at hand. Check them out!

Can we use Firebase for chat apps?

Yes. As a backend.

2. Is Firebase free to use?

Absolutely. Google makes sure of that.

3. Where can we get the Flutter chat app source code?

Try GitHub. You’ll find many.

4. Can we build a Flutter chat app with MySQL?

Yes. To know how we can do that, keep checking this space for an update.

When you are just getting started with Flutter and Firebase, tutorials like mine can prove to be of tremendous help. However, if you are looking to create a chat app in Flutter with Firebase for a business, I’d suggest you consult professional Flutter mobile app development services.

Because investment, expectations, and ROI are involved, hiring a Flutter app development company is more likely to bring results for you.

If you have any confusion or doubts, leave them in a comment. For example, ask me anything about Flutter, Firebase, and live chat apps. Or, if you want to know more about mobile app development services or how to hire software developers, ask away. I will have the answers ready!

Good Luck Developing!