Creating a simple music player that can play a song.

What is Flutter? And why do I like it?

Flutter is an open-source UI software development kit created by Google. It is used to develop applications for Android, iOS, Linux, Mac, Windows, Google Fuchsia and the web from a single codebase. As to why i like it is because of the simple UI/UX it offers to the developers for creating mobile apps. It also supports hot reload that means I can only load the packages that I have changed instead of restarting the full app.

Now, let’s come to our topic for the day. Building a simple music player that can play only one song. But this is just for practice. You can also use this to play many songs. I am using VSCode and android studio.

This is my setup

Before getting started I am going to explain a bit about AudioCache.

Now, Whats AudioCache?

This is a class that is used to cache or make a temporary storage of the audio file. Flutter can only play the audios present in the local device. This class first copies the required file to a temporary folder and then plays them. This is just a brief about this class. If you want to learn more then click here.

Let’s get started.

First you have to install one library in the pubspec.yaml file under dependencies section.

audioplayers: ^0.15.1

Add the above line and save the yaml file to download and install the package. VSCode will automatically do that for me. Once downloaded, I have to restart my IDE to enable the package.

After restarting, we have to import the package. The code for importing the library is:

import 'package:audioplayers/audio_cache.dart';
import 'package:audioplayers/audioplayers.dart';

After importing the packages, I am going to create two objects. One object of AudioPlayer class and another of AudioCache class:

AudioPlayer newPlayer = new AudioPlayer();
AudioCache audio = new AudioCache(fixedPlayer: newPlayer);

In, AudioCache I am using AudioPlayer object as the fixed player. After creating the objects, I am going to write 3 functions that would play, pause or stop the current song playing. Also I am going to create two variables that would tell whether the song is playing or stopped.

playAudio() {
if (play == false || stop == true) {
audio.play("audio/onemorelight.wav");
play = true;
stop = false;
}
}
pauseAudio() {
if (play == true) {
newPlayer.pause();
play = false;
}
}
stopAudio() {
if (play == true && stop == false) {
newPlayer.stop();
play = false;
stop = true;
}
}

I have also create a function to return the image that is loaded. This function is unnecessary, it can be accomplished by using a lambda function. To make the code simple I have used another function.

myImage() {
var img = Image.asset("image/kanish.jpg");
return img;
}

Now, here is the code which has all the widgets and returns a MaterialApp variable which will be used to create the app.

myHome() {
var home = Scaffold(
appBar: AppBar(
title: Text("My Music Player"),
backgroundColor: Colors.greenAccent,
),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
alignment: Alignment.center,
width: 200,
height: 90,
child: Text(
"Warhead Kopisnath",
style: TextStyle(
fontSize: 23.5,
fontStyle: FontStyle.italic,
),
),
),
Container(
alignment: Alignment.centerRight,
width: 400,
height: 400,
child: myImage(),
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
SizedBox(
width: 50,
height: 50,
child: FlatButton(
onPressed: playAudio,
child: Icon(
Icons.play_arrow,
size: 30,
),
),
),
SizedBox(
width: 50,
height: 50,
child: FlatButton(
onPressed: pauseAudio,
child: Icon(Icons.pause),
),
),
SizedBox(
width: 50,
height: 50,
child: FlatButton(
onPressed: stopAudio,
child: Icon(
Icons.stop,
),
),
)
],
),
],
),
);
var design = MaterialApp(
home: home,
debugShowCheckedModeBanner: false,
);
return design;
}

Here, I am using scaffold to create the body of my app. The scaffold will create standard body in which we can add more containers. The app bar is managed by the function AppBar, which allows to give a different color to the app bar(default is blue) and a child which may contain a text. For the body, I am using a column widget which allows to create many children.

The first container will be used to display the name of my friend using the Text() class. We can give our custom font but I am going for the predefined ones, that is italic and size is 23.5. We can also specify the color of the text but as the background is white i am keeping it black. Now I am using a container of dimension 400 x 400 to display my image of my friend.

Next I am using a row widget which will allow me to place my buttons side by side. I am using FlatButton widget to create my buttons or icons. The the FlatButton will be inside a SizedBox which will keep a distance between them. The different icons that I am using to display the play, pause and stop icons will be managed by the Icon() class and Icons class.

Finally, the variable design will call MaterialApp() to create the app which will be send to the main.dart file which has the function to run the app. The code in main.dart file is:

import 'package:flutter/material.dart';
import 'package:musicPlayer/ui/home.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return myHome();
}
}

Now, it’s time to launch our app. Use ctrl + f5 to launch the emulator and run our code without debugging. Alternatively, you can select run from the top and select “run without debugging”. Then you will be prompted to select the device you want to run and wait for it to install the app on your virtual phone. If you are doing it for the first time then it may take upto 15 min for the app to installing depending on your system. For me it took about 5 min for it to launch completely.

Finally your app should look like this:

You can check if all the buttons are working or not and Voila!!! You have created your first music player. You are free to change color add more songs and do a ton stuff to it.

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