Flutter Full Stack Tutorial – Spotify Clone w/ MVVM Architecture, Python, FastAPI, Riverpod

Post Content

Learn to build a full stack music streaming app very similar to Spotify using the MVVM Architecture. In this course, @RivaanRanawat uses Flutter for the app’s frontend, FastAPI for the backend, PostgreSQL for the database, Hive for local data storage and Riverpod (Generators) for state management.

Project Source Code – https://github.com/RivaanRanawat/flutter-spotify-clone-tutorial
AppPallete Class GitHub – https://github.com/RivaanRanawat/flutter-spotify-clone-tutorial/blob/master/client/lib/core/theme/app_pallete.dart
FastAPI Documentation – Dependencies with yield – https://fastapi.tiangolo.com/tutorial/dependencies/dependencies-with-yield/
GitHub Assets – https://github.com/RivaanRanawat/flutter-spotify-clone-tutorial/tree/master/client/assets/images
Normalisation Principles – https://learn.microsoft.com/en-us/office/troubleshoot/access/database-normalization-description

Android Manifest XML Audio Wave Code:
“`
configurations.all {
resolutionStrategy {
eachDependency {
if ((requested.group == “org.jetbrains.kotlin”) && (requested.name.startsWith(“kotlin-stdlib”))) {
useVersion(“1.8.0”)
}
}
}
}
“`

Contents
(0:00:00) Introduction & Prerequisites
(0:01:42) Project Installation
(0:03:15) Flutter Installation & Boilerplate Code
(0:04:21) MVVM Architecture + Feature-wise Development
(0:10:25) Signup Page UI, Theming & Form
(0:48:32) Login Page UI
(0:53:29) Virtual environment, FastAPI Setup, Exploring FastAPI, Docs
(1:13:44) Signup API Route, PostgreSQL Setup & SQLAlchemy
(1:54:55) Code Refactoring – Signup API
(2:10:49) Login API Route
(2:21:08) Psycopg2 error!
(2:21:42) Client Side Login & Signup Route Integration
(3:13:23) Auth View Model – Introducing Riverpod Generators, Lint!
(3:53:35) Running on Android Emulator
(3:56:00) Persisting Auth State & Getting User Data – JWT
(4:59:44) Upload Song Page UI, Picking Color, Audio & Image Files
(5:27:00) Testing on Android, Audio Wave UI
(5:41:41) Uploading Song Data – PostgreSQL, Cloudinary
(6:15:24) Song ViewModel – Upload Song
(6:33:12) Home Page Bottom NavBar
(6:43:28) Fetching & Displaying All Songs
(7:14:07) Playing Songs in Flutter (from anywhere in the app)
(7:26:01) Music Slab UI
(7:41:31) Music Slab Functionalities – Play/Pause Music, Display Song Progress
(7:56:55) Music Player UI & Functionalities
(8:40:51) Storing, Fetching & Displaying Recently Played Music – Hive
(9:04:53) Playing Background Music in Flutter
(9:10:03) Favorite Music – Backend, Frontend (Displaying Fav Music)
(10:04:05) Conclusion

Thanks to our Champion and Sponsor supporters:
Drake Milly
Ulises Moralez
Goddard Tan
David MG
Matthew Springman
Claudio
Oscar R.
jedi-or-sith
Nattira Maneerat
Justin Hual