flutter_music_player 0.0.1

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

FlutterMusicPlayer

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

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 the 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,
      ),
    );
  }
}

copied to clipboard

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();

copied to clipboard

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,
          )

copied to clipboard

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,
        ),
      ),
    )

copied to clipboard