Flutter Responsive UI: WhatsApp Clone
HTML-код
- Опубликовано: 13 июл 2024
- Learn how to build completely Responsive Flutter Apps- Android, iOS, Web & Desktop by Building WhatsApp Clone! This Build works as WhatsApp App on Smaller Screen Sizes and WhatsApp Web on Bigger Screen Sizes!
#flutter #ui #responsive
Source Code: github.com/RivaanRanawat/what...
Demo: hungry-lichterman-63f0f3.netl...
Important Links:
colors.dart File- github.com/RivaanRanawat/what...
info.dart File - github.com/RivaanRanawat/what...
Chat Background Image - github.com/RivaanRanawat/what...
Flutter on Desktop - flutter.dev/multi-platform/de...
Time Stamps:
(00:00:00) Demo & Intro
(00:01:32) Setting Up The Project
(00:09:18) Displaying Mobile AppBar
(00:14:47) Displaying Mobile Contacts List
(00:24:49) Displaying Web Contacts List
(00:32:43) Displaying Web Profile Bar
(00:40:41) Displaying Web Search Bar
(00:47:41) Displaying Web Chat App Bar
(00:55:11) Displaying Chat List on Web
(01:09:08) Displaying Web Chat Input
(01:14:59) Displaying Mobile Chat Screen
(01:27:28) Hosting Website on Netlify
Connect With Me Here:
/ optimalcoding
namanrivaan@gmail.com
github.com/rivaanranawat
/ namanrivaan 
Хобби
38:59 you can use a Spacer() widget (or Expanded() widget could work) instead of that Sizedbox() with a specified size. Also at 54:50 .
Thanks for suggesting the improvement 😄
ya when resize the web screen it gonna give that overflow thing if using sizedbox.
There's even no need to create a custom row for the header here, I would prefer an app bar instead.
@@kahanx10 yep yep, it will create the back button automatically, include the function too
I wished I had seen your comment earlier spent a lot of time experimenting
I have been making some programming videos myself, and I must say that your language, tone and video style is so clear. Great video!
Thank you!
Thanks Rivaan, I'm a Flutter newbie. Your video is very helpful. I will always support you 👍🔥
Thank you so much Habu! Appreciate it😊
one of the best programming tutorial I've ever watched through all these yeas from learning and working with programming, great job really keep on doing a lot more
Great to hear, thanks! More to come
improving myself in flutter with the help of your videos thank you so much for creating such a amazing content...
Amazing work bro...I just explored your channel and couldn't hold myself from subscribing it.....you are doing great, best wishes for your Coding journey❤
Thank you so much Maher!
Great tutorial!👌
you explain things very well👏
Great Work Rivaan
Thank you so much Rituraj!
Bro...the trick you find for responsive design is really great...keep it up...
Thanks Subrat!
im a follower from Egypt , to be honest u r one of the best content makers i have ever seen , keep going man , and thank u for yr time and effort
Thank you so much for your kind words! Really means a lot to me😄
@@RivaanRanawat ♥️♥️
thank you so much for attaching the source code so that we can learn more!!! youre the real Hero, mad respect!
My pleasure!
very inspiring sir 🙏🙏
Realy great work sir you are the legend
Thanks Hamza!
Damn man you have to pay close attention to notice it’s not really Whatsapp, really nice job!
Thank you!
Don't know bro if you'll read this, or not but seriously thanks a ton for your efforts, i recently learnt dart from your course & you taught it incredibly amazing, Just here to say thanks for your efforts ❤
Thank you so much! Hope you find some value from the Flutter course as well!
thaaaaank you sooo much
Love your videos bro
Thanks Arpan!
Thanks a lot
Keep it up 💪
Thank you!
Great
Thank you!
Awesome bro 👌. Bro make more videos on desktop apps.
Sure 👍
Wow super tutorial ❤
Thank you!
Very easy tutorial 😄
Glad you think so!
Bro I HAVE ADVICE FOR YOU!!! PLEASE MAKE YOUR EDITOR FONTS A LITTLE BIGGER PLEASE! Anyway I'm very grateful for your amazing lessons
Thank you! In my recent videos, I have increased the font size.
Amazing bro .
Please could you make a a ecomerce video with payment ?
COOL
Bro I have been watching your TikTok Clone video that's so awesome.
Could you please make the full app for WhatsApp also..?
using firebase..
Coming soon 👀
❤️❤️❤️💯💯💯
thx you bro
Pleasure!
Nice bro
Thank you!
hey my chats are not showing i dont know why , i have checked my code its correctly written , can u please help me
Thanks, Rivaan!!
Can you add a backend for this app? it will be more usefull.
Coming pretty soon🙂!
@@RivaanRanawat Thanks bro we will be waiting you.
Please make more projects Rivaan
More to come, stay tuned!😉
After using suffixicon:Padding(), the inputbox doesn't show the hinttext and also doesn't able to write anything either.Why?You can see at 1:26:36
hi buddy do mainAxisSize to min for the row
Great course! I copied your code, but when I rotate the simulator, it shows the web screen instead. Could you please explain why?
because of width bro
Very nice tutorial plz getx full tutorial
Sure, in my To-Do List!
When we click on contacts in web, it should only change the widget but it navigates to the next screen just like in mobile. How to implement that feature?
yep, I want it to be display on the chat container but not on the next page For the Web Respnsive
So can you do this on windows ?
profile pics are not showing in circle avatar
👏🏽👏🏽👏🏽👏🏽👏🏽
Thank you so much!
hi witch shortcut key do you use to wrap whit padding time lap 22:10
pleas help
I use Ctrl+Shift+R but I think I had changed it in the past. To know how you can do it on your system, right click on the widget and see the shortcut key it gives for Refactor.
Thank you sir
if the profile images doesn't show up, just change the 2nd and 3rd images and try again
Please make a full dart and flutter course 🙏🙏
That's already in the list😄
@@RivaanRanawat Actually I'm not able t make it out from the playlist it'll be o helpful for me if you directly provide the link to a playlist. Please!
Thank you very much,
and it would be much easier if you show us the widget you intend to create , instead of explain it verbally.
Thanks for the suggestion, much appreciated! I'll take care of that next time onwards
Sir plz make a project by using firebase it will help us as a beginner and working with complex data
WhatsApp Clone (Backend) with Firebase is already live!
Thanks sir now I am seing
we need a hindi version of it please
Bro, are you making whatsapp with flutter and firebase?. please do full version of whatsapp with flutter and firebase
Very Very soon 👀
@@RivaanRanawat This is all that I've been expecting 😃😃😃
Haha, won't be a disappointment for sure!
@@RivaanRanawat I don't have words to appreciate your work 😁😁
one thing which i finded hard to learn is displaying chat list,,little more confusing for me
Sure, what did you find confusing in it? I'll try explaining it again here.
@@RivaanRanawat it's hard not impossible sir..🤣
Can you make a tutorial with complete functionality firebase of this whatsapp clone?
Already in the todo list! But do you want the messaging feature with Firebase? I was thinking about Node & Socket.io.
@@RivaanRanawat hm... I actually have a flutter project that i coded in spring boot & socket.io, but got lots of bugs. So was thinking to transition to firebase for a chat app. I dont mind if you make a tutorial in nodejs and socket.io. What do you think is better and why?
Firebase and Flutter are great with each other. However, Firebase has multiple limitations whereas Sockets let you customize much more. There are several tutorials already on the net teaching Firebase & Flutter Chatting. I don't see many tutorials using Socket.io.
I think that would be beneficial.
24
Great