Music_player_App using Flutter

Music_player_App using Flutter

This Article is about Creating a Music player App using Flutter.

Flutter

Flutter is Google's UI toolkit for building beautiful, natively compiled applications for mobile,web and desktop from a single Codebase,

I believe that Flutter sdk and android sdk are installed. As a IDE I have used Visual Studio Code

APP

Flutter is mainly used for its beautiful User Interface.Flutter gives us so many Inbuilt Packages which helps us to easily work the overall development of the application.

Download Project Assets

  1. Sushant Singh and Sanajana Sanghi image from Dilbechara movie.
  2. Allu Arjun and Pooja Hegde image from AlaVaikuntapuramlo movie.
  3. Ram Charan and Genila image from Orange movie.
  4. Music Background images

The output of this App is

No alt text provided for this image

This is the First Page and we click on 1st Song in Recommended the next page will open.

No alt text provided for this image

This is the audio player and we click on the pause button the song start playing.

The overall Output video is


Enter Project Assets

After images are downloaded I have interested into the assets and images folder. The structure of the project looks something like this.

No alt text provided for this image

Mention Project Assets

After we put Assets and images into project, we need to mention the asset and image files in the pubspec.yaml file as follows

No alt text provided for this image

Creating Main UI

In the main UI, I have displayed a list of images of some movie songs. So, as a start we need to delete all code in main.dart. And try to make as its follows.

No alt text provided for this image
No alt text provided for this image

In this I have included Background images and Songs images using Stack Method in Scaffold and written an function call as Song Item.

No alt text provided for this image
No alt text provided for this image

Written Song item function with respect to title,artist and image. Also created an navigator with function called Detailed Screen.

No alt text provided for this image

Here I have written an Detail Screen function and also created Stack method to display background images and Utils Functions.

No alt text provided for this image
No alt text provided for this image
No alt text provided for this image


No alt text provided for this image

Here I have written all Utils functions with respect to Row Display.

No alt text provided for this image

If the button pressed, the song will start played using the song has been stored in assets folder. It is played using AudioCache() method.


To view or add a comment, sign in

Others also viewed

Explore content categories