2020-07-30 16:01:58 +02:00
[![Pub ](https://img.shields.io/pub/v/miniplayer?color=2196F3 )](https://pub.dev/packages/miniplayer)
2020-07-30 15:58:35 +02:00
2020-09-23 10:22:29 +02:00
A lightweight flutter package to simplify the creation of a miniplayer by providing a builder function with the current height and percentage progress. The widget responds to tap and drag gestures and is highly customizable.
**What is a miniplayer?**
2020-09-23 10:26:59 +02:00
Miniplayers are commonly used in media applications like Spotify and Youtube. A miniplayer can be expanded and minified and remains on the screen when minified until dismissed by the user.
2020-09-23 10:22:29 +02:00
See the demo below for an example.
2020-07-29 22:13:39 +02:00
2020-08-03 15:03:54 +02:00
## Demo
2020-08-26 14:47:39 +02:00
![demo ](./example/demo_gif/demo.gif "demo" )
2020-08-03 15:03:54 +02:00
2020-07-30 21:38:41 +02:00
## Usage
2020-07-29 22:13:39 +02:00
2020-07-30 17:02:14 +02:00
```dart
Miniplayer(
minHeight: 70,
maxHeight: 370,
builder: (height, percentage) {
return Center(
child: Text('$height, $percentage'),
);
},
),
```
2020-09-23 10:22:29 +02:00
2020-09-23 10:26:59 +02:00
## Options
2020-09-23 10:22:29 +02:00
< table >
< tr >
< td > onDismiss< / td >
2020-09-23 10:26:59 +02:00
< td >
2020-09-23 10:22:29 +02:00
< pre lang = "dart" >
Miniplayer(
onDismiss: () {
//If onDismiss is set,
//the miniplayer can be dismissed
2020-09-23 10:30:13 +02:00
//Handle onDismissed here
2020-09-23 10:22:29 +02:00
},
),
< / pre >
< / td >
2020-09-23 10:58:01 +02:00
< td >
2020-09-23 10:22:29 +02:00
< img src = "./example/demo_gif/demo_dismiss.gif" / >
< / td >
< / tr >
2020-09-23 11:05:30 +02:00
< tr > < / tr >
2020-09-23 10:58:01 +02:00
< tr >
< td > valueNotifier< / td >
< td >
< pre lang = "dart" >
final ValueNotifier< double > playerExpandProgress =
ValueNotifier(playerMinHeight);
< br / >
Miniplayer(
valueNotifier: playerExpandProgress,
),
< / pre >
< / td >
< td >
< img src = "./example/demo_gif/demo_valueNotifier.gif" / >
< / td >
< / tr >
2020-09-23 10:22:29 +02:00
< / table >
### Usage without BottomNavigationBar
2020-08-27 13:21:10 +02:00
This method is only recommended for simple apps. If you want to use dialogs or persistent widgets such as a BottomNavigationBar, use the second (slightly more advanced) method as described in the [example ](https://pub.dev/packages/miniplayer/example ) which uses Navigator as a base.
2020-07-30 21:38:41 +02:00
2020-07-31 08:45:33 +02:00
```dart
2020-07-30 21:38:41 +02:00
import 'package:flutter/material.dart';
import 'package:miniplayer/miniplayer.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Miniplayer Demo',
theme: ThemeData(
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
builder: (context, child) { // < --- Important part
return Stack(
children: [
child,
Miniplayer(
minHeight: 70,
maxHeight: 370,
builder: (height, percentage) {
if(percentage > 0.2)
//return Text('!mini');
else
//return Text('mini');
},
),
],
);
},
);
}
}
```
2020-09-23 10:30:13 +02:00
### Usage with BottomNavigationBar
2020-07-30 21:38:41 +02:00
2020-08-27 12:20:36 +02:00
[See example ](https://pub.dev/packages/miniplayer/example )