Build Spotify With Flutter - Bloc , Clean Architecture , Firebase , Figma
VloĆŸit
- Äas pĆidĂĄn 27. 07. 2024
- đ Elevate your Flutter development skills by creating a powerful music streaming app inspired by Spotify! This comprehensive tutorial guides you through the entire process, leveraging the robust combination of Bloc for state management, Firebase for backend services, and clean architecture for maintainable code.
-----------
DO YOU HAVE ANY QUESTION ? JOIN THE COMMUNITY
đ€ Discord
âïž / discord
-----------
đ Packages :
pub.dev/packages/flutter_svg
pub.dev/packages/flutter_bloc
pub.dev/packages/hydrated_bloc
pub.dev/packages/path_provider
pub.dev/packages/firebase_core
pub.dev/packages/firebase_auth
pub.dev/packages/cloud_firestore
pub.dev/packages/get_it
pub.dev/packages/dartz
pub.dev/packages/just_audio
-----------
đš Figma Design :
www.figma.com/community/file/...
www.figma.com/community/file/...
-----------
đŽ NOTE :
At 05:45:17 I muted the sound of the song due to copyright, there is no problem and the song plays well.
-----------
âł TIMESTAMPS :
00:00:00 : Into
00:01:00 : Design
00:01:46 : Project Structure
00:04:14 : Theme Of Application
00:14:15 : Assets / Fonts
00:18:24 : Splash Page
00:25:16 : Get Started Page
00:45:32 : Choose Light-Dark Mode Page
01:00:46 : Logic Of Light-Dark Mode
01:10:30 : Signin Or Signup Page
01:39:00 : Signup Page
02:01:57 : Signin Page
02:06:25 : Firebase Setup
02:13:35 : Logic Of Authentication
02:26:56 : Service Locator
02:34:00 : UseCases Setup - Calling Signin / Signup UseCases
03:07:56 : Upload Songs To FireStorage
03:12:06 : Cloud FireStore Collections
03:16:23 : Adding Information Of User To FireStore Collection
03:24:02 : Home Page - Fetching Songs - Display Songs Using Bloc,....
05:00:18 : Song Player Page - Using Bloc To Manage State Of Playing Song
05:46:15 : Logic Of Favorite Songs
06:22:52 : User Profile Page - Display User Info - Display Favorite Songs - Remove Favorite Song
-----------
đ Source Code:
âïž github.com/mahdinazmi/Spotify...
-----------
đ€ Telegram Community
âïž t.me/flutterguysgp
-----------
đ Linkedin:
âïž / mahdinazmi
âïž / fabrice-sumsa
-----------
đšâđ» GitHub:
âïž github.com/mahdinazmi
âïž github.com/Fabrice-Fabio
-----------
âïž Contact Us:
âïž mahdiforwork@gmail.com
âïž sumsa.fabrice@gmail.com
------------
#flutter #fluttertutorial #bloc #cleanarchitecture #firebase #flutterbloc - VÄda a technologie
A simple tip, if you wanna full screen vscode with visible emulator, you can press ctrl+alt+b to open secondary sidebar, then you can place the emulator in it, don't forget to set the emulator visibility to always on top. (not possible in mac)
Thank you for tip, I will try this.
I swear to god, i love you bro. I have been looking for this specific time, however with no luck. Thank you đ„č
this is the only thin i leanrt from this video
U got i keep going with tut like this brother
awesome as always
TDD with DDD on your next series will be even more awesome
Amazing work Sir
awesome as usual. thanks!
Bravo. Well done Sir.
Wow đđđ,
I'll learn a lot from this video. Thank you!
So glad!
well done bro this amazing tutorial make such project and help us to learning flutter
Thank you so much â€
awesome video, learn a lot from this đ„đ„
Glad to hear it!
Thank you for this treasure!
Our pleasure!
ohh nice â€
amazing vuideo just make these type of whole project videos from scratch
life saver
It is saying Unhandled Exception: Stack Overflow while i am clicking on sign up can i get any help regarding this.
it couldve been better if TDD is used here, but anyway this helps me alot too especially about clean architecture with bloc thanks!
The project is very beautiful. However, it would be nice if you create a separate branch for the UI parts before uploading to github. In this way, you can start developing the UI quickly without wasting time.
This is a great job, thank you so much for this tutorial.
I have a problem: I created a SplashPage exactly as in the video, but I still get the default Flutter SplashPage. What could I have missed?
Hey , There is a bug in your code : When we are into profile page and remove song from favorite list and go back to home page it still shows that song as favorites and same scenario happens when we add song in favorites from music player and go back to home page that simply dont show as favorite. Pls giude me on how to resolve that
awesome
Ghorbanat
What I will learn. . .
I'm just surprised this video is 7 hours. I was expecting 2, or 3 at most.
Amazing job... Hope to do more projects on hive + bloc + clean architecture + ( google maps or Ai or vitual reality)
Is there any specific reason for not using Named routing over here and Mediaquery for giving sizes
Create react native tutorial it's very helpful.
Thank for good course. I have a question can you explain in 2:33:20, why auth.dart in Domain layer depend on CreateUserReq in the Data layer ? i think Domain layer should not depend on Data layer like that.
Hello, how are you, first of all, excellent Tutorial video. I'm starting to implement the Bloc pattern, and I've had some complications. I was thinking if you could make an example of creating an âApp Blogâ or something similar in which state management can be used with the bloc pattern, (create data, get data, update data, and delete data). It would be excellent for learning. It is a nightmare for users who start with state handlers, especially newbies, well I hope one day to see something similar on this channel. Thank youâŠđ
Noted
@@flutterguys đ
What to do if user zoomed the display from phone settings
please make a video regarding this as it is a legit problem in flutter to manage a scalable app
*why would you create a specific splash screen?*
how to access this design on figma what to do go after link
Wonderful! 1 Question how do you feel about creating the clean arch within feature folders rather than at the root of lib?
No good coder makes stuff at the root of lib lmao
No good coder makes code at the root of lib lol
Clean architecture is not about folders. You can go with layer first or feature first, But you must implement the philosophy of clean architecture in your code.
You can make the project based on features, no problem, this is a personal thing and depends on the programmer. What is important is to establish the principles of communication between the presentation layer and the logic and services.
where to get the songs from?
I downloaded the code, I opened it, it gives me errors, I don't know how to test it, anyway, I can't use it... the Figma thing came out without any problems...
nice, It would be great a tutorial with supabase
Hello, how this android emulator came out ?
Nice tutorial, kindly drop one with rest api not firebase
Nice tutorial,
But it has a little bit wrong file structure
It should be:
--features
----auth
--------data
--------domain
--------presentation
----feature 2
--------data
--------domain
--------presentation
So it doesn't create any confusion between distinct features.
In some cases you can't call feature for example for splash page or home page and so on...
Also, Maybe you will have some usecases which is shared between features and in this way you can't use that usecase outside of that feature.
@@flutterguys
create core package
â@@flutterguys then this usecase (model/entity etc) shoule be in a "shared" folder
@@stellarcreed Actually Clean Architecture is not about folders or names , it is about seperation concerns
â@@flutterguys You just make your life difficult. It's a little bit messy and difficult to share features between projects, it's just impossible to copy some feature from one project to another one. The structure I made above is much simpler
bro pls make a full beginner to advanced flutter course
Will do soon
Which vs code themes and tools are you using buddy ?
Athom
does it run on background if we mininimize the app?
@@ishu6983 No but probably I will work on this feature
Can someone please explain me
difference in entities/repositories under domain vs models/repositories under data?
what ive understood so far is that to keep keep the core business logic and business implementation separate, there are two layers namely data and domain.
The domain layer contains the business logic, the repository in domain layer only contains the CONTRACT(abstract interface classes) and the data layer actually interacts with the backend and hence the repository in data layer actually contains the implementation of the contract we created in domain layer
I might be wrong about this but i think both entity and models are same but just to keep the data separate in data and domain layer , the model has separated them
The data which will be used throughout the applications comes under entity/model
for example :
for a feature like Authentication
domain: repository -> will contain the contract like abstract interafce login, signup, logout
domain: entity -> will contain the User object which will be used throughout the auth feature
data : repository -> will have the actual implementation of login, signup
data : models -> will store the User object returned by the backend server
Thank you very much for the video! I wanted to ask you how to implement a like button so that it reacts instantly. Currently, your button reacts only when the data comes from the database, but it waits for the data, which takes a long time, doesn't it?
You can save it locally and then send it to the server so that the user does not understand this delay.
@@flutterguys You are a superman, good luck to you, thank you very much đ„
@@unicorn-thirteen Thanks for your support â€ïž
what's the reason behind puting colors etc into a class? MyColors for example
@@Kuba-xf3gi Manging app colors from one place
@@flutterguys Yea but if u would put them just straight into file that's not the same?
@@Kuba-xf3gi Dart is a class based language you have to use class not global variables
@@flutterguys Ok, thanks
I have a question: can this application play music in the background?
No, but maybe I will work on it.
۔ۯۧ ۹ێÙۧ đœ
đđâ€ïž
Vscode theme?
Athom
vidmate app??
@@funnydogs9410 What?
@@flutterguys make vidmate app clone
hey Will you share the source codes?
Check description
Firebase free or not?
bro, then how to install at android?
Run flutter build apk --split-per-abi
in terminal
â@@flutterguyswhat about IOS??
@@antoniofuller2331 It is preferable to compile your app and put it on testfligth (appstore) in order to be able to test it on other iOS devices
Hey guys. I hope you all are doing well. Just a quick question can I use Get x state management instead of Bloc?
Yes you can
@@flutterguys right. And what will be the changes in the project structure?
Does this follows MVC?
Clean Architecture
It Follows solid principle far better than MVC I guess
â@@Liv_Lifetrue
very difficult for a beginner to understand
Where is the demo? Very disappointing đ
@@gautampatoliya6872 Demo is design