您之前是否这样做过：使用video_player创建了视频播放器，但进度条更新过于频繁，导致您的用户体验看起来很不流畅？

别再犹豫了，就是这个包。它会让您的视频进度条看起来非常流畅✨

Demo GIF

由于这是一个GIF，帧率降低了，但请放心，下面的滑块会以与您的应用程序相同的帧率进行动画。

特点

  • 为video_player的VideoPlayerController实例构建一个平滑插值的进度条。
  • 完全不设限，随心所欲地设计。
  • 用于进度条、加载指示器、更准确的时间显示等……

入门

安装包。此包依赖于flutter_hooks，因为我总是用它来做所有的事情，如果您不知道它，可以看看这个包，它让生活变得更轻松。

用法

下面是如何构建一个简单的滑块的例子

Widget build(BuildContext context) {
  SmoothVideoProgress(
    controller: controller,
    builder: (context, position, duration, child) => Slider(
      onChangeStart: (_) => controller.pause(),
      onChangeEnd: (_) => controller.play(),
      onChanged: (value) =>
          controller.seekTo(Duration(milliseconds: value.toInt())),
      value: position.inMilliseconds.toDouble(),
      min: 0,
      max: duration.inMilliseconds.toDouble(),
    ),
  );
}

示例项目

要查看示例（如上图所示）

  1. 打开example文件夹
  2. 运行flutter create .
  3. 在iOS、Android或Web上运行flutter run
  4. 您可能需要为video_player进行额外的设置步骤才能正常工作，请查看其文档了解详情。

GitHub

查看 Github