Flutter Firebase Chatting App

Flutter Firebase Chatting App

    Flutter Firebase is a good option for building chatting app. Firebase SDK provide great solution for instant notification and chatting. It's a real time chat app example. If you want to learn about video chatting app click here.

    Demo Chat App

    Complete Chatting App Tutorial

    Take the course on Udemy

    Here we built a chatting app using Flutter Firebase and Getx. Download the source code from the link below.

    Starter code for fans on youtube

    In this chatting app we covered the following screens.

    App Screens

    1. launch screen
    2. login screen
    3. chatting screen
    4. personal center
    5. allow location screen
    6. contact screen
    7. photoview page(enlarge photo)
    8. notification screen

    UI Concepts

    Some concepts used in this app, which are difficult for beginners. These concepts are must for building any kind of complex app. Apart from this app, I have used them in other two apps as well. Let's take a look who they are

    1. CustomScrollView
    2. ScrollController
    3. addPostFrameCallback

    If you just wanna know about them, click on the links and learn on your own free time.

    Chatting App Modules

    Get the complete code here

    Buymecoffee Link Firebase Chatting App

    Patreon Link Firebase Chatting App

    Download The Chatting Apk

    Take the whole course on Udemy where I have covered Facebook and Apple Login and notification as the user sends message.

    Udemy course

    Chatting and notification are all done using Firebase. So if you download and install the app, you need to register the app to your own firebase account. Recent version includes Google login, Apple Login and Facebook login. Udemy followers will see how to integrate Apple and Facebook login along with iOS and Android notifcation. Notifcations are done in detail in Udemy part. Udemy followers will also be able to download resources to download without water-mark.

    For routing, middleware and services we used Getx.

    Screen Features

    1. Launch screen

    You will see it has screen with three slides. The last one let's you enter in the login page.

    2. Login screen

    We used social networking for launch screen. The paid version app includes both Google and Facebook sign in. But you will have issues with Facebook login

    3. Contact screen

    From contact screen you would be able to see how many people have chatted to before. You may choose any to chat back.

    4. Chatting screen

    Here you would be able to chat between two people and get instant messages. Currently you send images and texts for chatting.

    Not only you may send photos on the chat, you may also take photos and send.

    5. Personal center

    Here is your dashboard. You navigate to other screens and logout.

    6. Allow location 

    The app uses user's current location. With this you know who you are chatting to. And there current location.

    7. Photo view screen

    Here you can tap on a photo and enlarge it. 

    8. Notification feature

    Here I have implemented notification feature that covers sound, instant notification, on tap redirect notification, message text field auto update. This feature is available on Udemy course.

    Flutterfire configure Firebase auto set up

    Firebase Backend

    Users and messages are all saved in firebase backend. We used firebase firestore to store and retreive data. Every time you send a message to another user, a dynamic document is created under message collection.

    All the users are saved in collection called users. Each user has unique document. Under this document we have fields like

    1. from_avatar
    2. from_name
    3. from_uid
    4. last_msg
    5. last_time
    6. msg_num
    7. to_avatar

    firebase chat user's list

    You may also delete users from Firebase manually.

    Backend Database Structure

    The above video explains how to set a up basic chatting database structure. It does it by defining collection, documents, sub collections and documents. 

    Documents are inside collection, collections are like tables in MySQL and each document would be like a row in MySQL database. 

    Each documents should contain fields or column. The below photo should show the how the database works and relationship between collection, documents, sub-collections, documents and it's users.

    Get Common Data Between Users

    Here the difference between MySQL and Firestore database is that, in firestore database each document can contain collections as well. In MySQL you can not row inside row.

    Getting common data between two users might look intimidating for beginners. Here you see how we do that using two where() clause. Each where clauses contains different condition.

    The below picture should clarify more of the connection how two users have unique document ID for chatting.

    Image Uploade ImagePicker and FirebaseStorage

    The below picture shows how image upload works from ImagePicker() to FirebaseStorage. Watch the video it should be even clearer to understand how imagePicker(), File(), FirebaseStorage.instance.ref(filepath).child(name) and putFile() works.

    Install and Settings

    1. Make sure you create firebase projects
    2. It's better you change the package name and bundle name for Android and iOS
    3. Make sure you have SHA key for android
    4. Make sure you enable google map api key
    5. Set the purchased code (if you purchased it)
    6. Facebook login issues

    SHA1 key may look like this

    SHA1 key

    Front end issues

    1. make sure that you have the below information in your pubspec.ymal file

      assets:
        - assets/
        - assets/images/
        - assets/icons/
    
      fonts:
        - family: Avenir
          fonts:
            - asset: assets/fonts/Avenir-Book.ttf
              weight: 400 # normal
        - family: Montserrat
          fonts:
            - asset: assets/fonts/Montserrat-Medium.ttf
              weight: 500
            - asset: assets/fonts/Montserrat-SemiBold.ttf
              weight: 600
        - family: Iconfont
          fonts:
            - asset: assets/fonts/iconfont.ttf

    Here we have the assets path and font type and their path metioned that's used in this chat app.

    Youtube Fans Fix This

    Courses


    Recommended posts


    Recent posts