Flutter中SlidingUpPanel如何放置实现全页面常驻迷你播放器

你需要把SlidingUpPanel组件放在整个App的最顶层路由容器外层，确保它不会被页面路由切换销毁，即可实现所有页面都展示迷你播放器的效果。

具体实现逻辑 #

• 把SlidingUpPanel作为MaterialApp的根页面组件，SlidingUpPanel的body属性内放置你的路由栈容器，可以是默认的页面结构、自定义Navigator、或是GoRouter/Fluro等第三方路由框架的路由出口。
• 参考代码结构如下：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '音乐App',
      debugShowCheckedModeBanner: false,
      home: RootPlayerWrapper(),
    );
  }
}

class RootPlayerWrapper extends StatelessWidget {
  RootPlayerWrapper({super.key});
  // 全局复用的面板控制器，可通过全局状态管理共享给子页面调用
  final PanelController _panelController = PanelController();

  @override
  Widget build(BuildContext context) {
    return SlidingUpPanel(
      controller: _panelController,
      // 未播放时minHeight设为0即可隐藏迷你播放器，播放时设置为对应迷你播放器高度
      minHeight: 60,
      maxHeight: MediaQuery.of(context).size.height,
      // 上滑唤起的全屏播放器组件
      panel: const FullMusicPlayerPage(),
      // 底部常驻的迷你播放器组件
      collapsed: const MiniMusicPlayerBar(),
      // 路由出口，所有页面跳转都在该区域内完成，不会影响外层播放器
      body: const AppRouteOutlet(),
    );
  }
}

注意事项 #

• 播放器相关状态要做全局管理（可选用Provider、Bloc、GetX等状态管理方案），保证页面切换时播放状态、歌曲信息不会丢失，同时可通过全局状态动态控制minHeight参数，实现未播放时隐藏播放器的效果
• 若需要在子页面操作播放器的展开/收起，可把PanelController存入全局状态，在任意子页面获取后调用对应API即可
• 若你的App有底部导航栏，可把底部导航栏组件也放在RootPlayerWrapper内，和SlidingUpPanel做层级适配，避免迷你播放器被导航栏遮挡

内容的提问来源于stack exchange，提问作者Alex Aung