1, Flutter plays a list of videos ②

  • Adding a Progress bar
  • Set progress text
  • Click the progress bar to control the video progress
  • The video progress bar changes
  • The video is played again

In life, we have to experience many things, to meet many people, and the heart is like a sieve, in the world displaced, slowly some people will miss. However, for the wise, they only miss the mistakes and shortcomings of others, they do not deliberately hate a person, but will remember the goodness of others, and constantly fill their heart with gratitude. A tolerant and generous life makes us more likely to experience joy and security.

This chapter will continue with some common techniques for ListView video playback that I have described in the ListView video playback list (1). The ListView video can be played by sliding the progress bar, and the progress bar can slide along with the video.

Let’s take a look at today’s results:

Rendering (1.1) :

Analysis:

  • Add progress bar start and end text
  • Add a slider bar
  • Click the start button to hide the progress bar
  • The progress bar plays with the video
  • Control the progress bar can also control video playback.

Adding a Progress bar

Progress bar layout:

 Stack(
      children: [
        // Fill the full screen and play the videoPositioned.fill(...) .// Edit transparent text
        buildText(),

        // Edit the slider
        Positioned(
          bottom: 2,
          right: 10,
          left: 10,
          child:  buildSilder(),
        ),
      ],
    );
Copy the code

Slider component:

 // The current video progress bar is displayed
  double _slidervalue = 0.0;

  // Slide the progress bar
  Widget buildSilder(a) {
    return Row(
      children: [
      // Start text
        Text(
          "0.0",
          style: TextStyle(fontSize: 14, color: Colors.white),
        ),
        Expanded(
          child: Slider(
            // Divisions are available for use
            label: "$_slidervalue _slidervalue"./// To divide the video into 5 segments, you can only slide to a certain position on the 5 segments
            divisions: 5./// the color has been slid
            activeColor: Colors.red,

            /// Unslided colors
            inactiveColor: Colors.cyan,

            /// Default is 0.0. Must be less than or equal to [maximum]
            /// If [Max] equals [min], the slider is disabled.
            min:  0./// The default is 1.0. The value must be greater than or equal to [min].
            /// If [Max] equals [min], the slider is disabled.
            max: 1./// Current progress value (0-1)
            value: _slidervalue,

            // Progress bar progress returns (0-1)
            onChanged: (double value) {
              setState(() {
                _slidervalue = value;
              });
            },
            // Slide to start the callback
            onChangeStart: (double value){
              Toast.toast(context,msg: "Slide start $value");
            },
            // Slide to end the callback
            onChangeEnd: (double value){
              Toast.toast(context,msg: "Slide end $value"); },),),// End the text
        Text(
          "0.0",
          style: TextStyle(fontSize: 14, color: Colors.white),
        ),
      ],
    );
  }
Copy the code

Analysis:

  • Row the child WiDets left and right through the Row() component
  • The far left is the current sliding time
  • On the far right is the total time
  • The middle was filled with the Slider Slider through the Expanded component

This code is still very simple, add comments, not an introduction, remember to leave a message in the comment section

Rendering (1.2)

Set progress text

// Slide the progress bar
  Widget buildSilder(a) {
    return Row(
      children: [
        // Start the process
        Text( buildTextString(_controller.value.position),),
        / / the progress bar./ / the progress
        Text( buildTextString(_controller.value.duration),),
      ],
    );
  }

String buildTextString(Duration duration) {
    // Returns the number of full seconds that this duration spans.
    intinSeconds = duration? .inSeconds;// Returns the number of full minutes that this duration spans.
    intinMinutes = duration? .inMinutes; String time ="";
    try{
      time = "$inMinutes.${inSeconds % 60}";
    }catch(e){
      LogUtil.Log(tagging: "catchLogUtil",title: e.toString());
    }
    return time;
  }
Copy the code
  • duration? InSeconds when duration. =null inSeconds Specifies the number of whole seconds
  • duration? InMinutes when duration. = Null inMinutes Integer score

Here’s a quick explanation:

  • Are separate inSeconds
  • InMinutes is seconds

What we want to show is the score. seconds

If the current second < 60,inMinutes % 60 will raise an exception, so try{}catch(e){}.

If seconds > 60, let him % 60

Click the progress bar to control the video progress

Listen on the progress return value of Slider:

	    onChanged: (double value) {
              setState(() {
                _slidervalue = value;
                // Drag the progress bar to change the video length
                _controller.seekTo(_controller.value.duration * value);
              });
            }
Copy the code
  • _controller. Value. Duration video always progress
  • Value returns the progress of (0-1)

Through _controller. SeekTo (_controller. Value. Duration * value); Controls the video playback progress.

Rendering (1.3) :

The video progress bar changes

The video is monitored by the video player controller

 @override
  void initState(a) {
    super.initState();
	_controller.addListener(() {
       setState(() {
	        // Make the progress bar change as the video changes current progress = Current video/Total video length
	        _slidervalue = _controller.value.position.inMilliseconds /
	            _controller.value.duration.inMilliseconds;
	      });
	    });
}
Copy the code
  • _controller. Value. The position. InMilliseconds video playback the current schedule time milliseconds
  • _controller. Value. Duration. InMilliseconds video playback total duration in milliseconds

The video is played again

Listen for text, if current position = total position, send it back to the start

GestureDetector(
		chlid :Text("Start"),
          onTap:(){
           // The current video progress
		      Duration position = _controller.value.position;
		      // Total video length
		      Duration duration = _controller.value.duration;
		      // When the playback is complete, return to the initial position
		      if(position == duration) { _controller.seekTo(Duration.zero); }}Copy the code

Rendering (1.4) :


\

Complete the project

The complete code

Chapter 1 :Flutter knowledge :ListView

Next chapter :Flutter ListView

Original is not easy, your thumbs up is my biggest support, leave your thumbs up ~

The following is my official account. I usually post some knowledge about Andorid and FLUTTER. It is mainly used to record some knowledge about flutter during work development