Flutter中audio_video_progress_bar拖动时实时更新进度时间的方法

你需要利用audio_video_progress_bar组件提供的onDragUpdate回调实现拖动过程中的实时进度更新——之前仅使用onSeek的话，只会在松开滑块后触发播放器seek并更新UI。具体实现步骤如下：

1. 在页面的State类中添加一个ValueNotifier，用来临时保存拖动过程中的进度值：

final ValueNotifier<Duration?> _dragProgress = ValueNotifier(null);

2. 修改StreamBuilder的逻辑，优先使用拖动时的临时进度值更新UI：

StreamBuilder<DurationState>(
  stream: _durationState,
  builder: (context, snapshot) {
    final durationState = snapshot.data;
    // 拖动时优先显示临时进度，否则用播放器的真实进度
    final progress = _dragProgress.value ?? durationState?.progress ?? Duration.zero;
    final buffered = durationState?.buffered ?? Duration.zero;
    final total = durationState?.total ?? Duration.zero;
    return ProgressBar(
      progress: progress,
      buffered: buffered,
      total: total,
      onSeek: (duration) {
        _player.seek(duration);
        _dragProgress.value = null; // 拖动结束后清空临时进度，恢复播放器进度显示
      },
      onDragUpdate: (duration) {
        _dragProgress.value = duration; // 拖动过程中实时更新临时进度
      },
    );
  },
),

3. 在页面销毁时释放ValueNotifier，避免内存泄漏：

@override
void dispose() {
  _dragProgress.dispose();
  // 别忘了释放其他资源，比如_player、_durationState等
  super.dispose();
}

原理说明 #

• onDragUpdate会在拖动滑块的每一刻触发，传递当前拖动到的Duration值；
• 用ValueNotifier临时存储这个值，让UI优先显示拖动的进度，实现实时更新效果；
• 松开滑块触发onSeek时，调用播放器的seek方法跳转到目标位置，同时清空临时进度值，让UI回到播放器的真实播放进度。

内容的提问来源于stack exchange，提问作者Daniel Janda