By the end of this tutorial, you will be able to add a music player as shown in the video in your own flutter app.
**
*How to play an audio file in flutter?*
**
**
*
*
**
**
*
*
**
For this tutorial, we will use two packages.
-
**audioplayers **package - This package actually does most of the part of our tutorial. It will allow us to play audio, pause, stop & resume. You can also seek through the duration. However, for the sake of keeping the tutorial short & simple, I have excluded it.
-
**file_picker **package - This package will allow us to pick audio (it works for other file types too) from our local storage and generate its path.
**STEPS TO FOLLOW:**
- Add both the package dependencies as shown here
-
**(Optional)** However, it worked fine on my android device without adding any permissions but just in case you see errors piling up, try adding permissions for android and/or iOS for the file_picker plugin. You can find the permissions to be added on the package's official docs on pub.dev
- Finally, paste this entire code in your main.dart file to achieve the same results as shown in the video above.
color: #dcdcaa;](runApp(color: #4ec9b0;](MyApp());
color: #569cd6;](class color: #4ec9b0;](MyApp color: #569cd6;](extends color: #4ec9b0;](StatelessWidget {
color: #6a9955;](// This widget is the root of your application.
color: #569cd6;](@override
color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) {
color: #c586c0;](return color: #4ec9b0;](MaterialApp(
title: color: #ce9178;]('AudioPlayer',
theme: color: #4ec9b0;](ThemeData(
primarySwatch: color: #4ec9b0;](Colors.blue,
),
home: color: #4ec9b0;](MyHomePage(title: color: #ce9178;]('Audio Player'),
);
}
}
color: #569cd6;](class color: #4ec9b0;](MyHomePage color: #569cd6;](extends color: #4ec9b0;](StatefulWidget {
color: #4ec9b0;](MyHomePage({color: #4ec9b0;](Key key, color: #569cd6;](this.title}) : color: #569cd6;](super(key: key);
color: #569cd6;](final color: #4ec9b0;](String title;
color: #569cd6;](@override
color: #4ec9b0;](_MyHomePageState color: #dcdcaa;](createState() => color: #4ec9b0;](_MyHomePageState();
}
color: #569cd6;](class color: #4ec9b0;](_MyHomePageState color: #569cd6;](extends color: #4ec9b0;](State {
color: #4ec9b0;](bool _isPlaying = color: #569cd6;](false;
color: #4ec9b0;](AudioPlayer audioPlayer;
color: #569cd6;](@override
color: #569cd6;](void color: #dcdcaa;](initState() {
color: #569cd6;](super.color: #dcdcaa;](initState();
audioPlayer = color: #4ec9b0;](AudioPlayer();
}
color: #dcdcaa;](playAudioFromLocalStorage(path) color: #c586c0;](async {
color: #4ec9b0;](int response = color: #c586c0;](await audioPlayer.color: #dcdcaa;](play(path, isLocal: color: #569cd6;](true);
color: #c586c0;](if (response == color: #b5cea8;](1) {
color: #6a9955;](// success
} color: #c586c0;](else {
color: #dcdcaa;](print(color: #ce9178;]('Some error occured in playing from storage!');
}
}
color: #dcdcaa;](pauseAudio() color: #c586c0;](async {
color: #4ec9b0;](int response = color: #c586c0;](await audioPlayer.color: #dcdcaa;](pause();
color: #c586c0;](if (response == color: #b5cea8;](1) {
color: #6a9955;](// success
} color: #c586c0;](else {
color: #dcdcaa;](print(color: #ce9178;]('Some error occured in pausing');
}
}
color: #dcdcaa;](stopAudio() color: #c586c0;](async {
color: #4ec9b0;](int response = color: #c586c0;](await audioPlayer.color: #dcdcaa;](stop();
color: #c586c0;](if (response == color: #b5cea8;](1) {
color: #6a9955;](// success
} color: #c586c0;](else {
color: #dcdcaa;](print(color: #ce9178;]('Some error occured in stopping');
}
}
color: #dcdcaa;](resumeAudio() color: #c586c0;](async {
color: #4ec9b0;](int response = color: #c586c0;](await audioPlayer.color: #dcdcaa;](resume();
color: #c586c0;](if (response == color: #b5cea8;](1) {
color: #6a9955;](// success
} color: #c586c0;](else {
color: #dcdcaa;](print(color: #ce9178;]('Some error occured in resuming');
}
}
color: #569cd6;](@override
color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) {
color: #c586c0;](return color: #4ec9b0;](Scaffold(
appBar: color: #4ec9b0;](AppBar(
title: color: #4ec9b0;](Text(widget.title),
),
body: color: #4ec9b0;](Center(
child: color: #4ec9b0;](Column(
mainAxisAlignment: color: #4ec9b0;](MainAxisAlignment.spaceEvenly,
children: [
color: #4ec9b0;](Container(
child: color: #4ec9b0;](Column(
children: [
color: #4ec9b0;](Row(
mainAxisAlignment: color: #4ec9b0;](MainAxisAlignment.spaceEvenly,
children: [
color: #4ec9b0;](RaisedButton(
onPressed: () {
color: #c586c0;](if (_isPlaying == color: #569cd6;](true) {
color: #dcdcaa;](pauseAudio();
color: #dcdcaa;](setState(() {
_isPlaying = color: #569cd6;](false;
});
} color: #c586c0;](else {
color: #dcdcaa;](resumeAudio();
color: #dcdcaa;](setState(() {
_isPlaying = color: #569cd6;](true;
});
}
},
child:
color: #4ec9b0;](Icon(_isPlaying ? color: #4ec9b0;](Icons.pause : color: #4ec9b0;](Icons.play_arrow),
color: color: #4ec9b0;](Colors.blue,
),
color: #4ec9b0;](RaisedButton(
onPressed: () {
color: #dcdcaa;](stopAudio();
color: #dcdcaa;](setState(() {
_isPlaying = color: #569cd6;](false;
});
},
child: color: #4ec9b0;](Icon(color: #4ec9b0;](Icons.stop),
color: color: #4ec9b0;](Colors.blue,
),
],
),
],
),
),
color: #4ec9b0;](Row(
mainAxisAlignment: color: #4ec9b0;](MainAxisAlignment.spaceAround,
children: [
color: #4ec9b0;](RaisedButton(
onPressed: () color: #c586c0;](async {
color: #569cd6;](var path =
color: #c586c0;](await color: #4ec9b0;](FilePicker.color: #dcdcaa;](getFilePath(type: color: #4ec9b0;](FileType.audio);
color: #dcdcaa;](setState(() {
_isPlaying = color: #569cd6;](true;
});
color: #dcdcaa;](playAudioFromLocalStorage(path);
},
child: color: #4ec9b0;](Text(
color: #ce9178;]('Load Audio File',
style: color: #4ec9b0;](TextStyle(color: color: #4ec9b0;](Colors.white),
),
color: color: #4ec9b0;](Colors.blueAccent,
),
],
),
],
),
),
);
}
}
`
Hope you enjoyed :) If you have any questions, drop a comment below.
Keep Fluttering!