how to show current play time of video when using video_player plugin in flutter?

Question

Currently using the flutter video_player plugin stream video from the given link. Issue is that I had to hide the normal video interactive interface so that user can't skip the video. Now most of the work is done, just need to know how to display duration and current position of the video been played.

videoController.value.duration.inSeconds gives me the duration part, and videoController.value.position gives the position. But how to keep updating the results for theposition` section?

void checkTimer(){
    if(playerController.value.position == playerController.value.duration){
      setState(() {
        Duration duration = Duration(milliseconds: playerController?.value?.position?.inMilliseconds?.round());

      nowTime = [duration.inHours, duration.inMinutes, duration.inSeconds]
        .map((seg) => seg.remainder(60).toString().padLeft(2, '0'))
        .join(':');
      });
    }

above code was created to update the time as needed. but now the issue is how to update time. should I use setState() or something else, because the above code is not working for me.

Video is not loaded where then screen is loaded. It's loaded when then users click the play button. so till that time, we don't even have a duration value as data is still on the wayt.

Solution 1

How about using ValueListenableBuilder ?

It will listen to the controller's value and update it every time the value changes.

here's the sample :

ValueListenableBuilder(
  valueListenable: playerController,
  builder: (context, VideoPlayerValue value, child) {
    //Do Something with the value.
    return Text(value.position.toString());
  },
);

Solution 2

use the built-in widget from the video player plugin. [See more on their example on github][https://github.com/999eagle/plugins/blob/master/packages/video_player/example/lib/main.dart]

           VideoProgressIndicator(
                  _videoController,//controller
                  allowScrubbing: true,
                  colors: VideoProgressColors(
                    playedColor: primary,
                    bufferedColor: Colors.red,
                    backgroundColor: black,
                  ),
                )


  [1]: https://github.com/999eagle/plugins/blob/master/packages/video_player/example/lib/main.dart