The Example will show about Flutter Music App Example With API Deezer. This article will creating a simple application using flutter_sound: ^2.0.0. This plugin handles file from remote url. This plugin can handle playback stream from native (To sync exact time with bridging). This example use API from Deezer to get music catalogue. Deezer API provides you some global parameters in order to simplify and organize your requests . Deezer give unlimited Access, without stress, without identification. Deezer Simple API provides a nice set of services to build up web applications allowing the discovery of Deezer’s music catalogue.

You can read other article with flutter  in this section :

Preparation

1. Create Deezer Account. Create Here

deezer-register-form

2. Go to https://developers.deezer.com/ then create app. You can find Application ID and Secret key after created. ( for Example : fluttermusic )

deezer-create-app

deezer-app-example

3. Manage Oauth Deezer API, he documentation in Here. Running the command in your browser like below:

If the user is not connected, this login popup will open so that they can be authenticated.

deezer-login-form

If the user clicks on “don’t allow” your application is not authorized. The browser then redirects the user to the ‘redirect_uri’ (via HTTP 302) with the parameter ‘error_reason’ = ‘user_denied’

If the user clicks on “allow” your application authorized. The browser then redirects the user to the ‘redirect_uri’ (via HTTP 302) with the parameter ‘code‘ = an authorization code.

deezer-permissions

With this code, you will be able to request an access token which is necessary to make action requiring the permissions you asked. This step is needed to authenticate the application. To do so, you need to pass the code you just receive and your application secret code to the Deezer access_token url :

This will authenticate your application and deliver the access token.

If your application is successfully authenticated and the authorization code is valid, the authorization server will return the access token.

deezer-access-token

Building

First, we must create a project using Visual Studio Code software with name “fluttermusic”. Let’s to create a new project using Visual Studio Code:

  1. Invoke View > Command Palette.
  2. Type “flutter”, and select the Flutter: New Project.
  3. Enter a project name, example such as “fluttermusic”, and press Enter.
  4. Create or select the parent directory for the new project folder.
  5. Wait for project creation progress to complete and the main.dart file to appear.

flutter-new-project

Next, add the flutter_sound package to your project. The flutter_sound  is This plugin provides simple recorder and player functionalities for both android and ios platforms. This only supports default file extension for each platform. This plugin handles file from remote url. This plugin can handle playback stream from native (To sync exact time with bridging).

Then we click the get package, wait until the process is complete. The file pubspec.yaml like that :

Later, create RouteClass to access Deezer API. (example : musicservice.dart)

For Serializing JSON we need model classes, The models are song.dart , album.dart , artist.dart, chart.dart.

We will create browse_widget.dart to main screen, Our browse screen can be allow the user to select Top Album Chart,Top Songs Chart and List Songs from Top One Album Chart. The browse screen code like below:

And the second screen is search widget. This widget works to find track,album,or artis you want. The code like below :

The application can be run to show output below :

flutter-music-search-widget

flutter-music-album-detail

flutter-music-player-widget

For complete source code you can see flutter music app github in Here.

Thank you for reading this article about Flutter Music Player App using Deezer API, I hope this article is useful for you. Visit My Github about Flutter in Here.

Flutter Music App Example With API Deezer

Leave a Reply

Your email address will not be published. Required fields are marked *