如何使用Flutter Chewie包禁用视频进度条的快进快退功能？

需求说明：希望禁止用户通过拖动进度条快进/快退视频，但保留播放、暂停功能，同时能正常查看视频剩余时长（对应下图中蓝色进度条的拖动交互需要禁用）

Chewie包本身没有直接提供禁用进度条拖动的参数，我们可以通过自定义视频控件的方式实现这个需求：重写默认的进度条组件，移除拖动相关的交互回调即可。

实现步骤： #

1. 自定义一个继承自MaterialControls的控件类，重写进度条的构建方法，禁用拖动回调
2. 在ChewieController中指定使用这个自定义控件

完整代码示例： #

首先定义自定义控件：

class CustomVideoControls extends MaterialControls {
  @override
  Widget buildProgressBar(
    BuildContext context,
    Color handleColor,
    Color backgroundColor,
    Color bufferedColor,
    Color playedColor,
    Color handleShadowColor,
    double barHeight,
    double handleRadius,
    VoidCallback? onDragStart,
    VoidCallback? onDragEnd,
    ValueChanged<double>? onDragUpdate,
  ) {
    // 构建进度条，但移除所有拖动相关的回调，禁用拖动交互
    return ProgressBar(
      controller: controller,
      barHeight: barHeight,
      handleRadius: handleRadius,
      backgroundColor: backgroundColor,
      bufferedColor: bufferedColor,
      playedColor: playedColor,
      handleColor: handleColor,
      handleShadowColor: handleShadowColor,
      onDragStart: null,
      onDragEnd: null,
      onDragUpdate: null,
    );
  }
}

然后修改你的ChewieController初始化代码，添加customControls参数：

@override
void initState() {
  super.initState();
  _chewieController = ChewieController(
    videoPlayerController: widget.vpController,
    aspectRatio: widget.vpController.value.aspectRatio,
    autoInitialize: true,
    allowFullScreen: true,
    allowPlaybackSpeedChanging: false,
    deviceOrientationsAfterFullScreen: [DeviceOrientation.portraitUp, DeviceOrientation.portraitDown],
    showControls: true,
    playbackSpeeds: [1.0],
    showOptions: false,
    // 指定使用自定义控件，禁用进度条拖动
    customControls: CustomVideoControls(),
    errorBuilder: ((context, errorMessage) {
      return Center(
        child: Text(errorMessage),
      );
    })
  );
}

效果说明： #

• 进度条会正常显示播放进度、缓冲进度和剩余时长
• 用户无法拖动进度条进行快进/快退操作
• 播放、暂停按钮以及其他保留的控件功能不受影响

内容的提问来源于stack exchange，提问作者Emre Turan