Flutter Music App Development

TASK DESCRIPTION:

Create a flutter app.

2. Use assets (eg. audios and videos).

3. App will have to play this audios and videos from Assets.

4. Also add Features to play audio and video from Local Storage.

5. Create buttons like play, pause and stop for audio and video both.

DEMO OF APP :

InShot_20210127_213952938.mp4

GITHUB LINK :

suman526/flutter_music_video

Music is the art of arranging sounds in time to produce a composition through the elements of melody, harmony, rhythm, and timbre.It is one of the universal cultural aspects of all human societies.

I tried to make a personal music app and video app

Packages used:

1. We will use flutter_audio_query to fetch the music form our external storage(eg. mobile phone, memory card, etc).

2. just_audio is a feature-rich audio player for Android, iOS, macOS and web.

3. video_player is a Flutter plugin for iOS, Android and Web for playing back video on a Widget surface.

4. Flick Video Player is a video player for flutter. The video_player plugin gives low level access for the video playback. Flick Player wraps video player under the hood and provides base architecture for developers to create their own set of UI and functionalities.

Setting up the project::

First of all we will make our main page:

To begin with, we navigate to main.dart Here, replace the template code with the following code:

Building our Home Page

Continuing with our home page, we will keep it very basic with a Raisedbutton for navigating to Tracks music page. Flutter, RaisedButton widget is a material design concept of a button with elevation. It provides dimensionality to your UI along z-axis with clues of shadow.

The next button we will use is Material Button. It basically involved creating and using custom buttons. It will navigate to the video page.

Here is what the code for that looks like:

Output:

Building our Tracks Page

On pressing music button we will land to the tracks page:

In this page we will make a listview of all the songs which are in our external storage.

To fetch the music files form the external storage we will use a FutureBuilder as FlutterAudioQuery returns a future . This class provides us various methods such as getSongs, getSongsFromArtist , getSongsFromAlbum , getSongsFromArtistAlbum , etc.

OUTPUT :

Building our Audio Page

On tapping on one of the list we will land to audio page which will play our music:

This is the most important part, because this controlles various events of audio:

1. Setting up the audio

2. Creating a control pannel

This panel has a playpause button, previous button, next button, and a songProgress Slider

3. Song Duration

This function is used to format the duration of the song this is in millisecond format, we will convert it into this format 00:00 .
Here format is a string 00:00 . _formatDuration takes the duration of the song. If the duration is null then it returns — : — otherwise it returns the duration in the given format.

4. SongProgress

Output:

Building our Video Page

A Flutter plugin for iOS, Android and Web for playing back video on a Widget surface i.e video_player

OUTPUT:

If you find anything that could be improved please let me know, I would love to improve.💚💛

I hope you got an idea on Music App Development

For more such articles

Stay Connected 😄

I’ll be grateful to have connections like you on Linkedln