Build Chat App without Coding | FlutterFlow Chat App Tutorial
HTML-код
- Опубликовано: 11 янв 2023
- In this video, we'll see how to build a complete Chat App using FlutterFlow & Firebase. We'll use all the free features to develop this app. After watching this video, you'll be able to build a chat free of cost.
*Note - There are some bugs present in this app. It will take too much time to fix, and the video will be too long. Still, the video is long enough.
📙 In this video, you'll learn :
✓ FlutterFlow Search
✓ FlutterFlow Filter Data
✓ FlutterFlow Back-end
✓ Flutter UI Design
App Preview - app.flutterflow.io/share/tru-...
Clone this app - amsarkar.gumroad.com/l/truchat
💜 Love what we do, Buy Me a Coffee :
✓ www.buymeacoffee.com/amsarkar
Thanks for watching!
Please like, share, and subscribe for more videos! 
Наука
if my built this app more slowly and with your voice then it would be helpful for us and we could understand the things that you were showing...
Thank you for this!!! I looked so much for a decent tutorial that showed how to build chat in depth. This is the only one.
Thanks bud. I have been asking tons of people to make this and your the only person that has done it and its way better then the other vids I've seen
Nice tutorial... Now I'm going to develop my own app to chat with my gf 😜
😂😂
Bro work kar rahi hai kya
Thanks mate, was looking for this!
This is really interesting. I want to launch a messaging app and this has been a great help.
Have you worked out a way to use infinite scroll in these lists or searches that also update with new additions? In this setup, if you have 5000 users, just one user on that search page looking for users would cost 10,000 reads instantly (one for the normal list, one for the search list, as far as I know conditional visibility does not stop the query). Times that by how many users look at this page, times how many times in a day.... Same on the chat pages if you have a lot of messages. The chat especially gets annoying cos infinite scroll lists do not update with additions.
this is awesome!
Thank you for the video. When a message is sent, the listview does not refresh. How did you avoid this problem?
Excellent video 👏👏👏 You gained another subscriber.
Thank you ❤️
bro youre querrying the entire collection and then putting conditional visibility on it. wont it make for a low efficiency ? the querry will fetch the entire chats collection before displaying those where the authenticated user is involved. Pls let me know if im wrong or is there a more efficient way of doing this
Hello, the video is great, basically I created my own chat. And is it possible to implement a page on which you can select several users and send them some kind of message
hello a question I can't tell the difference between the widject that I must see and what everyone must see
The way to filter which chats should be seen in the list is a bit basic. I doubt we'll bring 100,000 chats to filter in the frontend. Any suggestions?
Can we monetize apps develope by flutterflow, also how do we generate AA.B bundle for playstore publishing
Great tutorial! I'm looking to create a real-time chat like the one on Twitch... unsure how much of this tutorial would apply?
Thank you for recording this amazing video. The chat message page is not working as expected but i think i did something wrong in the create document or the image path for user b, i will figure it out. Just minor question about the logic, who should be user a is he the one who send the message or the one that receive the message?
user_a is the one who initiates the message.. That would be auth user
Thank you very much for the video. Do you know if it's possible to allow voice notes in FlutterFlow? I am trying to implement this in the chat app I am currently building.
you can use start audio recording and stop audio recording in action. so you can create two buttons close to input message, making them child to stack. One button to start recording and the other button to stop recording. Use conditional visibility logic to display both buttons at the appropriate action taken.
I need answers please does this tutorial really work i want to use it to practice
Thanks 😄
Is there any end to end encrypted api ? Which I can use here
thanks very helpful and clear ! but I have a problem, how can you set the list view of the messages by default scrolled to the bottom ? because when I go into a conversation with a lot of messages I need to scroll a lot to get to the new ones
Acredito eu que é em Ordens, lá vc cria um filtro para aparecer os últimos dados
@@BEAT_GRATIS_USO_PROFISSIONAL how to prevent opening a new chat with the same user
you are awesome
I have problem about run app, i try follow your step by step but not easy to run, always problem
Great work. I love it, is it, possible to create a group chat and also RTMP video player
Thank you. TruChat 2.0 is coming soon!
is anyone else having an issue assigning the parameter chat_user? I cant seem to figure it out and i followed the tutorial exactly. Any ideas?
Do you know how to make the conversation show the name of the other user and not the one who started the conversation? Like in the test that both chats had Amelia's name
when passing your parameter to chat page, include user_b display name, you can then bind it to the necessary place
Is it possible to export/download our chat with someone/single user or group data using flutter?
Yes, it is possible to export/download chat data.
Thanks for tutorial.. but i noticed that you change something in chatpage ?
Can you please mention the timestamp?
Hello, i purchased your clone, looks great, however, how do i make sure users don't create duplicate chats?
Any tips on this
create a variable in app state called "inChatWith" and set this variable to "list" and "persisted". this list would save all the user_b that user_a (authUser) is already in chat with. Then add this action. When you create a chat document, in the chat sequence, update the state variable "inChatWith" by adding user_b userID to the list. Afterwards. create two user containers in the users list and set the containers to be children of stack widget. Then do conditional visibility in relation to the list in "inChatwith". This is how it will be select the first container to create new chat, and set the second container to update chat. your conditional visibility on the create container should be visible only if userb Id is not contained in the "inChatWith list. the opposite for the other container to update chat
Is this make free plan? You build it on free plan?
Hi @techno_rohan Thanks for the video, I have purchased your clone. When user clicks on login, where does it take the user to, there is nothing in the workflow? Thanks
Error: A network AuthError (such as timeout, interrupted connection or unreachable host) has occurred. ??? I am pild 8 h plz fex it
I am getting error at around 45 mins the text input in the chat page s=isnt visible after adding a backend query for the listview,i am stuck on it since 2 hours plase help
Hey bro, he didn't mentioned in the video but if you see at 45:40 to the left he added an column to list view and moved all rows into that column
34:27 I could not set the first value to "User Record Reference", mine only showed "User Record Reference document ID" which did not work when I clicked confirm. Is it about the firestore rules? because I set all the permissions to "everyone" to prevent something from blocking the flow again...
make sure to click "conditions" first, then you will see the correct options
Thank you so much I will try it@@user-ou9mh7wj7i
My chats stay the same after firestore and dont get authentication
Is the video blurry for anyone else?
38:37 value source ?? i dont see that
Does anyone know if this method can also be used for group chats?
Also, does someone much smarter than me have any idea what kind of costs this would incur if used with Firebase? :)
I didn't show here the group chat feature. I recommend you follow the FlutterFlow chat app documentation.
@@techno_rohan Thanks for replying! Great video. I was going to follow the documentation for the Group chat action but wondered if that would still work using the method you've demonstrated in your video!
I also saw someone say that using Firebase would become very expensive using group chats. So wondered if that were true.
@@techno_rohan Hey dude, I wonder if you knew what conditional to use when I click the person I want to start a conversation with it looks for an existing chat with them and opens that chat, instead of opening a brand new chat every time?
(for example, in your video you have the bubbles at the top of the page of users, you click Amelia, and it starts a new conversation, you go back and click Amelia again, it'll open a brand new chat instead of opening an existing one)
Hello sir,
I want a help to app in flutterflow
Error:User click to join button in one task,
Then user show you are Joined all task in button (without snak bar and etc)
Sir In button text Join change in Joined
Then fix user join one task then joined in task only whose user join then see Joined in button 🙏🏿🙏🏿😔😞😞
Thanks for the video bro, but am facing an issue on my app I need any sent/received messages to automatically scroll the screen to the end. UNLESS, the user is scrolling through messages, in which case it doesn't scroll until user manually goes back to the end of the messages. It's basic functionality of how any messaging app works. How can i fix that pls
I am hooked at this point as well. if I can get this solved, my chat app is totally completely built. I asked the question in Flutterflow community and was told to add a "scroll to " action on the list widget, but the fact that conditional visibility is in relation to the local state, gives an error. Have you gotten a solution yet?
@@afokeakpomiemie796 Were you able to solve this? Did you build off the clone show in video?
still haven't been able to solve it. i have asked this question in all flutterflow communities i know of but no one has responded. please if you eventually find a solution please let me know. Even after paying for this clone, the developer didnt respond to this major flaw in the app. Its really sad, he just wants to sell and not solve his customer's issue. @@tremili
This is solved by selecting reverse in the listview properties@@afokeakpomiemie796
This is solved by selecting reverse in the listview properties@@tremili
But you didnt tought how can we scroll this app without that it is waste even not making any sense to build flutterflow without this feature
Can you show me firebase rules about chats colleciton
Please email us
39:09 انا لا اري هذا الاختيار عند تطبيقه في خانة البحث
39:09 ودائما يظهر لي خطئ عند التطبيق ما الحل
i cant find cloud functions admin anymore, i am struggling to setup firebase
Create Cloud Functions Admin custom role
@@techno_rohan how do i do that?
hello Roshan
how to prevent opening a new chat with the same user????
use conditional actions
@@GauravSingh-zz9rfCan you please tell me how to do that
pls let us clone it in free i dont have money
Please email at amsinfotech.in@gmail.com to get a free copy.
ii don't have money please give me
next time go slower, i mean god dam
Please make video with your own voice with no background music 🙏
if my built this app more slowly and with your voice then it would be helpful for us and we could understand the things that you were showing...
Welcome 😊