Hi Guys,
In this article I'm going to share you the code that is required to play audio files when they are organized in the list.
Here is the output of the sample project that we have created.
![](https://fluttercentral.com/Uploads/29388637-8f97-4639-b7da-941c149902a1.PNGwidth="50%height="auto](
So, in order to try this. font-size: 1rem;](Add the below line to you pubspec.yaml file.
And then copy past the below code to main.dart file. Note that the audio files are fetched from the internet.
audiolist = [
color: rgb(78, 201, 176);](AudioFile(
title: color: rgb(206, 145, 120);]('Robo 1 Movie',
description: color: rgb(206, 145, 120);]('Sari gama pa 1',
url:
color: rgb(206, 145, 120);]('https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3',
playingstatus: color: rgb(181, 206, 168);](0),
color: rgb(78, 201, 176);](AudioFile(
title: color: rgb(206, 145, 120);]('Robo 2 Movie',
description: color: rgb(206, 145, 120);]('Sari gama pa 2',
url:
color: rgb(206, 145, 120);]('https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3',
playingstatus: color: rgb(181, 206, 168);](0),
color: rgb(78, 201, 176);](AudioFile(
title: color: rgb(206, 145, 120);]('Robo 3 Movie',
description: color: rgb(206, 145, 120);]('Sari gama pa 3',
url:
color: rgb(206, 145, 120);]('https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3',
playingstatus: color: rgb(181, 206, 168);](0)
];
color: rgb(86, 156, 214);](class color: rgb(78, 201, 176);](AudioFile {
color: rgb(86, 156, 214);](final color: rgb(78, 201, 176);](String title;
color: rgb(86, 156, 214);](final color: rgb(78, 201, 176);](String description;
color: rgb(86, 156, 214);](final color: rgb(78, 201, 176);](String url;
color: rgb(78, 201, 176);](int playingstatus;
color: rgb(78, 201, 176);](AudioFile({color: rgb(86, 156, 214);](this.title, color: rgb(86, 156, 214);](this.description, color: rgb(86, 156, 214);](this.url, color: rgb(86, 156, 214);](this.playingstatus = color: rgb(181, 206, 168);](0});
}
color: rgb(86, 156, 214);](class color: rgb(78, 201, 176);](MyHomePage color: rgb(86, 156, 214);](extends color: rgb(78, 201, 176);](StatefulWidget {
color: rgb(86, 156, 214);](@override
color: rgb(78, 201, 176);](_MyHomePageState color: rgb(220, 220, 170);](createState() => color: rgb(78, 201, 176);](_MyHomePageState();
}
color: rgb(86, 156, 214);](class color: rgb(78, 201, 176);](_MyHomePageState color: rgb(86, 156, 214);](extends color: rgb(78, 201, 176);](State {
color: rgb(78, 201, 176);](AudioPlayer audioPlayer = color: rgb(78, 201, 176);](AudioPlayer();
color: rgb(86, 156, 214);](@override
color: rgb(78, 201, 176);](Widget color: rgb(220, 220, 170);](build(color: rgb(78, 201, 176);](BuildContext context) {
color: rgb(197, 134, 192);](return color: rgb(78, 201, 176);](Scaffold(
appBar: color: rgb(78, 201, 176);](AppBar(
title: color: rgb(78, 201, 176);](Text(color: rgb(206, 145, 120);]('Audio List'),
),
body: color: rgb(78, 201, 176);](MyItem(
audioPlayer: audioPlayer,
));
}
}
color: rgb(86, 156, 214);](class color: rgb(78, 201, 176);](MyItem color: rgb(86, 156, 214);](extends color: rgb(78, 201, 176);](StatefulWidget {
color: rgb(86, 156, 214);](final color: rgb(78, 201, 176);](AudioPlayer audioPlayer;
color: rgb(86, 156, 214);](const color: rgb(78, 201, 176);](MyItem({color: rgb(78, 201, 176);](Key key, color: rgb(86, 156, 214);](this.audioPlayer}) : color: rgb(86, 156, 214);](super(key: key);
color: rgb(86, 156, 214);](@override
color: rgb(78, 201, 176);](_MyItemState color: rgb(220, 220, 170);](createState() => color: rgb(78, 201, 176);](_MyItemState();
}
color: rgb(86, 156, 214);](class color: rgb(78, 201, 176);](_MyItemState color: rgb(86, 156, 214);](extends color: rgb(78, 201, 176);](State {
color: rgb(78, 201, 176);](int result;
color: rgb(78, 201, 176);](int status = color: rgb(181, 206, 168);](0;
color: rgb(86, 156, 214);](@override
color: rgb(78, 201, 176);](Widget color: rgb(220, 220, 170);](build(color: rgb(78, 201, 176);](BuildContext context) {
color: rgb(197, 134, 192);](return color: rgb(78, 201, 176);](ListView.color: rgb(220, 220, 170);](builder(
itemCount: audiolist.length,
itemBuilder: (color: rgb(78, 201, 176);](BuildContext context, color: rgb(78, 201, 176);](int index) {
color: rgb(197, 134, 192);](return color: rgb(78, 201, 176);](GestureDetector(
onTap: () color: rgb(197, 134, 192);](async {
color: rgb(197, 134, 192);](if (audiolist[index].playingstatus == color: rgb(181, 206, 168);](0) {
result = color: rgb(197, 134, 192);](await widget.audioPlayer.color: rgb(220, 220, 170);](stop();
result = color: rgb(197, 134, 192);](await widget.audioPlayer
.color: rgb(220, 220, 170);](play(audiolist[index].url, isLocal: color: rgb(86, 156, 214);](true);
color: rgb(220, 220, 170);](setState(() {
color: rgb(197, 134, 192);](for (color: rgb(78, 201, 176);](int i = color: rgb(181, 206, 168);](0; i
In this example, I have only used Play and Stop functions. But if you want to try more options like pause and resume. You could check this link. [https://pub.dev/packages/audioplayers](https://pub.dev/packages/audioplayers)
Hope this will be helpful to you.Thanks,Srikanth