Flutter Clubhouse Clone UI Tutorial | Apps From Scratch

» Flutter courses, writeups, and source code on Launch Club 🧠
drp.li/Iq9Bk
» Flutter Job Board 👋
drp.li/T9bLq
Learn Flutter fast in this tutorial by building the UI design of the real world app, Clubhouse. You'll learn easy UI tips to help you develop a beautiful project. This Flutter UI tutorial is great for beginners as well as advanced developers who want to improve their mobile app development skills. We'll create the Home Screen where you can see the upcoming and live rooms. Then we'll move onto the Room Screen where you can see who's in the room.
» Remember to like, subscribe, comment, and share this video!🚨
kzbin.info?sub_...
» Socials📱
GitHub: github.com/MarcusNg
Twitter: / marcuslng
» Resources 📂
Starter Project: github.com/MarcusNg/flutter_c...
Complete Source Code: github.com/MarcusNg/flutter_c...
Material Design Typography: material.io/design/typography...
» Timestamps 🕒
0:00:00 Clubhouse UI Introduction
0:00:48 Download The Starter Project
0:00:57 Project Walkthrough
0:04:39 Home Screen App Bar
0:06:45 User Profile Image
0:11:04 Upcoming Rooms
0:20:09 Room Card
0:30:12 Gradient Container, Start Room Button, and Menu Icon
0:36:04 Room Screen Navigation
0:37:48 Room Screen App Bar
0:40:08 Curved Container with Room Info
0:43:44 Room User Profile
0:50:59 Display Users in SliverGrid
0:53:50 Room Bottom Sheet
0:58:33 Clubhouse UI Recap
0:59:33 "Party Pooper Emojis! 🎉" - 🤦
0:59:42 Thanks for watching 🙏
» Music 🎶
[NCS ( / nocopyrightsounds )]
Elektronomia - Sky High pt. II ( / elektronomia )
Joakim Karud ( / joakimkarud )
#Flutter #FlutterUI #FlutterTutorial

[@karmannibber9545]

you are doing an amazing job Marcus. So much to learn from you !!!!!

[@bodyhanger7137]

Another cracking UI Marcus. Thanks pal... ⭐️⭐️⭐️⭐️⭐️

[@ThisIsSimonK]

​ @Marcus Ng You're the reason i got back into flutter and mobile dev. Following along your videos and courses is my favourite pastime these days. Thank you!

[@AkashJadhavIT]

thank you so much for this tutorial, no body explains while they are building the app like you do, it is very helpful for new comers like me to get what developer is thinking while developing. and very easy to follow. keep making please keep making UI tutorials like this :)

[@so7300]

awesome content! I learn a lot from your videos, best Flutter coder on KZbin.

[@remymumoh2577]

Thank you for your contribution to building the community

[@kamalnayan5331]

I'm new to flutter and your videos are very helpful. Thanks a lot sir.

[@herbertarcher4785]

love your tutorials... this well understood than the speed up codes . thank you

[@ebusasianya9657]

The best app from scratch channel on flutter. Love u man 💕💕😘

[@omaryassir5885]

u made me love flutter!

[@HHJYXH629069558]

Great tutorial! Thanks a lot!!

[@tdev_s]

Thank you for your work. You are brilliant. 😀

[@BreegBenjamin]

Que buen tutorial amigo!

[@aboubacardiallo9117]

Thank's, you are awsome !

[@tsuzuki817]

Thank you so much!

[@madhank93]

Thank you ❤️

[@chuxville11]

Thanks MarcusNg

[@redaabdelhamed519]

Thank You

[@korndev6862]

thank you

[@ipeerless6717]

you are the best

[@HoH2k8]

Thank you for this kinda tutorials. I have a question, could you do a tutorial, how to break down designs in widgets? Thats where I really struggle. Thanks again.

[@sonmangaking]

Thanks now I won’t sleep 😴

[@akifcankara2225]

if you have a nullable error use required const UserProfileImage({required this.imageUrl, required this.size});

[@MarcoLate]

To constrain the height of the profile image in the AppBar, just wrap it in a Row()

[@muhamadfikri7263]

Great tutorial 👍 ..i want to ask about what font name for coding?

[@khanmohammedaamir8900]

Can you make a story book app ui with splash screen , ONBOARDING SCREEN and awesome home page (your ui concept are awesome) . You are awesome man 🤠❤️❤️

[@khanmohammedaamir8900]

@@MarcusNg thanks 😊😊

[@hiteshjoshi2736]

Hi Marcus any plans on making block tutorial?

[@piyushtidke96]

Hey Marcus, your videos are always motivated me to do more coding. Can you please tell me how we make full clubhouse ui ux app in flutter? Please help brother....

[@denniszenanywhere]

Can I build this and use it like Clubhouse? If not, what would it take to make this functional? What do you think it is missing? Thanks

[@LastVoyage]

7:20 - does this technique come with a performance hit? Or is something like treeshaking being used there?

[@michaelmboya5085]

I highly doubt it has any effect on performance. It just looks so much neater than having so many import statements

[@ericchua3492]

At 20:00, you added Flexible(), do I need to have that? I removed that and couldn't see any difference. Is it normal to have flexible within expanded?

[@uhsarpa517]

If the text is too large, you will need the Flexible widget with overflow so that the text is properly presented. Since the text in Club and Name are not overflowing, you are not noticing any difference. Marcus intentionally prints the Club and the Name three times to simulate an overflow situation.

[@hamzaabdulhakim6215]

@@uhsarpa517 hello please I want to make the firebase back end can you guide me

[@justvikas]

hot reload in my visual code doesn't work. could you tell me how you made that work?? I have already tried 'run without debugging' mode in vs code, it still doesn't work. Please help.

[@YaroslavPronin]

By default, we need to make ctrl-s. You can change this in the settings.

[@justvikas]

@@YaroslavPronin What do you mean. I didn't get that?

[@YaroslavPronin]

@@justvikas For hot reload to work, you need to press the Ctrl-S (or Command-S on macOS) key combination. This is the default behavior recently. If you want hot reload to be triggered on autosave, you need to change this in the Flutter extension settings

[@JAIVALSAIJA]

How are you getting the error/suggestion in the same line as the code?

[@rajkrishna8143]

Error lens extension Vs code

[@JAIVALSAIJA]

@@rajkrishna8143 thanks

[@imranhassan8903]

Hi pro marcus ng can you help me i need to make source code Flutter andriod and ios Code I need source code payment online Like this clone Skrill app or netller app Did you make flutter skrill app clone UI

[@andrewxu8915]

The jazzy anethesiologist contextually reduce because clover utrastructurally stuff at a dark richard. troubled, rainy raft