flutter_music_player

Description:

flutter music player

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