Flutter Spotify Clone Desktop/Web UI | Apps From Scratch

» Flutter courses, writeups, and source code on Launch Club 🧠
drp.li/Iq9Bk
» Flutter Job Board 👋
drp.li/T9bLq
I'm going to teach you how to build Spotify's user interface for desktop and web. With Flutter, it's super easy to develop responsive apps that work across different platforms. Users will be able to select tracks and our UI updates accordingly. We'll use provider to share state throughout our application and keep track of the currently selected song. Throughout the video, I'll hit upon some easy UI tricks to help you develop a clean and beautiful user experience.
» 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_s...
Complete Source Code: github.com/MarcusNg/flutter_s...
» Timestamps 🕒
0:00 Introduction
1:00 Download the starter project
1:09 Project Walkthrough
4:31 Shell
8:37 Side Menu
19:19 Playlist Screen
29:08 Playlist Header
38:01 Tracks List
41:20 Provider - Current Track Model
47:21 Current Track
58:32 Responsive
1:00:14 Thanks for watching 🙏
» Affiliates 🔥
3D Mockups - LaunchClub.io/rotato
» Music 🎶
Joakim Karud ( / joakimkarud )
#Flutter #LearnFlutter #FlutterSpotify

[@franklinguang]

I have looked through pretty much all the channels in KZbin , you are the best one hands down. Keep up the great job. I understand you have put in a lot of work, but one day when people look back how they learn flutter your name will be remembered.

[@magfal]

This is by far the best front end programming tutorial I've ever seen. The calm, confident and concise explanation and tempo are just exceptional.

[@franklinoladipo2343]

Your videos are so explanatory, you really simplify everything and make it understandable.

[@flaviobarros8305]

It's an honor to share this channel to all my developers colleagues... This will be the only video on youtube that will never get a dislike lol

[@taiwo763]

This has to be the best tutorial for quick intro to Flutter for Desktop and Web. Thanks a bunch

[@evarakiller677]

man! I really appreciate your hard work, making videos for us. This video helped me out, I wanted to make a desktop app, but I saw a lack of knowledge and info on the internet about building them, I really love your content. ❤

[@M0K0K0]

One of the best Flutter UI tutorial i've ever seen, thank you very much!! :D

[@quangle5701]

Your tutorials are the best on KZbin so far, not like others just to show up with speedy code. I really appreciate your explanation on every steps of your coding which is tremendously helpful. I have learned a lot by watching your videos. With new Flutter version 3.x with Materials 3, it would great if you can create a new Flutter design course with theme, responsive/adaptive, internationalizing, … topics. Thank you very much!

[@noural.hajali9584]

A third ui video of your's done for me.. gotta say you are the best on youtube when it comes to pace and quality, although you don't explain everything most of the time but i understand that and it is not hard to do external research.. thanks a lot for existing :)

[@abdallahhussein5997]

I have nothing to say that all I can say your the best instructor I have came across.

[@danielm3977]

Markus. I truly appreciate what have you done. Gr8 as always

[@affanamir1412]

you no Sir what I love about you the most is that all of your tutorials are beginners friendly thanks men.

[@chuxville11]

Thank You MarcusNG for the step-by-step approach in Your tutorials...

[@ponchobob]

I'm new to flutter and starting with a desktop application. What a coincidence that I somehow came here. Thanks

[@darpitrangari8207]

never stop making these videos...I am learning so much...thank you🙌🙌

[@muratoztekin4636]

This is the best Flutter UI tutorial I've seen. Thanks alot.

[@alexchen3200]

Excellent Tutorial, very on point and concise. He goes pretty fast, I would recommend watching it in 0.5 speed.

[@harysuryanto]

Thanks a lot for the easy to understand explanation. Keep up the awesome work! 🔥🔥🔥

[@angelc5022]

Thank you very much for all that I've learned throughout this video. I'm a beginner and this was for me a very good appetizer; now I'm hungry for more.

[@reginaldarmah2381]

Your designs are very professional. Good work

[@jhonbaptist6159]

Man you rock. For real! Keep up the good work.

[@adeelzahid9622]

I thumb up to your video before watching, because I'm 100% sure I learn something new throughout your tutorial. ✌✌👍👍💕💕

[@jonreed5431]

Amazing work. Spotify should hire you to rewrite their Electron client. This is sooooo much more responsive.

[@sydneyidundun9187]

This was an amazing tutorial, really enjoy your content

[@rakshithadilshan9888]

This is very interesting. Learned a lot of new things. Keep up the good work buddy!

[@SuperFahady]

Another masterclass course 😍

[@nicolasfalcon7598]

Awesome bro, just Awesome, i have learn a lot here!

