Flutter 音乐播放器案例

483 阅读1分钟

3.jpeg

1.jpeg

2.jpeg

主要结构布局:

Stack(
        fit: StackFit.expand,
        children: [
          _buildVideo(),
          // 拖动组件
          const Positioned(
            left: 0,
            right: 0,
            top: 0,
            height: 120,
            child: DragToMoveArea(),
          ),

          /// 底部组件集合
          Positioned(
            left: 0,
            right: 0,
            bottom: 0,
            height: 120,
            child: Obx(
              () => SlideInUp(
                from: 120,
                duration: const Duration(seconds: 1),
                animate: controller.music.value != null,
                child: controller.music.value != null
                    ? Stack(
                        fit: StackFit.expand,
                        children: [
                          // 封面底图
                          Positioned(
                            left: 15,
                            bottom: 15,
                            child: _buildCoverBackground(),
                          ),
                          // 控制条
                          BlurWidget(
                            child: _buildControls(context),
                          ),
                        ],
                      )
                    : const SizedBox(),
              ),
            ),
          ),
          Positioned(
            right: 10,
            top: 10,
            child: Obx(
              () => SlideInRight(
                duration: const Duration(seconds: 1),
                animate: controller.music.value != null,
                child: _buildThemeButton(context),
              ),
            ),
          ),
        ],
      )

media-kit的一些事件订阅

 /// 监听事件
  StreamSubscription? subPlaying;
  StreamSubscription? subPlaylist;
  StreamSubscription? subPosition;
  StreamSubscription? subDuration;
  
    // 监听音乐回调
    subPlaying = _playerMusic.stream.playing.listen(onPlayingCall);
    subPlaylist = _playerMusic.stream.playlist.listen(onPlaylistCall);
    subPosition = _playerMusic.stream.position.listen(onPositionCall);
    subDuration = _playerMusic.stream.duration.listen(onDurationCall);

用到的第三方组件包

  intl: ^0.19.0                   #文字格式化等
  animate_do: ^3.3.4              #动画组件
  window_manager: ^0.4.3
  cached_network_image: ^3.4.1
  get: ^5.0.0-release-candidate-9.2.1
  flutter_svg: ^2.0.11
  flutter_styled:
    git: 
       url: https://github.com/DMSkin/flutter_styled.git
  #---------------------------------------------------------------------
  # 播放器
  media_kit: ^1.1.11                   #视频播放主包
  media_kit_video: ^1.2.5              #视频渲染支持
  media_kit_libs_video: ^1.0.5         #视频解码支持
  #media_kit_libs_audio: ^1.0.4        #音频解码支持
  #---------------------------------------------------------------------

源码地址: github.com/944095635/d…

在线预览: Web预览,视频压缩版本