如何在Flutter的Flick Video Player中添加增减速度功能

核心思路 #

借助FlickManager的setPlaybackSpeed方法调整播放速度，自定义控制栏添加增减按钮，点击时修改速度值并实时更新UI显示。

实现步骤 #

1. 初始化FlickManager
   先创建FlickManager实例，用于管控视频播放逻辑：

   late FlickManager flickManager;
   
   @override
   void initState() {
     super.initState();
     flickManager = FlickManager(
       videoPlayerController: VideoPlayerController.network(
         "你的视频地址",
       ),
     );
   }
   
   @override
   void dispose() {
     flickManager.dispose();
     super.dispose();
   }
   

2. 自定义控制栏组件
   编写包含速度增减按钮的控制栏，替换默认的FlickControlBar：

   class CustomSpeedControlBar extends StatelessWidget {
     final FlickManager flickManager;
     // 自定义速度档位，可按需调整范围和步长
     final List<double> speedLevels = [0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0];
   
     CustomSpeedControlBar({required this.flickManager});
   
     void _changeSpeed(bool isIncrease) {
       double currentSpeed = flickManager.flickVideoManager?.videoPlayerValue?.playbackSpeed ?? 1.0;
       int currentIndex = speedLevels.indexOf(currentSpeed);
   
       if (isIncrease) {
         if (currentIndex < speedLevels.length - 1) {
           flickManager.setPlaybackSpeed(speedLevels[currentIndex + 1]);
         }
       } else {
         if (currentIndex > 0) {
           flickManager.setPlaybackSpeed(speedLevels[currentIndex - 1]);
         }
       }
     }
   
     @override
     Widget build(BuildContext context) {
       return FlickControlBar(
         child: Row(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
             // 减速按钮
             IconButton(
               icon: const Icon(Icons.slow_motion_video),
               onPressed: () => _changeSpeed(false),
             ),
             // 实时显示当前速度
             ValueListenableBuilder(
               valueListenable: flickManager.flickVideoManager!,
               builder: (context, value, child) {
                 double currentSpeed = value.videoPlayerValue?.playbackSpeed ?? 1.0;
                 return Text("${currentSpeed}x");
               },
             ),
             // 加速按钮
             IconButton(
               icon: const Icon(Icons.forward_10),
               onPressed: () => _changeSpeed(true),
             ),
             // 保留默认进度条和播放暂停按钮
             const Expanded(child: FlickProgressBar()),
             IconButton(
               icon: const Icon(Icons.pause_rounded),
               onPressed: flickManager.flickControlManager?.togglePlay,
             ),
           ],
         ),
       );
     }
   }
   

3. 替换默认UI组件
   在FlickVideoPlayer中使用自定义控制栏：

   FlickVideoPlayer(
     flickManager: flickManager,
     flickVideoWithControls: FlickVideoWithControls(
       controls: CustomSpeedControlBar(flickManager: flickManager),
     ),
   )
   

注意事项 #

• 可根据需求修改speedLevels数组，调整速度范围或步长（比如增加0.1档位、扩展到3.0x）。
• 利用ValueListenableBuilder监听播放状态变化，确保速度显示实时同步。
• 务必在页面销毁时调用flickManager.dispose()，避免内存泄漏。

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