miniplayer 1.0.0-nullsafety.0

A lightweight flutter package to simplify the creation of a miniplayer.

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); Miniplayer( valueNotifier: playerExpandProgress, ),	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)

See example

Roadmap

• Add an option to handle horizontal gestures as well (like Spotify does)
• Rewrite the API for onDismiss (breaking change)