A Flutter package to create a customizable music player application or module with ease

Main Components

  • AudioPlayerProvider
  • MinimizedMusicPlayer
  • MaximizedMusicPlayer


The provider which manages the state of the player and contains all the necessary music player functionalities and features such as Play/Pause, skipNext, SkipPrevious, Shuffle, etc...

Add the AudioPlayerProvider() as one of the providers in your main.dart file

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (context) => AudioPlayerProvider())
      child: MaterialApp(
        title: 'MusicPlayer Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        home: MyHomePage(),
        debugShowCheckedModeBanner: false,

The AudioPlayerProvider extracts the dominant color of the album cover by default, but it can be disabled by providing the extractAlbumCoverDominantColor parameter inside its constructor. You can also provide a custom albumCoverPlaceHolder in order to display a default image when the currently playing audio tracks does not contain an album cover inside its metadata.

When the play button for a song is tapped, the method setAudioSource or setSingleAudioSource has to be called

List<AudioTrack> playlist = [];
 AudioTrack song = AudioTrack(1,
        title: 'TheSongTitle',
        artist: 'TheArtist',
        duration: Duration.zero,
        filePath: 'TheFilePath'
     // or
        networkUrl: 'TheFileUrl'
     // either filePath or networkUrl have to be provided

audioPlayerProvider.setAudioSource(playlist, 0);
// the second argument is the index of the song (inside the playlist)
// that is wished to be played

// for playing a single track, use : 



The Minimized Player which when is tapped, opens the maximized player

            onTab: () => Navigator.of(context).push(TheMaximizedPlayerRoute),
            color: audioPlayerProvider.dominantColor,
            nextButton: IconButton(
              onPressed: audioPlayerProvider.next,
              icon: const Icon(
                color: Colors.white,
            progressBarBackgroundColor: Colors.white10,
            progressBarColor: Colors.white,

The code above will result in this widget


In order to customize the layout of the maximized music player, provision of a MusicPlayerCustomizer is necessary. The MusicPlayerCustomizer is an abstract class which has two implementations:

  • NamedPlayerCustomizer: uses name based parameters
  • DefaultPlayerCustomizer: uses column row based parameters

You can learn about the parameters by taking a look at this image guide which demonstrates the parameters and their positioning

      playerCustomizer: NamedPlayerCustomizer(
        songTitleRowRight: FavoriteButton(),
        midRowFarLeft: QueueButton(),
        midRowFarRight: ShuffleButton(),
        midRowRight: RepeatButton(),
      backgroundDecoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: const Alignment(1, 1),
          colors: <Color>[
            const Color.fromRGBO(32, 32, 32, 1)
          tileMode: TileMode.decal,