Skip to content

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

License

Notifications You must be signed in to change notification settings

Dr-Blank/miniplayer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

63 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Pub

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

demo

Usage

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.

Usage without BottomNavigationBar

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 which uses Navigator as a base.

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');
              },
            ),
          ],
        );
      },
    );
  }
}

Usage with BottomNavigationBar

See example

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Dart 98.2%
  • Swift 1.3%
  • Other 0.5%