Flutter Tutorial - Build A Chat App With Flutter & Firebase

[@HeyFlutter]

👉Join 12 Week Flutter Training: heyflutter.com 👉Join the WhatsApp Channel to get the latest news about Flutter & HeyFlutter: whatsapp.com/channel/0029VaDNCZtC1Fu8nL2vmw3f Source Code: github.com/JohannesMilke/firebase_chat_example

[@tentacle_sama3822]

Anything I wonder if I could do with Flutter Johannes has already done Thank you for these videos!

[@HeyFlutter]

Glad I could be of help, Thank you Tentacle_Sama :3! 😊

[@althafaralijaffarali1803]

Bro please create backend series. We are familiar with some UI's but backend is also important. Pls create a series on it 😅

[@web3tel]

why do you need backend when you have firebase?

[@kentthomas1045]

@@HeyFlutter I have three problems with firebase backend, no video I've seen have shown how to upload pictures for user profile to firebase and download later. Also, for forms for example multifield_form and dropdown buttons, I can't seem to understand how to upload the user choice to firebase.

[@beautifulanimals209]

✔️ Flutter Course Contents 👉 Dart Language 👉 Flutter Framework Core 👉 Navigation API 👉 State management 👉 Handling Input and Forms Validation 👉 API Client-Server Communication 👉 User authentication 👉 Professional Login/Register/Logout system 👉 Showing and Controlling Google Maps in Flutter App 👉 Using Location Based Services in Flutter Apps 👉 SQLite database 👉 Google Places API 👉 Accessing native device features like sensors to make powerful apps 👉 Upload & Store Images to server 👉 Adding beautiful animations 👉 How to connect Flutter App with Google Firebase 👉 Full stack Flutter Mobile applications with Google Firebase as backend 👉 Push Notifications - manual & automatic 👉 Real Time Chat 👉 Connecting Flutter app to AWS (Amazon Web Services) cloud 👉 Full stack Flutter App with AWS Amplify backend 👉 How to make AI, Data Science and Machine Learning based Apps using Flutter 👉 How to add Native Java or Kotlin code in Flutter App 👉 Deployment to app stores

[@thinkbig899]

@@beautifulanimals209 how to get this course

[@abhin2025]

@@beautifulanimals209 how to get this course

[@bijayaadhikari442]

This is more than 2 hours😇 video if you have to describe every aspect 😆. I am curious about your paid course plan of the future. Please share with us.

[@gulrukhkaur3124]

Excellent work sir, would like to collaborate with you someday, you are an exceelent coder, who helps explain code in simplest manner, thank you for existing:)

[@HeyFlutter]

Glad to hear that, Thank you Gulrukh kaur! 😊

[@balkhan619]

Hello Johannes, I was wondering if there was a particular reason you chose to build chat with Firestore instead of Realtime Database? Since Firestore considers the number of writes and reads and Realtime doesn't, and in a chat app the read and write operations are inevitably going to be in a large number, don't you think it would have been cost effective to use Realtime db instead? What limitations are there with Realtime db that made you choose Firestore instead? Thanks

[@Patrickus23]

Hey! How can we make to show the bubble message on top first instead of bottom? And how can we distinguish between you as a user and other users?

[@elprorio]

Hi, thanks for the tutorial! One thing I noticed is, that it is not possible to distinguish between the IdUser that is currently using the app and the IdUser of the user that the message is sent to. That makes it all unclear for me to be honest. Because at 13:24 you say that we pass in the user id of the user who us writing the message which isn't right at that point. Because we pass the user from the ChatPage down to NewMessageItem and get widget.user.idUser, so this isn't the userId of the one who is writing the message. Really confusing for me unless I did not see something...

[@petersvictor1141]

This is the same problem i'm havng with all the chat tutorials on KZbin, how can we build a chat app for user to user chat, how can we set a collection with with the two uid's and read and write data(chats) to them. It's really confusing. Please if you found a way, please contact me

[@hamzaerrahma9858]

Hi, i'm really stuck at the same level. i cannot understand the logic behind it exacty ike described above. If you come up with an explanation or a solution to this issue, could you please share. i'll be extremely appreciative. Thank you

[@masterknowledge3161]

Thanks Sir!

[@HeyFlutter]

You are welcome, Master Knowledge 😊

[@lakshaymeena171]

Hello Sir, I have a doubt that 1) If we need unique usernames for every person. 2) If we create a bio with interest and if someone searches another person, not by username but search bio's interest like music, Foodie, Delhi, etc. It will show the common persons by the same interest. (in alphabetical order) 3) How to make messages end to end encrypted. 4)If we send someone a message by username it will get a notification request to text with the person for security and privacy. 5)Add Contacts synchronization so that contacts using the same apps will appear in our app like WhatsApp and Telegram and we can send messages directly. Sir, Please create an app tutorial like that I am trying and trying to implement but not able to code correctly, I don't want to leave this otherwise it will demotivate me.

