Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Master Flutter App Dev By Building A real Time Chat App

Name: Master Flutter App Dev By Building A real Time Chat App
Rating: 4.4 (41 reviews)

Complete Flutter Firebase Chat App

Created byDastagir Ahmed

Last updated 12/2024

English

English [Auto],

What you'll learn

Learn the most basics to advanced knowledge how to make a chatting app and work with flutter firebase
Intermediate to advanced knowledge of Flutter Framework
Intermediate to advanced knowledge of Firebase
How to make advanced query of Firebase
How to design UI in Flutter Framework
Learn the Getx State Management System
Learn about Google, Apple and Facebook Login
Learn how to send notification to users using firebase

Course content

19 sections • 79 lectures • 12h 29m total length

Introduction demo about the app2:32
Here you will see what we the app will look like once you are done building. This show how smooth it is to chat using firebase in Flutter.

Work on the welcome screen3:43
Start working on the welcome screen
Welcome controller binding and routing8:54
Get the complete code from here https://www.dbestech.com/flutter_firebase_google.zip
Set up the route in main.dart file1:35
Welcome page show three images13:00
Design a welcome page with three images using a page view and a dot indicator plugin. Use a stack and screen util for responsive, asset-based visuals.
Work on the slides indicator and bind dots with the slides12:14

Heads up about Google Sign in3:28
This is to advice you when you try Google sign. You must remember this part.
Work on sing in button and create method10:46
Sign in page and logo9:14
Work on Sign in controller and Google login button12:40
Work on Google login and finish9:24
Save user data to firestore database14:37
Save user emails in firebase authentication5:30
Middleware and application page part 119:49
Middleware and application page part 28:16

Understand how app works with database collection and documents11:18
Read firebase data and show on contact page part 17:10
Read firebase data and show on contact page part 29:39
Fetch all users from Firebase Firestore, excluding the current user, populate an observable contact list, and display them on the contact page through the controller bindings.
Read firebase data and show on contact page part 39:40
Read firebase data and show on contact page part 411:36
Read firebase data and show on contact page part 515:39
Read firebase data and show on contact page part 64:24
Must watch and understand the goChat algorithm14:51

Work on chat page and controller part 19:26
Work on chat page and controller part 28:13
Grab route parameters in the chat controller on init and map them to dock id, uid, and name. Implement image builder with fallbacks and error widgets for avatars.
Work on chat page and controller part 310:33
Set up the chat page and controller, implement text input and a tappable row, and send messages to Firebase Firestore using a MSG Content model with uid and timestamp.
Work on chat page and chat controller part 411:06
Work on chat page and chat controller part 56:23
Work on chat page and controller part 621:22
Work on chat page and chat controller send message part 79:37
Work on chat page and controller upload file part 813:59
Build chat left item and chat list on chat page, then add a bottom sheet image picker (gallery or camera) and upload the file via chat controller to Firebase storage.
Better understanding of firebase document changes (skippable)5:58
Chat Controller must include doc_id3:15

Message page upload image part 110:20
Explore image uploads in a real-time chat app using Flutter and Firebase Storage, including file naming, upload progression, getting the image URL, and handling gallery and camera permissions.
Message page and send image part 28:42
Message page and how image upload works11:36
Message page and get the history chat part 38:12
Message page and message list part 421:00
Message page and show other's message part 519:14
Message page and sending messages 614:34
Better understanding of Cloud Storage Reference and Child (skippable, no coding)2:16

Requirements

Basic of Flutter Framework
A bit of programming knowledge
Flutter installed and configured

Description

You will learn here how to master firebase and flutter by building a real time chat app. It's a course for building iOS and Android app using Flutter.

Here I have covered how to build Flutter UI to advanced Flutter concept. But this tutorial mostly focuses on how to build a strong app using firebase.

We talked a lot about firebase data storage and how to retrieve them and show on the app. We used a lot of complex queries and conditions to work with. You will learn how to use where() clause, double where() and withConverter() and conditional check. You will also learn about complex processing and listening data update and document updates.

We also showed step by step how to examine on the data. At the end of the course you will get the complete source and master flutter and firebase real time chat app building.

There are fifty three chapters and each chapter deals with a different topic. And more chapters would be added in future.

Screen Features

1. Launch screen

You will see it has screen with three slides. The last one lets 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. We will also do Apple account 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

We will have notification bar to see when others send message

Who this course is for:

Frontend Flutter developers and backend programmers want to learn Firebase
Want to master the basics of Chatting app and Firebase database structure

Master Flutter App Dev By Building A real Time Chat App

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 3min

App set up2 lectures • 11min

Run on device1 lecture • 2min

Work on UI and Controller5 lectures • 39min

Sign in Page UI and Controller9 lectures • 1hr 34min

Basic understanding of designing firebase database (no coding necessary here)1 lecture • 9min

Read firebase data8 lectures • 1hr 24min

Chat page and controller10 lectures • 1hr 40min

Message page upload image and get history data8 lectures • 1hr 36min

User location1 lecture • 11min

Requirements

Description

Who this course is for: