Day 2 of Building a Spotify Clone in 30 days using Flutter

4 min readOct 8, 2019

As we had discussed in our previous article of this series. We going to start writing our first line of code in building this massive application.

Quick quote — A journey of a thousand miles begins with the single step

There will be a lot of things to be considered while building an application, i will try to explain my level best in this, In case if you have any questions, don’t hesitate to ping me on social media or any where… i will be there for you to help….

Repo link : https://github.com/theflutterdev/Spotify-Clone-using-Flutter

I am going to start by running the flutter create Spotify_clone command over on my terminal and opening the project in VS Code(You can use any code editor of your choice, which actually supports flutter)

Once done with that, create a firebase project and add your application to the firebase

Read the following instructions to add your app to firebase project : https://firebase.google.com/docs/flutter/setup

After that go to pubspec.yaml file and add the following plugins under the dependencies section

Make sure you are adding the plugin versions based on Android X Compatibility — Read more here

Along with that i also added some necessary fonts and images

Now it’s the right time to start coding…

I opened spotify app on my phone and got a clear cut idea of spotify ui and started coding it…

I started to divide the entire code in to two parts one is the UI part and the other is the logical component… and we are using provider package to do these stuff

In the main.dart file i had made a basic dark theme template for the entire project to have and over the MaterialApp widget i triggered the SplashScreen

Well! Splash screen is something that opens up on app opening — most of the time this will be a logo of the app or some interactive ui design

But in spotify its just the logo of the brand. So, i just set an image on the screen

I set this piece of code in the components/auth.dart file in which we are going to be dealing with Authentication and all

On app open it will check weather any account is already logged in or not in the app. if any one is logged in then it will open the homepage

else it will be opening the register and login page (Where there is a choice of login and signup)

Let’s see the login and signup stuff

Before that just have a look at the logical component of the auth.dart file which is pretty much about Login/Signup/SessionManagement etc.

This file path is lib/logic/auth_logic.dart

And it pretty much contain all the logics for our UI and we are going to call each of these properties to the UI for the user activity.

As this file is entirely about logic the next one is about the UI

The out put of this code at the end is in this manner

Now take a look at the Sign up page code

and the UI at the end looks like this

And it also got an amazing animation.. which i will be showing you at the end

Now, here is the Login Page Code

We are going to add forgot password and its logic in the next article of the series

And our logic file on top actually verifies from the database and authenticate the user and opens up home page

and this is the complete video of how this application will be at the end

Clone the entire repo at https://github.com/theflutterdev/Spotify-Clone-using-Flutter

Commits will be performed every day in during the period of series… So, keep tracking everyday

My intention

This project is just to help developing the community/educational purpose and i do not encourage my fellow readers to mess up with any kind of commercial and illegal activities related to the Trademarks/Images and Copyrights used in this Project.

Trademarks rights owned by — Spotify Technology S.A ( Stockholm, Sweden )