Flutter中使用just_audio结合ProgressBar实现音频进度与拖动跳转

在使用just_audio开发音频功能时，若需要实现获取播放进度并支持拖动进度条跳转至指定位置，无需依赖额外第三方包，可通过以下方式实现：

StreamBuilder<Duration?>(
    stream: _audioPlayer.durationStream,
    builder: (context, snapshot) {
        final mediaDurationState = snapshot.data;
        return StreamBuilder<Duration?>(
            stream: _audioPlayer.positionStream,
            builder: (context, snapshot) {
                final mediaPositionState = snapshot.data;
                return ProgressBar(
                    total: mediaDurationState ?? const Duration(),
                    progress: mediaPositionState ?? const Duration(),
                    barHeight: 2,
                    baseBarColor: Colors.black,
                    progressBarColor: Colors.white,
                    thumbColor: Colors.white,
                    timeLabelTextStyle: Theme.of(context)
                        .textTheme
                        .bodyMedium
                        ?.copyWith(color: Colors.white),
                    timeLabelLocation: TimeLabelLocation.sides,
                    onSeek: (newPosition) {
                        _audioPlayer.seek(newPosition);
                    },
                );
            },
        );
    }
),

实现逻辑说明 #

• 外层StreamBuilder监听durationStream，获取音频的总时长；
• 内层StreamBuilder监听positionStream，实时获取当前播放进度；
• 将总时长和当前进度传入ProgressBar组件，配置样式后，通过onSeek回调调用_audioPlayer.seek()方法完成跳转。

内容的提问来源于stack exchange，提问作者Kishan Barmawala