[@jenniferzhang1016]

Amazing! Thanks for the great tutorial :)

[@jarabialex]

Damn! I admit most of it was overwhelming, but I did generally grasp the flow. I enjoyed this journey.

[@AjilSathyanLMCEC]

Your videos are impeccable and the way of your teaching is really understandable.

[@franklinoladipo2343]

Exactly you are right

[@bmk4308]

Yes! Another great one!

[@exonent]

You need to be the official Guide of Flutter Coding, you channel is the best channel, I have your both courses on Udemy and I learned a lot en few hours. Thanks mate, keep doing!

[@shanglee643]

Sorry. At 16:08 there is a (...) notation, do your know the meaning of it? It's not cascade (..) right?

[@exonent]

@@shanglee643 ... its like the abbreviation of “add” sentence. But you dont need to write all the code, just the ...

[@shanglee643]

@@exonent Thanks, i took a while to find out. Now i got a newer problem, trying to covert the logic from Provider into Bloc

[@shanglee643]

@@exonent how to do the Big dot(.) at 33:10 ? Thanks.

[@Bilal-le3nw]

@@shanglee643 if you are on windows press "Alt" button and type 0149 this is the code of the bullet point symble

[@zak_47]

Thank YOU! Its very good!

[@_rouss___]

This tutorial make me feel like I finally get into the Flutter logic

[@flutterhacks2226]

Great Work ! Keep doing like this videos !

[@harisbashir2719]

Marcus is best . I saw notification I clicked

[@eQ-13]

Indeed

[@learning1online156]

Learned a lot!! Thank You!!

[@johnsunnyjohnsunny4296]

sir your tutorials are great..keep going.....i really liked all of your works

[@iamsaiankit]

Great work man

[@nabil.hamawi]

THIS IS AMAZING

[@ricard458]

Great Video!

[@mansoorjafari8309]

perfect. thanks marcus

[@MohamedAbdelhamed-y3e]

Keep going 💪❤

[@mustafahadi3613]

i hit like before watching the video because i know your work

[@mumbaikachallenge5526]

Love it ❤️❤️❤️❤️

[@sydneysmurts4159]

Thank you for gr8 content ...still waiting for the twitter clone though❤

[@0860245]

Mind Blowing!! Just Wooooowwwww

[@haikal7006]

wow amazing man

[@GlennMartin]

Great intro into flutter my friend. Which video would you recommend next?

[@mruduladdipalli5417]

Perfect 🔥

[@freakout6764]

Thank you so much ❤️

[@sknazmulislam9158]

Your teaching style is best of the best man.. I wonder how many hours you have worked to reach this level. would you please tell me how many years you have practiced ?

[@shanglee643]

I love your voice so muchl

[@MehediHasan-co5qz]

Awesome..❤️❤️❤️❤️

[@i2studio3]

Thank you

[@santoryu4689]

Thank you for your great effort. I hope that you make clone the Amazon web desktop in Flutter and thank you

[@tastatura1]

dear mother of god, what a content

[@thefamousdjx]

Good stuff thanks for sharing. How would you go about fixing the play controls in place? I see they are bouncing around depending on length of song name. Would using Expanded and specifying flex work?

[@anuruddhachandrasekara9245]

Thanks from Sri lanka

[@eduardhasanaj8620]

Hi Marcus, Thank you for your effort and content. Could you please explain how do you extract visual specs from design like sizes, conversion to dp etc? I am more an an analytical person and I really struggle at this process.

[@shoeswholesalerforreseller7633]

Could you please make tutorial on state management in flutter..?? Love from India

[@keithbacalso9433]

Hi Marcus, may I know why you prefer BLoC as your state management? I saw one of your courses, but I am just curious about why you go for BLoC? thx 😃

[@tomfrank2115]

I am just starting out with flutter, its nice that I can try it out directly :) Are you in general happy with the performance of flutter? What about SEO or including sometimes HTML? Also what I just now realized when reloading the web page, there seems to be no caching in Flutter for Web, at least in Debug mode, how come?? Theres always some white area shown for a few secs Greetings!

[@Ali-cb3xt]

👍👍🔥🔥🔥🔥🔥

[@kabaahly342]

Good explication , i want some explication about how to scroll down with keyboard on a flutter desktop app,

[@topticktom]

Great Video. Whats the VSCODE plugin that writes the Red text?

[@roktimkamalsenapoty5793]

Plz make tutorials for state management.

[@theLaughRiot00]

Great tutorial. Thank you so much for creating this tutorial. Can you please suggest how to manage this code for mobile device as well.

[@theLaughRiot00]

@@MarcusNg thanks...i ll tty to implement it with the help of ur tutorial.

[@vincenthartanto4150]

