How to add functionality of speed increase/decrease in Flick Video Player Flutter

Question

I am using Flick Video Player in Flutter. I want to add speed functionality on the screen of video just like other buttons like volume. How to do this?

Answer 1

You can easily use this setPlaybackSpeed(value) from FlickManager like this flickManager.flickControlManager?.setPlaybackSpeed(speed);

here is a simple example of how you can use the speed control with flick_video_player I added you two classes one for normal popup menu button and another one like slider using syncfusion_flutter_sliders

home_screen.dart

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  late FlickManager flickManager;
  @override
  void initState() {
    super.initState();
    flickManager = FlickManager(
      videoPlayerController: VideoPlayerController.networkUrl(
        Uri.parse('https://github.com/GeekyAnts/flick-video-player-demo-videos/blob/master/example/9th_may_compressed.mp4?raw=true'),
      ),
    );
  }




  @override
  void dispose() {
    flickManager.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: FlickVideoPlayerWidget(flickManager: flickManager,),
    );
  }

}

flick_video_speed_control_widget.dart

class FlickVideoSpeedControlWidget extends StatelessWidget {
  final FlickManager flickManager;

  const FlickVideoSpeedControlWidget({super.key, required this.flickManager});

  @override
  Widget build(BuildContext context) {
    return PopupMenuButton<double>(
      initialValue: flickManager.flickVideoManager?.videoPlayerValue?.playbackSpeed ?? 1.0,
      onSelected: (speed) {
        flickManager.flickControlManager?.setPlaybackSpeed(speed);
      },
      itemBuilder: (context) => [
        const PopupMenuItem(
          value: 0.5,
          child: Text("0.5x"),
        ),
        const PopupMenuItem(
          value: 1.0,
          child: Text("1x"),
        ),
        const PopupMenuItem(
          value: 1.5,
          child: Text("1.5x"),
        ),
        const PopupMenuItem(
          value: 2.0,
          child: Text("2x"),
        ),
      ],
      child: const Padding(
        padding: EdgeInsets.all(8.0),
        child: Icon(Icons.speed,size: 35,color: Colors.red,),
      ),
    );
  }
}

flick_video_speed_control_slider_widget.dart

class FlickVideoSpeedControlSliderWidget extends StatefulWidget {
  final FlickManager flickManager;

  const FlickVideoSpeedControlSliderWidget(
      {super.key, required this.flickManager});

  @override
  _FlickVideoSpeedControlSliderWidgetState createState() =>
      _FlickVideoSpeedControlSliderWidgetState();
}

class _FlickVideoSpeedControlSliderWidgetState
    extends State<FlickVideoSpeedControlSliderWidget> {
  double _sliderValue = 0;

  @override
  Widget build(BuildContext context) {
    return SfSlider(
      min: 0.0,
      max: 2.0,
      value: widget.flickManager.flickVideoManager?.videoPlayerValue
              ?.playbackSpeed ??
          1.0,
      interval: 0.5,
      showTicks: true,
      showLabels: true,
      enableTooltip: true,
      minorTicksPerInterval: 0,
      // Adjust this for more minor ticks between intervals
      onChanged: (dynamic newValue) {
        widget.flickManager.flickControlManager?.setPlaybackSpeed(newValue);
        setState(() {
          _sliderValue = newValue;
        });
      },
    );
  }
}

flick_video_player_widget.dart

  class FlickVideoPlayerWidget extends StatelessWidget {
  final FlickManager flickManager;

  const FlickVideoPlayerWidget({super.key, required this.flickManager});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        /// here is the speed control

        FlickVideoSpeedControlSliderWidget(flickManager: flickManager),
        Expanded(
          child: Stack(
            children: [
              FlickVideoPlayer(
                flickManager: flickManager,
                flickVideoWithControls: const FlickVideoWithControls(
                  controls: FlickPortraitControls(),
                ),
                flickVideoWithControlsFullscreen:  FlickVideoWithControls(
                  videoFit: BoxFit.fitWidth,
                  controls: Container(
                    child: Stack(
                      children: [
                        FlickVideoSpeedControlWidget(flickManager: flickManager),

                        Align(
                          alignment: AlignmentDirectional.topEnd,
                          child: const FlickLandscapeControls(
                          ),
                        ),

                      ],
                    ),
                  ),
                  playerLoadingFallback: Center(child: CircularProgressIndicator()),
                  iconThemeData: IconThemeData(size: 30, color: Colors.white),
                  textStyle: TextStyle(color: Colors.white, fontSize: 16),
                  backgroundColor: Colors.black,
                ),
              ),

              Align(
                  alignment: AlignmentDirectional.topEnd,
                  child: FlickVideoSpeedControlWidget(flickManager: flickManager)),
            ],
          ),
        ),
      ],
    );
  }
}