<p>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.</p> <p>** <em>How to play an audio file in flutter?</em> </p> <p> * * </p> <p> * * **</p> <p>For this tutorial, we will use two packages.</p> <h2 id="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">- **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.</h2> <p>**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.</p> <p><strong>STEPS TO FOLLOW:</strong></p> <ul> <li><p>Add both the package dependencies as shown here</p> </li> <li></li> </ul> <p><strong>(Optional)</strong> 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</p> <ul> <li>Finally, paste this entire code in your main.dart file to achieve the same results as shown in the video above.</li> </ul> <p>color: #dcdcaa;](runApp(color: #4ec9b0;](MyApp());</p> <p>color: #569cd6;](class color: #4ec9b0;](MyApp color: #569cd6;](extends color: #4ec9b0;](StatelessWidget { color: #6a9955;](// This widget is the root of your application.</p> <p>color: #569cd6;](@override</p> <p>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'), ); } }</p> <p>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</p> <p>color: #4ec9b0;](_MyHomePageState color: #dcdcaa;](createState() => color: #4ec9b0;](_MyHomePageState(); }</p> <p>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</p> <p id="4ec9b0;](AudioPlayer();" color:="" audioPlayer="color:">color: #569cd6;](void color: #dcdcaa;](initState() 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</p> <pre>} color: #c586c0;](else { color: #dcdcaa;](print(color: #ce9178;]('Some error occured in playing from storage!'); } </pre> <p>} 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</p> <pre>} color: #c586c0;](else { color: #dcdcaa;](print(color: #ce9178;]('Some error occured in pausing'); } </pre> <p>} 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</p> <pre>} color: #c586c0;](else { color: #dcdcaa;](print(color: #ce9178;]('Some error occured in stopping'); } </pre> <p>} 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</p> <pre>} color: #c586c0;](else { color: #dcdcaa;](print(color: #ce9178;]('Some error occured in resuming'); } </pre> <p>} color: #569cd6;](@override</p> <p id="569cd6;](true;" _isPlaying="color:">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(() ); } color: #c586c0;](else { color: #dcdcaa;](resumeAudio(); color: #dcdcaa;](setState(() ); } }, 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(() ); }, 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(() ); 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, ), ], ), ], ), ), ); } } `</p> <p>Hope you enjoyed :) If you have any questions, drop a comment below. Keep Fluttering!</p>
How to play an audio file in flutter?
This Article is posted by abbas.devcode at 3/19/2020 12:34:50 PM
Check out our other latest articles
Safearea widget - How to avoid visual overlap with Notch on flutter mobile app?How to convert row of widgets into column of widgets in flutter based on screen size?
How to run Flutter programs from GitHub?
How to get screen orientation in flutter?
NavigationRail example in flutter
Tags: audio file in flutter
Check out our other latest articles
Safearea widget - How to avoid visual overlap with Notch on flutter mobile app?How to convert row of widgets into column of widgets in flutter based on screen size?
How to run Flutter programs from GitHub?
How to get screen orientation in flutter?
NavigationRail example in flutter