Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aminbhst/flutter_music_player
A Flutter package to create customizable music player applications with ease
https://github.com/aminbhst/flutter_music_player
Last synced: about 1 month ago
JSON representation
A Flutter package to create customizable music player applications with ease
- Host: GitHub
- URL: https://github.com/aminbhst/flutter_music_player
- Owner: AminBhst
- License: mit
- Created: 2022-09-15T10:26:39.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-09-19T06:22:23.000Z (over 2 years ago)
- Last Synced: 2023-10-27T09:05:19.533Z (about 1 year ago)
- Language: Dart
- Homepage:
- Size: 63.5 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://pub.dev/packages/flutter_music_player)
[](https://github.com/AminBhst/flutter_music_player/blob/main/LICENSE)
# FlutterMusicPlayer
A Flutter package to create a customizable music player application with ease
## Installing
With Flutter:
```shell
$ 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):
```yaml
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
```dart
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
```dart
List 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
```dart
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](https://i.ibb.co/wBZTv7y/photo-2022-09-14-19-01-00.jpg)
### 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](https://i.ibb.co/gyTVQKC/Untitled-1.png)
which demonstrates the parameters and their positioning
```dart
MaximizedMusicPlayer(
playerCustomizer: NamedPlayerCustomizer(
songTitleRowRight: FavoriteButton(),
midRowFarLeft: QueueButton(),
midRowFarRight: ShuffleButton(),
midRowRight: RepeatButton(),
),
backgroundDecoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: const Alignment(1, 1),
colors: [
audioPlayerProvider.dominantColor,
const Color.fromRGBO(32, 32, 32, 1)
],
tileMode: TileMode.decal,
),
),
)
```