Chat App with Flutter, Dart Frog & WebSockets
HTML-код
- Опубликовано: 31 май 2024
- In this Flutter tutorial, we’re going to build a full-stack Flutter chat application with Dart Frog and WebSockets. In our Dart Frog server, we will develop a REST API and a WebSocket to handle the communication between the client and the database.
GitHub: github.com/maxonflutter/Chat-...
🚀 Learn Flutter / Build Apps 👇
🧑💻 App dev • www.atomsbox.com
✍ Flutter Templates • www.atomsbox.com/templates
💾 GitHub • www.github.com/maxonflutter
Key Features:
- Flutter UIs for the Chat Room, Chat Room List, Login and Splash screen
- Send and receive messages in the Chat Room
- Updates to the list of chat room when new messages come in
- Postgres database with Supabase
- Login with email and password
- Login with phone number and OTP
- Server-side auth with JWT token
- REST API setup with Dart Frog
- WebSocket setup with Dart Frog (server) and with web_socket_channel (client)
00:00 Build a chat application with Flutter & Dart Frog
07:30 Packages to share code between the client and the server
10:20 Database set up
21:40 Custom Dart classes, models
32:05 Env variable for the Supabase setup
40:00 Dart Frog: GET data from the database
50:30 Dart Frog: Custom entry point for the server
52:30 Flutter UI: Chat Room List Screen, message list, message bubble, message text form field
01:12:00 API client to connect the Flutter app with the Dart server
01:25:00 Insert sample data in a Postgres database for the Flutter app
01:28:35 Set up the WebSocket client in the Flutter app
01:38:00 Set up the WebSocket handler in the dart_frog project
01:46:00 Create new messages from the Flutter app 
Наука
your awesome man keep it up!! waiting for p2
Great video! Can't wait for part 2. Question, will you implement notifications? That would be so helpful! Thanks Max!
That's work in progress :)
@@MaxonFlutter can't wait .......
it looks complicated and interesting at the same time.
hey , please what state management are you planning to use , and thank you
bro u won't believe that i have been searching for that many times and suddenly u have upload this video omg , i am sure that god have sent u to me
Hey Mohammed, I’m glad it’s helpful for you! That’s just the first part though as there are some more features to add 😀
@@MaxonFlutter i am waiting for the next part, keep on bro
Hi Great Tutorial. Learnt a lot. Do you have any timeline as to when will the part 2 be uploaded?
I have one question: can I write a backend in Dart Frog that will isolate each user from each other, i.e. I will create all the logic as factory classes and then use them in webSocketHandler, and it will be able to serve several users simultaneously and independently?
Waiting for part 2 !
Nice work Max, did you make any tutorials about Firebase in app messaging?
Do I have to know dart frog if I am starting with this tutorial?
how many part this project have
??pls let me know i want to build this for my job project experience
Instead of dart frog can serverpod and docker be used?
Can I please request the flutter UI design of the app "The New Yorker" eMagazine homepage ? Thank you for what you do !
Will be good to have one with video and audio call using dart frog too
Okay, thanks for the suggestion.
Bro i cant find the subsscripten for membership ? I want to finish the food Order serie
Excellente my friend
Thanks!
When will part 2 be released?
hi sir good job , i want know with website socket i want to use mysql database please tell me hsoting plan for 1000 cucurrent contion but best but cheap
grande fra
🚀 Learn Flutter / Build Apps 👇
🧑💻 App dev • www.atomsbox.com
✍ Flutter Templates • www.atomsbox.com/templates
📱The best chat app template available: www.atomsbox.com/templates/echo-link
perfect !👋
Ay Sir thxxx
Hello sir this was a great tutorial I have ever seen can you help me please?
The database.sql that you have on the insert chat_rooms does not work. There is no unread_count in the chat_rooms table
Remove everything below line 64 (the last "ADD FOREIGN KEY" line). Then try to run the same query again. It will work :)
@@harshbsv That was for statring part when i implement api and then run that part by chnging only userId1 and userId2 it giving error so i decided to remove time column and add unread_count column and when i am running now it showing error like this
Unhandled Exception: Exception: Unexpected error: ClientException with SocketException: Connection refused (OS Error: Connection refused, errno = 111), address = localhost, port = 51244, uri=localhost:8080/chat_rooms/id/8d162274-6cb8-4776-815a-8e721ebfb76d/messages
E/flutter (23425): #0 ApiClient._handleRequest (package:chat_app_part/services/api_client.dart:54:7)
part 2 please asap
bro please complete the project.
Good tutorials, Will you add english subtitles ?
They should be auto-generated by RUclips 👀
Will you integrate Flutter Bloc on this project?
Yes, I"m working on it :)
I can't get access to the next videos. What exactly should i do?
You need to buy membership.
Bro do you have any else video for dart frog?
Hey there! Yes, check the latest video section on my channel. There is one about building a grocery shopping app that uses dart frog, too.
Love from India..
I need help...
I am getting xCode error..
Multiple command produce.
How can I solve?
I need a bit more information to help 😀. Can you share the full error code and when is it happening?
@@MaxonFlutter I got these errors:
Multiple commands produce '/Users/cdp/Library/Developer/Xcode/DerivedData/Runner-ayqoasgvdrsgbxanngavrzhllndk/Build/Products/Debug-iphonesimulator/Runner.app/Frameworks/OneSignalInAppMessages.framework'
And
Error (Xcode): Multiple commands produce
'/Users/cdp/Desktop/Anas/bcic/build/ios/Release-iphoneos/Runner.app/Frameworks/OneSignalInAppMessages.framework'
I upgrade my flutter version and then run my project so I got this on both Android studio and xcode.
I read so many articles please help
Please reply 😭
Hey looking to build a similar app can you help me do this as a paid task
Hey there, feel free to contact me at massimo@atomsbox.com
how to chat with multiple users.
Do you have a chance to add subtitles?that would be great
They’re being processed by RUclips! Probably they’ll be available in a few hours 😀
Haha, I didn't know that :D@@MaxonFlutter
Member only? realy? I am from fu... Iran and I can not purchase because I have not credit card...
I am familiar with all the topics and I just wanted to see the socket manager on the server side
Good video like every time
Would you make for us, a Stripe payment and subscription video with Flutter Web as the 2024 gift 🎉 please, there's no the single video in RUclips... And you're the best flutter RUclipsr
Can you turn into tinder clone,supabase is nice
good video. But when i'm running the database script a getting some erros "bugs"
ERROR: 42703: column "unread_count" of relation "chat_rooms" does not exist
LINE 68: INSERT INTO chat_rooms (id, last_message_id, unread_count)
and i don't know how to solve it! Please, help me! From Mozambique (Africa)
make a column unread_count in the chat_rooms
How to disconnection and reconnection in websockets? Kindly show a more advanced implementation of websockets more suited to production use please @maxonflutter
Sure, I might release that in the future. Thanks for the suggestion.