Creating a Chat App in flutter using firebase to store user data

4 min readDec 18, 2020

creating an app that has a google sign-in option, messaging option, upload profile picture for the user, about me a bio, and nickname in the user profile and toast messages like sign-in success, updated settings.

Here are the dependencies which we have to add in pubspec.yml file, you can get the plugin from https://pub.dev/

google_sign_in: ^4.5.3
fluttertoast: ^7.0.2
image_picker: ^0.6.7+7
firebase_storage: ^4.0.0
cached_network_image: ^2.3.1
firebase_messaging: 7.0.0
flutter_local_notifications: 1.4.4+4
photo_view: ^0.10.2
cloud_firestore: ^0.14.1+3
shared_preferences: ^0.5.12
intl: ^0.16.1

Here is the structure of screens we need for building our app.

creating a const. dart file for creating variables so that we don't need to write the same code again and again like the themecolor we can set only once

Now you need to connect your flutter project to the firebase go to firebase.com

add project

give a name to you're firebase project

add android support to your project and download the google-serveices.json file, add this file at the app level./android/app/

in the firebase, u have to create a collection for storing the user's data in the field

after the user sign -in successfully then we have to store some info like nickname, photo URL, id, credentials, here I have a variable firebaseUser which return the display name, photo URL. login. dart

In the home. dart we have ListView to show users who logged in to chat page in the AppBar we have one text and on the right, we have a popup menu button

to sign out

in the settings.dart file the user can change the info like photo, name, about me and can update. here is the uploadFile() function when the user uploads a photo