Chat App in Flutter and Firebase | Tutorial for Beginners to Advance | Android & iOS (Latest)
ฝัง
- เผยแพร่เมื่อ 5 ส.ค. 2024
- Chat App in Flutter and Firebase | Tutorial for Beginners to Advance | Android & iOS (Latest)
Welcome to the master class of flutter and firebase in which we will create a chat app from scratch. Today you're going to learn the best practices when it comes to enabling firebase for your flutter project. This tutorial is created using the latest flutter tutorial that is available while creating this video so you are provided with the best-in-class updated methods for authenticating the user and also making crud operations.
👇 The things you are going to know are:
1. Email/Password Authentication
2. CRUD operation in Firebase
3. Error Handling
4. Stream Builder Method
5. Search Method and Other Firebase Queries.
📗 Course Outline:
00:00 App Showcase
00:25 Introduction
04:19 New Flutter Project
06:05 Adding Firebase - Android Platform
14:23 Adding Firebase - iOS Platform
16:08 Adding Firebase - Web Version
16:26 Making Firebase work on All Platforms
23:20 Guideline for iOS Simulator
25:47 Structuring Folders
27:07 Handling signed-in users
33:40 Login Page - UI Design
56:49 Register Page - UI Design
01:00:40 Authentication Coding - Registering User
01:05:32 Firebase Firestore Structure Showcase
01:23:01 Debugging Shared Preference Problem
01:26:17 Authentication Coding - Login Method
01:34:16 Home Screen - UI Design
01:48:06 Profile Page
01:55:40 Home Screen - Coding it up
02:05:42 Creating Group - Code
02:36:05 Designing Chat Page
02:43:17 Group Info Page
02:58:35 Search Page
03:35:15 Chat Screen - Finishing it up
► Source Code: github.com/backslashflutter/g...
Other Links:
Image assets: bit.ly/3zyG3bx
RegEx Expression: Check Source code
This chat app in flutter and firebase is a tutorial for beginners to advance so as to run the app on android, ios, and web platforms.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
► Join this channel to get access to perks:
/ @backslashflutter
🔔 Get updated with my projects🔔
Follow me on Github: github.com/backslashflutter
#chatapp #firebase #flutter
🔥 Subscribe for more:
/ backslashflutter
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
If this helps make sure to share it with friends and colleagues who will benefit from this
Have questions/queries? 💬 Comment below I will be happy to help
►For the 3D intro, I'm using Rotato: rotato.xyz
IG Username: @backslashflutter
Reddit Username : @backslashflutter
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
🔗OTHER:
PLAYLIST:
1. FLUTTER AND FIREBASE
LINK :bit.ly/35Uq7Ba
2. FLUTTER SPEEDCODE
LINK: bit.ly/3sFDy1O
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
OTHER VIDEO:
Complete Flutter Installation & Setup Tutorial For App Development on macOS (Latest)
• Complete Flutter Insta...
ChatBot App In Flutter | Python Backend With Flutter | Heroku Server (Full Explanation)
• ChatBot App In Flutter...
About Flutter:
Flutter is an open-source UI software development kit created by Google. It is used to develop cross-platform applications for Android, iOS, Linux, Mac, Windows, Google Fuchsia, and the web from a single codebase. The first version of Flutter was known as codename "Sky" and ran on the Android operating system.
THANKS FOR LOVE AND SUPPORT💪2
![[Live] : ONE FIGHT NIGHT 24 “จาร์เร็ด vs กุสตาโว”](http://i.ytimg.com/vi/ENNA-fsT67c/mqdefault.jpg)
For anyone who is having issues with SHA CREATION, Watch this 👇
th-cam.com/video/wGOTwojezy8/w-d-xo.html
I have an additional question, you mentioned at 3:38:25, that you could do he implemenation process in another video right?
Could you give broad instructions?
@@thankyoubackslash ada yang tidak dapat dipisahkan dengan pengalihan hak dan tanggung untuk operasional perusahaan ini didirikan di versi pro terus meningkat dari
hay
hay
this helped, thanks
i have 4day am watching this tutorial and i feel good because every day i learn somthing and this is make me more love programming so thanks you so much i appreciate your effort to prepare this cours
thanks for watching this bro
I cannot overstate how immensely useful this has been, thank you so much for providing such quality content for free!
You're very welcome!
I would prefer if you would explain the things that you are using instead of directly using things like AlertDialog, Navigator, StreamBuilder, etc as this is a course for beginners.
Thank you so much
thank you. Although I don't speak English I was able to do it.
It is really amazing video for learning flutter and firebase. Thank you so much for this video.🔥🔥
You are most welcome
Thanks for sharing your knowlege
Much appreciated for this awesome tutorial and hope you could extend this tutorial to include features for adding images, emoji and audio in the chat message.
yes for sure. I will do that.
@@backslashflutter that's great and thank you so much for your effort and hard work. I am beginner on Flutter & Dart and your tutorials are great help in my learning journey.
@@leonlim1625 Its insanely good for us. What other videos did ou watch Leon? I am curious (in your journey to learn)
@@thankyoubackslash There are quite a few good flutter channels on YT that I follow i.e. Reso Coder, dbestech, Max on Flutter, Mitch Koko just to name a few.
@@leonlim1625 Thanks a lot, do you know if any of them made a video about how to integrate a map in your app? and especially ow to have specific nodes/points in the map that can be clickable and have pop up comes from that etc?
Hey there, @backslash! 🦋
I must say, your Flutter tutorial was simply "flutterific!" Your explanation was as smooth as a well-organized StatefulWidget. I really liked how you see the on hover docs to rectify yourself at 42:21 😄
Kudos on creating such an informative and entertaining tutorial. Looking forward to more of your content, and maybe even a Flutter blooper reel? 😉👏
Keep up the great work and happy coding! 🚀
hahaha, thanks for watching mate. Really appreciate this message and the time you put in to stand out from rest. Will get with more videos soon!
My question is my messages tile is not building accordingly, it stacks each person messages on either sides. it doesnt sandwitch the chats . can anone help me out thanks
I mean architecture is a mess but its still a great flutter tutorial, i wanted to learn flutter and i did. Thanks!
Glad you liked it!
Hey, thanks for the tutorial but I have a question.
In the search page inside the build method you're calling groupList() which then calls groupTile() which then calls joinedOrNot(). Inside this joinedOrNot() function you're calling setState() which causes build() to be run. Isn't this an infinite loop?
YeahBoi! nice tutorial I hope you continue with adding profiles and group images and also Push Notifications that would be wonderful, because of you tutorial I love Flutter aim kinda new but learned a lot through this whole video
yes will do this soon
I searched in TH-cam of how to create and there you are.. thanks for helping me to learn coding to create chat app
Happy to help
Thank you so much, Appreciate it.
thanks for watching
Loved ur video man u r really doing awesome work ☺️
Ok thanks
Really?
Great job 👏 👍... thanks so much 🙏
Thank you too!
Thank you so so much bro, I am submitting a modified version of this for my clg project
All the best
I just started watching this video...and I am really looking forward to it by gain some knowledge about flutter Development..... let's see...😊
Welcome aboard!
Thanks alot sir much much more power to you. A very very helpful tutorial💥💥💥
Glad it helped
Thank you.
Thank you soo much! This is really helpful!!!
Glad it was helpful!
Youre a God sent! This is great also very clean
made my day❤️✌️
hey were you able to implement the search functionality
Man you are amazing... Really!!!!!!!!!!
thanks for watching
Great work bro..
It's really important video thanks a lot
Most welcome and thanks for still being the part of community
Most time I was having trouble getting connecting to firebase but your videos helped me getting out of this...thanks a lot
@@dhananjaypatil2355 ^^
Really loved this tutorial and is really helpful. Can you please do a tutorial for adding images.
sure mate
I like this tutorial, my English is not good but I can understand afew, A tutorial of Flutter WEP site will be welcome
thankks for watching
new subscriber here, I'll be adding this tutorial to my list
thanks for watching
Thankyou man 🖤🖤
thanks for watching!
Drop the next video request here in the comment section. Subscribe now!!!
Sir Apne kha tha mai video Bnao ga responsive layout wala
Wo kb aenge
Ok
@@khubaibirfan9215 will do it soon
Sir, plz make a complete tutorial video in flutter Dart like this app..
th-cam.com/play/PLnfB3OWST3K3lEQmiRR6LhbqdgzTEy8_B.html
Thanks alot bro 💪
Thanks for watching mate!
What an amazing work! I did learn a lot. Pls do part 2 for this chatapp, advance it
Yes sure, will work over that part 2 thing. Thanks for watching
@@backslashflutter cool, I can't wait to see it
expecting please
@@backslashflutter
nice progress 🔥
next hope using with provider
🤞
Hi, Please Help.
I skipped the part Guideline for iOS Simulator to implement. Will it affect the project? As im only concentrating in the android I skipped that part
thank you so much
thanks for watching mate!
what if I want to add read/write rights to members where members who can cause nuisance can be given read access to only read messages sent to group chat but cannot write messages.
Hey, thanks for the amazing tutorial!
I tried it out and on my machine it works perfectly, however when deploying it to firebase, adding new users does not show new users in the app. Are there any important things to consider when deploying the app?
you mean deploying app like the release variant for the app? If everything works on the normal simualtor then it should work on the real device too mate.
What is your suggestion extension. I loved it. By the way. Great and clear video. Thx a lot
suggestion extension? I mean can you let me know a little bit about this
By the way thanks for your kind words, I am working on improving the quality of my videos and hope you guys love it :)
@@backslashflutter i mean you write something and ide suggest something to complete.
Tabnine extension for autocompletion. You can search in vscode extension store for tabnine and its free
Your video is so good i got many errors while working but the github repo helped me only thing that didnt helped me was your speed, Aap bohot teejise bolte h and bohot saari chisse faslty samjaya h jo thoda mushkil kardeta h samjne ko , so when you make a video like these again please keep this in mind thankyou for such a beautiful flutter project
this has mixed thoughts mate, some comment over talking a bit faster some comment over minimizing the speed. Will take this into consideration from next videos!
give me github link
This is a very good tutorial and i followed till the end. My question is my messages tile is not building accordingly, it stacks each person messages on either sides. it doesnt sandwitch the chats . can anone help me out
Hello sir!!
I am watching the video you follow to understand flutter better
But the thing is I don't have podfile folder in ios folder?
I use flutter latest version 3.10.6 does it affect the app in this video?
Besides, I'm using android, so I don't use ios, so I can test on android. Thank you
Please answer. Thank you so much. Love/
Wallah you're a legend
thanks for watching
Impressive bro please ad video call option in this second part & one to one chat.
sure mate
Hi ı have a question .Are there any differences between firebase CLI and what you did at the beginning of the video( ı mean entegration of android , ıos and web manually ) ?
firebase CLI is an command line interface which helps in setting up firebase hosting and other firebase functions to our project.
In the beginning of video,. we have linked firebase to our android,ios and web apps. This is totally different from using firebase CLI
@@backslashflutter thank you very much
Anyone please tell how to create that catchy app promo video having the various app screens with some animations ( in starting of the video)
Great work my friend and you have all the respect for this wonderful effort, but I have a question please what is the name of the extension that predicts the code you want to write ?
IntelliJ
thanks for watching, but will suggest to not use that extension because utlimately i think if you type the keystroke yourself you have your way for a better programmer.
i tried to make a apk file of the same...but firebase is not working with apk file only runs when in debug mode...is there any permissions be provided in Androidmanifest or some other file...how can I fix this??
Thank you, learnt a lot through this video.
Glad it was helpful!
thank you
thanks for watching
Very well explained.
Respect for you.
But i am having problem in passing data to message tile
It is not showing.
do share it to me on email, will be there to help you backslash.flutter@gmail.com
superb
Thanks 🤗
great tutorial! if i were to add a notification, perhaps a local notification that gets triggered when i get a message do i need a developer account for that ?
so the thing is you need to enable gogle clooud messaging for that on the firebase side, and on the flutter app frontend you need to have code for the implementaiton using: flutter_local_notification and firebase_messaging package.
What state manager are you using?
Use Provider or not
With this accent I know that I am realy watching programming tutorial 🤓🤓
i will accept this as a compliment
@@backslashflutter obviously
Great
thanks for watching
Thank you for the nice video. Is it possible to make a flow where admin can approve/decline a user befor letting them join the group?
Yes but will create that in future
@@backslashflutter Thanks :-)
Btw. Can you help me fix the overflow error in the hero widget?
You can become part of our patreon and there we can discuss this ❤️ patreon.com/backslashflutter
what extension do you use for the auto completition of your statements in vs code
will suggest you to not use any of these things. This will increase your keystroke completion when you do it without any extensions. I myself removed it.
Yes
I am university student and I will present the upcoming days a presentation. My presentation will be about an chat app that I have developed by using flutter and firebase
Hello thank you very much for the tutorial! Can you also make a facebook or a twitter fullstack flutter clone with a chat app embedded, please ?
yes i am thinking of going with instagram first and then later shifting to some other platforms.
Love you man. Nice approach of teaching step by step. Appreciated.
thanks for watching
Do I need to learn CSS, JS before jumping into dart? Thanks
no you dont, because it's different technology, maybe learn basic of widget first
thanks dzaki for replying to comments and helping this community
with the command "arch -x86_64 pod install" I get an error -> pod: Bad CPU type in executable........
this is only for m1 users, for normal users it is pod install
Please do make a video on uploading user images to Firebase for this ChatApp.
ok sure, will extend this part 1 of chat app.
Can you please disable the quick documentation next time, it's hard to follow with the big documentation popup. Otherwise very nice
ok in vs code na? will do that for you guys
Can you make a Part2 showing how to add Push Notification to this project ?
Configure Onesignal on your project. Make sure each user generates his players ID (phone ID generated by OneSignal) while logging the app.
Then store these players ID in each user table. Then send notification using http to a single player ID while sending a message.
The receiver will get a notification each time he receives a message
the better method would be the firebase cloud messaging altough. will do part 2 soon
also by clicking on groups of drawer it is showing this error=> _type is not a subtype of widget
Please clone the repo
Good tutorial but please increase the size of the characters......I mean the fonts of ur written codes
ok sure
Can you do a tutorial adding an option to upload pictures?
hello i am really thankful for this tutorial but i have a problem where sometimes a user cannot join a group even though they are still not in it.when i press the join now button it does nothing.
edit: i found the problem. it seems that after create one group whenever i create another group, firestore cant assign a groupId. any way to fix this?
maybe check your code mate. firebase automatically generates the document id for all the groups that get created. You can go to my github: github.com/backslashflutter and there you can search chat app and you will get the code for this particular video series.
By the way, thanks for watching,
which font use on vs.code bro
bro i'm getting an error by adding list tile 2:24:50 it's showing range error 0...68
and also showing The method '[ ]' was called on null
Receiver :null
tried calling: [ ]("groups")
bro please help me 😢🙏
bro i had a doubt like u installed pod file for iOS likewise should we do anything else for android ??
for android, simply flutter pub get works.
Im getting errors as
A problem occurred evaluating project ':app'
No signature of method built
???? Asap help
go and check the sha signature video in pinned comment
hello is this just IU and firebase part of application? (can we chat with real users after creating this app)
bruh, in future will definitely work on this
How to get Wallet balance, Display user wallet balance on the home page on the home page on the right corner always Wallet balance must be picked from fire base of user table
Just a question, Is it possible to use this in creating a web chat app?
will suggest to use other modern technologies for web mate.
Hey Backslash Flutter I am currently watching your video and I'm at timeline 35:35. I'm really getting a lot from this video. I just want to ask one thing: Is this app responsive?
will suggest not to go with web variant, rest everything works on different screen sizes. You can check it too
@@backslashflutter Okey
Sir the validations are not working and it is giving this error. Plz help
error:flutter/runtime/dart_vm_initializer.cc(41)] unhandled exception: null check operator used on a null value
you have to provide " key: formKey" inside of Form(), otherwise, it throw this exception.
thanks for help ashikacharya
thanks for help ashikacharya
can you make a part 2 where you show us how to push up notifcation whenever there is a message ?
thanks for watching, will try to add more features to this in future.
Hello, can you make a video explaining how to build an iOS apple with github for people who dont have a mac?
Quite not possible mate as far as i know
Edit: i saw a tool online will go through it and let you know
@@backslashflutter I think it coul be posible if I emulate iOS with virtual box what do you think? As for the other tool I think its a website? A third solution could be githuub gitlab something
memberList is not displaying in group information page😢
Is it possible to export/download our chat with someone/single user or group data using flutter?
you mean something like whatsapp do? .json format? Quite interesting. If you try to achieve this with cloud functions.
superbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb hai bhai video
thanks for watching
Bad state: cannot get a field on a DocumentSnapshotPlatform which does not exist.The relevant error-causing widget was
StreamBuilder . How can I solve this?
You solve this error??
sorry for late reply, is this issue still exists?
the search page functionality is not working for me I cross check the code two times and even I copy pasted from your repo also but on clicking on the search icon instead of displaying the message hello or something else it keeps showing the circular progress indicator bar please help at 3:11:00
please help bro don't know where im doing wrong
make vidmate/snaptube clone videos
Sir please make similar video on music player application
sure mate
bhai photo share karne ka bhi option dal do na
Hello, Could you give broad instructions on how to launch this app into appstore now?
the steps are really length for appstore deployment. PLease see the official doc for flutter mate.
Hey man how could we get the message from contacts that are pre existing in the app ?
store them. Will be creating a video soon regarding this
tem algum incremento a mais nesse codigo?
tipo apagar mensagem e notificação?
ainda não companheiro
hello, I try to run this code this system, i have windows but i have some errors. please reply as soon as possible.
what eerrors mate. please check the source code too
github.com/backslashflutter/group_chatapp_flutter_firebase
2:03:17 No need to nest so much 'if else' statements, just make one 'if else' statement with multiple boolean expressions separated with '&&'.
yes this code i wrote was in earlier phase of my flutter journey, will make better code soon
I want to contibute to this
1:34:07
Exception has occurred.
StateError (Bad state: field does not exist within the DocumentSnapshotPlatform)
please help me how to handle this error.
double check your firebase variables and document variables, they have to be the same:
if you called it userName in firebase, then call it "userName" in code
thanks for helping the community !!
hey can you please continue this app also do for the profile photo.
yes will extend this soon
In starting while checking sharedpreference key , on debugging it neither showing login page nor homepage , it showing white screen and after hot reloading it showing black screen plz help me to figure it out
will suggest you to go through github and search this chat app repo.
Github: github.com/backslashflutter
W/System (10091): Ignoring header X-Firebase-Locale because its value was null.
Sir i have an issue with this on registering Please can u help
but i can run with chrome cant run with the my android emulator pliz i follow your tutorial for a long time and fix some of my trouble but i cant fix this one please help
Thank you
is this issue still present?
when I try to register and login I got error "GIVEN STRING IS EMPTY OR NULL" pls help me
at what place you are getting it mate? You can check the github.com/backslashflutter for this project final code.