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

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

什么是迷你播放器？

迷你播放器通常用于媒体应用，如Spotify和YouTube。迷你播放器可以被扩展和缩小，并且在缩小时会留在屏幕上，直到用户将其关闭。

示例演示

查看下面的示例演示：

使用说明

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

可选参数

参数	实现方式	示例
onDismiss	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, ...)

持久性

将迷你播放器像上面“使用”部分中描述的那样实现（例如，将其包裹在Stack中）可以在一定程度上工作，但有一些缺点。 如果您通过Navigator.push切换到新屏幕，迷你播放器将会消失。 我们想要的是一个持久的迷你播放器，它会一直停留在屏幕上。

如果您希望实现持久性，您可以选择两种嵌入选项，这取决于您的应用场景。第一种方法仅推荐给简单的应用程序。如果您想使用对话框或其他持久性控件，如底部导航栏，第二种（稍微更高级）的方法是合适的。

第一种方法（简单）

使用Stack在MaterialApp.builder方法中

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

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

class MyApp extends StatelessWidget {
  [@override](/user/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:flutter_miniplayer/flutter_miniplayer.dart';

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

final _navigatorKey = GlobalKey();

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

class MyHomePage extends StatelessWidget {
  [@override](/user/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: [
            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](/user/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](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Demo: SecondScreen')),
      body: Center(child: Text('SecondScreen')),
    );
  }
}

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