Design on the mobile too please! hahaha

[@marcellinkhoury1714]

Great tutorial! Which extension do you use to organize the code on save?

[@random4u]

In VS Code, File > Preferences > Settings. Search for "format editor". Set default formatter to dart. Tick the Format on Save option. Unfortunately I have to keep changing the default formatter each time I change languages, not sure how to get this to work automatically

[@ahjed7397]

hi bro, ty for ur tutorial. Pls is flutter web/Desktop ready for production?

[@aayushkapoor5722]

sir do guide how can we actually add audio to these songs and create a full spotify clone...it would be a great help as adding audio classes and plugins are a hectic when not superwised thanks you

[@lesptitsoiseaux]

@45:05 Okay, I gotta ask. How do you get to change all textStyles at once like that????? thanks!!!

[@Firecloak]

At 19:10, I've added the code to display the Scrollbar, but it's still not visible. I can click on where it should be and drag it, but I just don't see it. It might be black color?

[@lukassimon8324]

Marcus, Is there a specific reason you are not using "late" keyword? Btw. Superb content, I appreciate your work for the community.

[@beginnerscircle6410]

Yeah, I was wondering about that as well. But all in all man, your tutorials are amazing. Keep up the good work.

[@adomicarts]

nice work, can u please ,mention what is that extention that shows the errors in red color in same line of code:)

[@AngelHdzMultimedia]

Error Lens

[@abdallahhussein5997]

Do have videos for the beginners in flutter?

[@JhimmyDev]

Hello, how can we make this UI functional? I mean actually playing songs.

[@Apoorvpandey]

Help!!!!! Theme is not overriden in the shell widget.

[@charlesyusuf515]

I see lots of great comments on this video...Can I use this to learn Flutter for mobile? I am new to flutter dev hence pardon my inexperience question

[@GlennMartin]

@marcusNG how to routing for this app homegrown? If I wanted.a side bar menu

[@RahulPandit-fm9bg]

How we can share this for another windows pc

[@vedantjha2327]

How to customize it for mobile platform? The hamburger doesn't work properly if we run it on mobile device. Any help anyone.

[@giteshgoyal6891]

Hi, I have doubt.. In my Case, I have the same code exactly yours but custom theme that you defined not work in other widgets. It shows primary blue(default) instead of accentcolor and other texttheme also not working

[@LoopyELBARTO]

Im not sure if you already figured it out, but in the main.dart file, change darkTheme: ThemeData() to theme: ThemeData()

[@mhm6421]

Can you make a web site where this works?

[@Harsh-kz3qw]

How to enable desktop development in window?

[@TechnophileLad]

How you know the size soo much accurately 😶?!

[@piyushprajapati4542]

Hello do you how to Deploy flutter desktop application in another PC

[@alexanderhoehne611]

Can you provide a list of the vs code extensions you use it is hard to follow when all you do is one click while on my side I have to stop and write it out

[@zebfross]

It looks like he is doing auto-wrapping. I found two extensions that look similar, "Flutter widget wrap" and "Flutter and Dart Utilities"

[@shanglee643]

Why do he won't initialize ScrollController right away after it's created but have to wait in initState ? ScrollController? _scrollController; @override void initState() { _scrollController = ScrollController(); super.initState(); } Can't it be done right away? crollController _scrollController = ScrollController(); //? Performance saving or some thing i not yet understood ?

[@szymon6047]

Ok now show us how adjust this code to work on mobile please :)

[@mashudumawela6992]

Can you design a mobile app for random live video chat. Like omegle and DODO

[@bobby9568]

So... can it play music though?

[@tolkinggomes966]

await DesktopWindow.setMinWindowSize(const Size(800,600)); erro?

[@giteshgoyal6891]

means Theme.of(context).iconTheme.color it doesn't invoke iconTheme. color

[@shanglee643]

Sorry. At 16:08 there is a (...) notation, do your know the meaning of it? It's not cascade (..) right?

[@beginnerscircle6410]

Yeah, he called it the spread operator or something like that. Anyways it's just a way of making use of a list within a list. Take for example in a ListView just like the case in the video, we should only pass a widget as one of the children of the ListView but say we want to add a list within the ListView we need to use the (spread-operator) "..." and this necessarily helps us to achieve what we want. That's it, I hope you understand.

[@FabioContardi]

Who can tell me what plugin show the error message directly on the line? Thanks

[@kuroodo_]

I think it's called Error Lens

[@FabioContardi]

@@kuroodo_ Thanks

[@lifebest4404]

Sir backund php how to use please tutorial

[@harshid4661]

any coupon for your instagram clone on udemy? please

[@kevlubhaop9358]

Is it working on Android and ios