[@kanam8704]

Thanks Mate, just wonder how to make 1st message bubbles start from the top instead of the bottom

[@AbdulRafay-ho9rz]

Man where is the script for users and chats of cloud firestore ??. Btw excellent work man ,will buy your course anytime

[@HeyFlutter]

Great, Thank you Abdul Rafay!. Everything is stored in firebase. You can see it on your firebase console.

[@binyamsisay52]

Hey, great project thank you. I want to ask you how long this took you to finish?

[@binyamsisay52]

@@HeyFlutter Thanks for reaching in such a short time. How about the whole process including the design?

[@gryszy]

Hi Johannes, I have a question about the way you are storing all messages. After you send the message you push it to 'chats/RECEIVERID/messages'. I don't quit get how all messages would be stored under this url. What happens if the reciver sends a message to me, wouldn't that store it under chats/myid/messages? That way I would only be sotrig my messages, how would I access and display messages sent to me? Also, what happens if we have three people A, B and C. A sends a message to chats/B/messages and then C sends a message to B under chats/B/messages isn't that storing all messages under the same place in the database?

[@niladriraychaudhuri]

All you need is an unique id for the doc In messages_widget.dart: stream: FirebaseApi.getMessages(getGroupChatId(idUser,idPeer)), String getGroupChatId(idUser, idPeer){ var groupChatId; if (idUser.hashCode

[@web3tel]

Great tutorial. Just wondering how cost efficient is this way of working with firebase. After all firebase is not free :)

[@jonathanmunday9210]

@Johannes Milke could you make a video on sending an image from Firebase to the chat (without accessing gallery) just sending straight from Firebase? I also think quite a few people would watch it

[@jonathanmunday9210]

I have images in my FireStorage, yes I can see the string and I know they end in jpg etc. I don't know how to send them to the other user in my Chat app, and so that user can see the image sent just like they see my text message. Simplified, I don't know how to send an image from Firebasestorage to my chat app using stream. (I don't want to use the stream plugin)

[@deepL0]

I like ur tutorials :)

[@MuhammadUsman-ju8wg]

Best video ever ❤️

[@HeyFlutter]

Thanks, Muhammad Usman! 🙂

[@gaurigore6097]

Hey ! Make a video on flutter web live chat box

[@priyanshparmar819]

how to paginate messages using stream builder? so we don't read all messages at one time

[@eNONO-ot4zh]

I am also looking

[@priyanshparmar819]

@@eNONO-ot4zh filledstacks provided solution for that but it not much clear for me

[@priyanshparmar819]

@@eNONO-ot4zh here is link for that kzbin.info/www/bejne/Z5TLh2hmeZp1jLc

[@priyanshparmar819]

@@HeyFlutter in your tutorial you are paginating future but what i am asking is pagination using stream so we don't lose real-timeness and we don't fetch all documents at same time..hope i am making sense

[@eNONO-ot4zh]

@@priyanshparmar819 i try it. It working when i have one stream. In my case, i want paginate anytime thé stream of MessageModel for any discussions😔

[@jonathanmunday9210]

I watched a video earlier on setting up google authentication and made a working app because of it. Now I want to also make it that i can message in the app using this video however cloud_firestore and Google_sign_in clash, so i can't follow. Is there a way to send messages/images using both?

[@jonathanmunday9210]

@@HeyFlutter You are an absolute legend, all working now. If I ever become rich and famous through my apps I owe you $1million. My next question is, how do link your Google Auth users/email users to the chat? (from the previous video I followed from you) fyi I also make KZbin videos and I tag you in my description, spread your channel a bit because its fantastic!

[@toxaq]

Is the search option supposed to replace the first user in the list? I don’t think you needed the else.

[@HeyFlutter]

Thank You toxaq! Follow this link: medium.com/codechai/implementing-search-in-flutter-17dc5aa72018 I hope you will get your answer 🙂

[@hamzaerrahma9858]

Hi , great work bro , did u integrat notification in this project ?

[@hamzaerrahma9858]

@@HeyFlutter Hi brother , I finish this tuto and I want to add notification when the receiver receives a msg , any recommendation for notification tuto ? I'll be extremely appreciative. Thank you

[@nonofokokotetso862]

a very big thank you to you sir

[@karemzky]

in FirebaseApi class when i write .snapshots().transform(Utils.transformer(User.fromJson(json))); i got the following The argument type 'StreamTransformer' can't be assigned to the parameter type 'StreamTransformer

[@karemzky]

@@HeyFlutter thanks for kindly response but i run the app and got this in chats_page (some thing went wrong try later) '_StreamHandlerTransformer' is not a subtype of type 'List' in type cast this my getusers function static Stream getUsers() => FirebaseFirestore.instance .collection('users') .orderBy(UserField.lastMessageTime, descending: true) .snapshots().map((event) => Utils.transformer((json ) => User.fromJson(json)) as List);

[@karemzky]

class Utils { static StreamTransformer transformer( T Function(Map json) fromJson) => StreamTransformer.fromHandlers( handleData: (QuerySnapshot data, EventSink sink) { final snaps = data.docs.map((doc) => doc.data()).toList(); //final users = snaps.map(( json) => fromJson(json )).toList(); // first error The argument type 'Object?' can't be assigned to the parameter type 'Map final users = snaps.map(( json) => fromJson(json as Map )).toList(); sink.add(users); }, );

[@aravindma2209]

@@karemzky do it like this: .transform(Utils.transformer(User.fromJson) as StreamTransformer);

[@stvhrsdev9103]

what the collection path not allready created? how do u catch bad state no element?

[@mithrigs5325]

pls make video signal source (github) and admin panel

[@dylandenha]

Hey quick question, how would you set up code to set up a notification when someone messages you?

[@maurocfrj]

hi johannes does this code work with the null safety update? does this code works with the recent FireBase updates?

[@vinaychauhan4918]

Plz make a video how to design a database for chat app

[@MuhammadUsman-ju8wg]

Bro please create ebook app with both uI and backend

[@HeyFlutter]

Thanks for the idea Muhammad Usman 😀, i have added it in my list of future videos

[@battleGroundAce832]

how to update firebase when new user is added in our users class?? or add new user in users table in firebase

[@jgluckly9749]

Thank you, great video, come on

[@stunnaman8803]

Is this video in playlist?

[@kms12317]

How to transfer database from cloud to device storage Or how to make the functionality of watsapp from storing and backup data?

[@kms12317]

This site can't be reached

[@MoezHamza]

Hello Johannes ! i got an error in the Transformer function "The argument type 'Object?' can't be assigned to the parameter type 'Map'." in the FromJson(json) any help ?

[@HeyFlutter]

Thank You Moez Hamza! Follow this link: stackoverflow.com/questions/63597313/the-argument-type-mapstring-dynamic-function-cant-be-assigned-to-the-par I hope you will get your answer 🙂

[@mohamedsalehelshazly]

what is the Rules of firestore pls

[@gastonalejandrotrivi2944]

After a flood of screechy voice coding tutos your silky smooth voice is welcome.

[@sk10120]

Hi Can we achieve chat between two different apps(client n admin) with same firebase following this tutorial?

[@HeyFlutter]

Thank You Amina Shiyana! Follow this link: medium.com/flutter-community/building-a-chat-app-with-flutter-and-firebase-from-scratch-9eaa7f41782e I hope you will get your answer 🙂

[@sk10120]

@@HeyFlutter thankyou. But this again is within the same app right? Or am i missing something?

[@vansaber]

How do I set the firebase current user ?

[@lakshaymeena6425]

Hello sir please make a video on omegle colne with interest feature using flutter and firebase.

[@eNONO-ot4zh]

Thank u. but why you not use pagination here ?

[@eNONO-ot4zh]

@@HeyFlutter the pagination with stream between and document is very different. I think it doesn't work the same way. beacause Stream is the real time.

[@hamzaerrahma9858]

I have developed simple chat app, with flutter and firebase and i want to integrate this chat app to my wordpress web site is there any approach to do this integration ?

[@hamzaerrahma9858]

@@HeyFlutter thanks u are the best

[@jimcomccabe3]

if you have images as chat messages and you want to show new incoming messages , the stream builder will reload the image messages as well and that means that with every new incoming chat message the image message will reload (thus showing a circular progress indicator). how do you cope with this?

[@HeyFlutter]

Thank You jimcomccabe3! Follow this link: medium.com/@duytq94/flutter-chat-app-extended-push-notification-messages-a26c669f4675 I hope you will get your answer 🙂

[@jimcomccabe3]

@@HeyFlutter do you have a video for this? And how is this going to fix this problem? messaging is used for notifications as i know

[@matheusfigueredo7543]

I'm using message send date to order the messages How to handle the problem when users has different timezone? The messages order gonna be confused

[@HeyFlutter]

Thank You Matheus Figueredo! Follow this link: stackoverflow.com/questions/57584317/messages-on-flutter-chat-app-not-in-proper-order/61517928#61517928 I hope you will get your answer 🙂

[@matheusfigueredo7543]

@@HeyFlutter I forgot to tell you but the solution in the link works perfectly, i'm using FieldValue.serverTimestamp() as chat send messages date. Thanks!

[@Englishwithodo]

I saw many videos about chat app, but none of them show how to dispaly to every message the time when the message was sent. If the user cannot know when the message was sent I think the chat is too poor. All real chats like whatsapp , messenger display the time under every message

[@Englishwithodo]

@@HeyFlutter I am looking forward to that

[@gabrielhuertas9539]

is this real time chat?

[@Elayoubi]

bro please can you make tutorial how to create voice chat room with flutter please like yalla chat and more

[@Elayoubi]

@@HeyFlutter thank you bro ❤️

[@mauricioperezmoggle]

Great video Johannes!! I subscribed inmediately Could you please show us how to get the users from the firebase collection of users instead of getting them from users.dart. thanks

[@trippybunn]

how can i upload photos and videos on the chat?

[@HeyFlutter]

Thank You OrenFstr! Follow this link: adityadroid.medium.com/60-days-of-flutter-building-a-messenger-day-36-38-chat-attachments-seamlessly-upload-and-8d334a4e52b5 I hope you will get your answer 🙂

[@ArabCodeAcademy-01]

I expect my app to have at least 100,000 followers and I want to set up chat rooms do i work with 1 realtime firebase 2 firestore firebase I want the cheapest and fastest thing what to do

[@ArabCodeAcademy-01]

@@HeyFlutter Thank you , we wait palylist for u explain it 🙂

[@haroonrehman8156]

Does it have group chat functionality?

[@HeyFlutter]

Yes, @haroonrehman8156 🙂

[@haroonrehman8156]

@@HeyFlutter Thanks then it should help me.

[@modulusmod4111]

I have made a flutter chat application, its size is 152 MB, Is it normal with flutter ?

[@modulusmod4111]

@@HeyFlutter Thanks for showing me the right way

[@humancyyborg]

bookmark 17:19

[@AlfaSanga]

Thanks for nice tutorial Can you share with us on how to send ducument(pdf) like in whatsapp, Thanks.

[@AlfaSanga]

@@web3tel read well

[@AlfaSanga]

@@HeyFlutter thanks

[@mahmoudalmas8277]

thank you for this great course ! everything work fin for me except transformer part, I understand it well but I am getting an error say: _StreamHandlerTransformer' is not a subtype of type 'StreamTransformer' i appreciate your help

[@yannickkaufmann7201]

I have got the same problem. Have you already figured it out?

[@viking148]

Anybody figured this out? I am stuck here as well

[@yannickkaufmann7201]

I have not found a proper solution yet. But I found out that the error is linked to the newer versions of the dependencies. To bypass the error, take: firebase_core: ^0.5.0+1 cloud_firestore: ^0.14.1+3 But this can't be the solution I guess. If anyone has figured it out, tell us so.

[@brunotsane2242]

me to! I got the same message

[@brunotsane2242]

@@yannickkaufmann7201 try this .transform(Utils.transformer(LocalUser.fromJson) as StreamTransformer);

[@mohammedislam733]

I can't get data in last time message

[@mohammedislam733]

@@HeyFlutter thanks , I'm learning flutter and firebase , I'm trying to build chat app . My problem is when I'm storing messages in Firestore . Firestore is saving those messages in a random order . I have 2 fields text and sender . When I'm register and go to chat screen , the messages show up in a random order . And I can't fix it

[@xenos7876]

Can this work with realtime database instead of firestore?

[@xenos7876]

@@HeyFlutter ok thanks for the reply

[@Fuhrry]

@@xenos7876 it does

[@xenos7876]

@@Fuhrry i don't think it does though i try it. Firestore and realtime database have too many incompatible function

[@Fuhrry]

@@xenos7876 oh so firestore is best?

[@cenkbel4082]

hello, where can we watch full course?

[@hamzalhb724]

update == set

[@foodi8991]

both the sender and receiver messages fall on the same side can someone help?

[@HeyFlutter]

Thank You Food & I! Follow this link: medium.com/flutter-community/building-a-chat-app-with-flutter-and-firebase-from-scratch-9eaa7f41782e I hope you will get your answer 🙂

[@snehamohan2240]

where is the script?

[@HeyFlutter]

Hey, sneha mohan 🙂 script can have several meanings, but according to programmers it's a code that is capable of performing something.

[@Heizungsmechaniker]

where are you from?

[@Heizungsmechaniker]

@@HeyFlutter XD dachte ich mir. Habe ich am Akzent gehört 😉😂 Finde es btw cool das du Tutorials machst da es echt nicht viele deutsche Tutorials von Flutter gibt 👌🏼

[@zorab0011]

❤❤❤

[@HeyFlutter]

Thanks, zorab00! 🙂

[@muhammadashfaq3197]

bro where is the script?

[@muhammadashfaq3197]

@@HeyFlutter thanks