Create a Spotify Music Player UI Clone using Flutter

We can create a flutter music player application in no time which will look very similar to Spotify App.

What is Flutter?

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. Flutter is an app SDK for building high-performance, high-fidelity apps for iOS, Android, web (beta), and desktop (technical preview) from a single codebase. The goal is to enable developers to deliver high-performance apps that feel natural on different platforms. We embrace differences in scrolling behaviors, typography, icons, and more.

Why use Flutter?

What are some advantages of Flutter? It helps you:

1. Faster code writing

For developers, Flutter means faster & more dynamic mobile app development. We can make changes in the code and see them straight away in the app! This is the so-called Hot reload, which usually only takes (milli)seconds and helps teams add features, fix bugs, and experiment faster. It is one of the things about Flutter loved by every top Flutter app development team.

Hot reload is also very comfortable in developer-designer cooperation when we want to improve or experiment with an app’s look and check the effects on the spot. In other words, with Flutter, your designer or tester can work together with a developer on the UI, making changes — for example, “Put it 2 pixels right” or “Make the animation faster” — and see them immediately.

Most types of code changes can be hot reloaded. But there is a list of changes that require a full restart: Hot reload Limitations.

Whereas, in the case of native app development the project needs to be rebuilt and that takes much more time. You have to wait for every single change — sometimes, even up to several minutes.

2. One code for 2 platforms

Developers write just one codebase for your 2 apps — covering both Android and iOS platforms. Flutter doesn’t depend on the platform, because it has its own widgets and designs. This means that you have the same app on two platforms. Yet what’s important is that, if you want to differentiate your apps — it’s possible.

3. Less testing

If you have the same app for 2 platforms, it means less testing! The Quality Assurance process can be faster. Because of one codebase, the developers write automatic tests only once. What’s more, Quality Assurance specialists have less work to do, because they have only one app to check. Of course, if your apps have some differences, they need to be tested on both platforms.

4. Faster apps

Flutter apps work in a smooth and fast way, without hanging and cutting while scrolling. If you want to understand why and how it works from the technical point of view, read this article. Also, check out this amazing page in the Flutter documentation that talks about best practices for app performance.

5. Designs which your users will love

Flutter is designed to make it easy to create your own widgets or customize the existing widgets. Here you can browse a catalog of Flutter’s widgets and view, for example, Material Design widgets and Cupertino widgets.

6. The same app UI on older devices

Your new app will look the same, even on old versions of Android and iOS systems. There are no additional costs for supporting older devices. Flutter runs on Android Jelly Bean or newer, as well as iOS 8 or newer.

7. Perfect for MVP

Do you need an MVP (Minimum Viable Product) for your app to show it to your investors? Flutter will be perfect, especially if you have little time.

Now lets come to how to create our own Music Player App.

⚡Prerequisites for the Practical ⚡

1. Flutter SDK.
2. Dart SDK.
3. Android SDK.
4. Visual Studio Code with Flutter and Dart plugins.
5. Android Studio with Flutter and Dart plugins.
6. A real mobile phone or Android Virtual Device.

Note: After downloading all SDK’s we have to make it as Environment variables.

To ensure everything is working fine we have to type in CMD

flutter doctor -v

Let’s get our hands dirty with Flutter.

First, we have to create a flutter project for that we have to go to command prompt and type

flutter create MusicUI

After creation of flutter project, it will create many folders and files for us. But what is important for us is what inside “lib” folder ,that is, main.dart.

Now we will write every code over here.

Now everything in Flutter is a widget. So we only have to add and modify widgets.

In this article, I am not going to cover all my code analysis. You all can go to my GitHub Repository for all my codes.

DipadityaDas/SpotifyUIClone

To make a Music App, we need to display the Album at the top, then an Image/poster of the Music Album, after that we need to display name of the song and the name of the Artist and after that we have our Music App’s basic controls.

To do the above sections I have use a basic structure. First, I have taken a Row() widget which will have down arrow, album details and Vertical Ellipses. Then we will use SizedBox() widget to provide some space between the photo and above row. Then a Container() widget for the image to display. After that again an SizedBox() to provide space between image and name of the song. Then we will enclose name of the Song, name(s) of Artist(s) and the favorite button together in a Single Container(). After that we provide an Slider() widget stack with two Text() fields, one for current position/time of the song and the other for the total duration of the song. Here comes the final part where we are going to enclose 5 controls in a Single Row() container.

Now all the icons that I have used is either from the provide Material Icons or from Line Icons which I have declared in the pubspec.yaml file. The audio controls are seamlessly integrated with slider using audioCache and audioplayer library which we have also specified in the pubspec.yaml file.

For the assets to be used in our application we enable in pubspec.yaml file.

pubspec.yaml

After doing all the above changes we will see our Music App like this

I have done this app in the training of app development using flutter and dart under the mentorship of Mr. Vimal Daga and LinuxWorld. Thank you sir for teaching me in a wonderful way. If you find my work interesting then you can connect me on LinkedIn.

Dipaditya Das - University of Engineering & Management (UEM) - Howrah, West Bengal, India |…

🌟Happy Coding Everyone and Thank you for reading.🌟