Flutter迷你播放器插件miniplayer的使用

描述

miniplayer是一个轻量级的Flutter包，通过提供一个带有当前高度和进度百分比的构建函数来简化迷你播放器的创建。该小部件响应点击和拖动手势，并且高度可定制。

什么是迷你播放器？

迷你播放器常见于Spotify和YouTube等媒体应用程序中。迷你播放器可以展开和最小化，并在最小化时保持在屏幕上，直到用户关闭它。

Demo

使用方法

Stack(
  children: <Widget>[
    YourApp(),
    Miniplayer(
      minHeight: 70,
      maxHeight: 370,
      builder: (height, percentage) {
        return Center(
          child: Text('$height, $percentage'),
        );
      },
    ),
  ],
),

选项

Miniplayer(
   onDismiss: () {
      //Handle onDismissed here
   }, 
),

| 如果设置了onDismiss，迷你播放器可以被关闭。 | | valueNotifier |

final ValueNotifier<double> playerExpandProgress =
    ValueNotifier(playerMinHeight);
    
Miniplayer(
   valueNotifier: playerExpandProgress, 
),

| 允许您使用带有当前进度的全局ValueNotifier。这可以用于隐藏BottomNavigationBar。 | | controller |

final MiniplayerController controller = MiniplayerController();
    
Miniplayer(
   controller: controller, 
),

controller.animateToHeight(state: PanelState.MAX);

| - |

持久性

按照使用方法中描述的方法实现迷你播放器（例如将其包装在Scaffold体中的Stack内）会正常工作，但有一些缺点。如果您通过Navigator.push推送新屏幕，迷你播放器将消失。我们希望的是一个持久存在的迷你播放器。

如果要实现持久性，您可以选择两种嵌入方式之一，具体取决于您的用例。第一种方法仅适用于简单的应用程序。如果您想使用对话框或其他持久的小部件（如BottomNavigationBar），则应使用第二种方法。

第一种方法（简单）

在builder方法中使用Stack：

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

第二种方法（高级）

结合Stack和自定义Navigator使用：

import 'package:flutter/material.dart';
import 'package:miniplayer/miniplayer.dart';

void main() => runApp(MyApp());

final _navigatorKey = GlobalKey();

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Miniplayer example',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Color(0xFFFAFAFA),
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MiniplayerWillPopScope(
      onWillPop: () async {
        final NavigatorState navigator = _navigatorKey.currentState;
        if (!navigator.canPop()) return true;
        navigator.pop();

        return false;
      },
      child: Scaffold(
        body: Stack(
          children: <Widget>[
            Navigator(
              key: _navigatorKey,
              onGenerateRoute: (RouteSettings settings) => MaterialPageRoute(
                settings: settings,
                builder: (BuildContext context) => FirstScreen(),
              ),
            ),
            Miniplayer(
              minHeight: 70,
              maxHeight: 370,
              builder: (height, percentage) => Center(
                child: Text('$height, $percentage'),
              ),
            ),
          ],
        ),
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: 0,
          fixedColor: Colors.blue,
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.mail),
              label: 'Messages',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.person),
              label: 'Profile',
            )
          ],
        ),
      ),
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Demo: FirstScreen')),
      body: Container(
        constraints: BoxConstraints.expand(),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () => Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => SecondScreen()),
              ),
              child: const Text('Open SecondScreen'),
            ),
            ElevatedButton(
              onPressed: () => Navigator.of(context, rootNavigator: true).push(
                MaterialPageRoute(builder: (context) => ThirdScreen()),
              ),
              child: const Text('Open ThirdScreen with root Navigator'),
            ),
          ],
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Demo: SecondScreen')),
      body: Center(child: Text('SecondScreen')),
    );
  }
}

class ThirdScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Demo: ThirdScreen')),
      body: Center(child: Text('ThirdScreen')),
    );
  }
}

Roadmap

• [x] 提供更好的示例
• [x] 添加处理水平手势的选项（像Spotify那样）
• [x] 重写onDismiss的API（破坏性更改）
  • [x] 标记onDismiss为已弃用