Playing list of Audio files

<p>Hi Guys,</p> <p>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.</p> <p>Here is the output of the sample project that we have created.</p> <p>![](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.</p> <p>And then copy past the below code to main.dart file. Note that the audio files are fetched from the internet.</p> <p>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) ];</p> <p>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}); }</p> <p>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</p> <p>color: rgb(78, 201, 176);](_MyHomePageState color: rgb(220, 220, 170);](createState() => color: rgb(78, 201, 176);](_MyHomePageState(); }</p> <p>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</p> <p>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, )); } }</p> <p>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</p> <p>color: rgb(78, 201, 176);](_MyItemState color: rgb(220, 220, 170);](createState() => color: rgb(78, 201, 176);](_MyItemState(); }</p> <p>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</p> <p>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</p> <p>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. <a href="https://pub.dev/packages/audioplayers">https://pub.dev/packages/audioplayers</a></p> <p>Hope this will be helpful to you.Thanks,Srikanth</p>