Pub license

FlutterMusicPlayer

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

Installing

With Flutter:

$ flutter pub add flutter_music_player

This will add a line like this to your package’s pubspec.yaml (and run an implicit dart pub get):

dependencies:
flutter_music_player: ^0.0.1

Main Components

  • AudioPlayerProvider
  • MinimizedMusicPlayer
  • MaximizedMusicPlayer

AudioPlayerProvider

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 AudioPlayerProvider() as one of the providers in your main.dart file

class MyApp extends StatelessWidget {
  @override
  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
 );
 
playlist.add(song);

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 : 
audioPlayerProvider.setSingleAudioSource(song);

audioPlayerProvider.playSong();

MinimizedMusicPlayer

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

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

The code above will result in this widget

MaximizedMusicPlayer

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

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

Github

View Github