4d7cf69126 | ||
---|---|---|
example | ||
lib | ||
CHANGELOG.md | ||
LICENSE | ||
README.md | ||
pubspec.yaml |
README.md
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? 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. See the demo below for an example.
Demo
Usage
Stack(
children: <Widget>[
YourApp(),
Miniplayer(
minHeight: 70,
maxHeight: 370,
builder: (height, percentage) {
return Center(
child: Text('$height, $percentage'),
);
},
),
],
),
Options
Parameter | Implementation | Explanation |
---|---|---|
onDismiss |
Miniplayer(
onDismiss: () {
//Handle onDismissed here
},
),
|
If onDismiss is set, the miniplayer can be dismissed |
valueNotifier |
final ValueNotifier<double> playerExpandProgress =
ValueNotifier(playerMinHeight);
|
Allows you to use a global ValueNotifier with the current progress. This can be used to hide the BottomNavigationBar. |
Persistence
Implementing the miniplayer as described under usage - for instance by wrapping it in a stack alongside the Scaffold
body - would work out of the box but has some disadvantages. If you push a new screen via Navigator.push
the miniplayer would disappear. What we want is a persistent miniplayer which stays on every screen.
You have the option of two methods when it comes to archiving the miniplayer's persistent state, which depends on the use case. The first method is only recommended for simple apps and use cases. If you want to use dialogs or persistent widgets such as a BottomNavigationBar, use the second (slightly more advanced) method
First method (Simple)
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');
},
),
],
);
},
);
}
}
Second method (Advanced)
Roadmap
- Add a controller to be able to set positions programmatic
- Add an option to handle horizontal gestures as well (like Spotify does)
- Rewrite the API for onDismiss (breaking change)