Build the BEST Chat App on Web | WhatsApp Clone | Flutter, Firebase, Riverpod Tutorial
This is a tutorial to Build a Full Stack Whatsapp Clone with Flutter, Firebase & Riverpod 2.0! This tutorial covers all the main features of a chatting app: Phone Number Authentication, One to one & Group chatting with contacts only - includes text, image, gif, video, audio (with recording), emoji sharing and image and video caching, status visible to contacts only and disappears after 24 hours, video calling (one-one and group), online/offline status, Message Seen Feature, Automatic Scrolling on New Message, Replying to Messages and much more!
Prerequisite: Flutter & Dart Basics
📌 Starter Code: https://github.com/RivaanRanawat/what...
Final Source Code: https://github.com/RivaanRanawat/flut...
Discord Server: / discord
Special Thanks: @aadhiarun2230
Important Links:
Background Image: https://github.com/RivaanRanawat/what...
Provider Tutorial: • Flutter Provider State Management - F...
Riverpod Snippet Extension: https://marketplace.visualstudio.com/...
Timestamps:
(00:00:00) Intro & Demo to Whatsapp Clone
(00:00:40) Setting Up Flutter Project
(00:04:06) Flutter Project Runthrough
(00:07:53) Connecting Flutter App to Firebase
(00:15:42) Flutter Firebase iOS Setup
(00:17:47) Flutter Firebase Android Setup
(00:20:37) Landing Screen UI
(00:35:25) Login Screen UI
(00:59:51) Flutter Firebase Phone Authentication
(01:14:05) Adding Riverpod
(01:20:29) Auth Controller
(01:32:42) About Riverpod
(01:35:20) Resolving iOS App Error
(01:38:35) OTP Screen UI
(01:43:30) Verifying OTP
(01:54:39) User Information Screen UI
(02:10:18) Saving User Data To Firestore
(02:32:28) Persisting Auth State
(02:42:53) Displaying Contacts in User’s Phone
(03:18:15) Displaying Name and online/offline status
(03:32:16) Modifying Bottom Chat Field UI
(03:47:47) Sending Text Message
(04:37:19) Displaying Chat Contacts
(04:49:40) Displaying Messages
(04:59:41) Automatic Scrolling on New Message
(05:04:16) Changing Online/Offline Status
(05:13:4) Sending Image Message
(05:29:13) Displaying Cached Image
(05:38:19) Sending Video Message
(05:51:28) Sending Emojis
(06:02:34) Sharing GIFs
(06:19:02) Recording & Sharing Audio in Flutter App
(06:35:16) Playing Audio in Flutter App
(06:44:47) Replying to Messages
(07:23:45) Seen Feature
(07:31:56) Uploading Statuses/Stories
(08:05:20) Displaying Statuses/Stories
(08:24:35) Creating Groups
(09:00:57) Displaying Groups
(09:07:38) Fetching Group Chats & Chatting in Group
(09:28:16) Managing Agora Dashboard & Credentials
(09:32:23) Video Calling
(10:06:46) Disconnecting Call
(10:11:04) Group Calling
(10:15:58) Code Refactoring
(10:18:43) Note on Firebase Functions
(10:21:05) Testing on Physical Device (Android)
(10:22:47) Conclusion
Join this channel to get access to perks:
/ @rivaanranawat
Connect With Me Here:
Instagram: / optimalcoding
GitHub: https://github.com/rivaanranawat
Linkedin: / rivaan-ranawat
Facebook: / rivaan.ranawat
Mail: [email protected]
Medium: / namanrivaan
Twitter: / ranawatrivaan
#flutter #firebase #chat
Смотрите видео Build the BEST Chat App on Web | WhatsApp Clone | Flutter, Firebase, Riverpod Tutorial онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Rivaan Ranawat 13 Июль 2022, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 202,569 раз и оно понравилось 4.5 тысяч людям.