The Flutter ListView plays the video list ③

• Click to jump to play the video
• Landscape/portrait
• Lower right button to switch landscape/portrait
• Top right back button
• Returns after the video is played
• Change the status bar color

Life is like a river, bitter is turning: thinking and choice, gain and lose, take up and put down, we need to give up, give up and forget; Life is like a leaf, bitter is wandering: wandering heart, can not touch the shore. Struggling to pursue and suffer, leaving withered and lonely feelings; Life is like a play, suffering is encounter: wonderful life journey, leaving feelings or pass by, each other or go their separate ways, life if only as first.

Effect of the Day, complete video play landscape full screen display:

Rendering (1.1) :

Analysis:

• Click the button to jump to another page to play the current clicked video
• When jumping to the play page, the screen automatically landscape
• After playing, the screen automatically exits and changes to portrait
• There are start/pause, back, landscape/portrait buttons on the screen
• The status bar is transparent

Click to jump to play the video

Code:

 // Zoom button
  Widget initFullScreen(a) {
    returnGestureDetector( child: Icon( Icons.fullscreen, color: Colors.white, ), onTap: () { NavigatorUtil.pushPage( context: context, widget: FullScreenWidget(url: widget.url, videoPageEnum: widget.type)); }); }Copy the code

\

The code is very simple. Stack() matches the positioning of the button

Click the button to jump to another page to play the video

To jump to a page, pass two values:

• Url of the current playing video
• Do you want to play local video or network video?

Jump to the second page and play directly.(If you don’t know how to play, refer to :Flutter wheels: Video playback

Landscape/portrait

 / / landscape
  static void setHorizontal(a){
    SystemChrome.setPreferredOrientations(
        [DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeRight]);
  }
Copy the code

 / / vertical screen
  static void setVertical(a){
    // Force portrait
    SystemChrome.setPreferredOrientations(
        [DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]);
  }
Copy the code

	@override
  void initState(a) {
    super.initState();
    // Set landscape
    EntityState.setHorizontal();
  }
 @override
  void dispose(a) {
    // Set portrait
    EntityState.setVertical();
    super.dispose();
  }
Copy the code

Lower right button to switch landscape/portrait

 // Landscape is the default landscape
  bool isHorizontal = true;
  
Widget initPosition(a) {
    return Positioned(
      right: 40,
      bottom: 40.// horizontal_rulechild: GestureDetector( onTap: () { isHorizontal = ! isHorizontal;if (isHorizontal) {
              EntityState.setHorizontal();
            } else {
              EntityState.setVertical();
            }
            setState(() {});
          },
          child: Container(
              width: 100,
              height: 45,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                  color: Colors.grey.withOpacity(0.8),
                  borderRadius: BorderRadius.circular(10)),
              child: Text(
                isHorizontal ? "Landscape" : "Portrait",
                style: TextStyle(color: Colors.white),
              ))),
    );
  }
Copy the code

Analysis:

Positioned in the lower right corner by Stack() with jam ()

Landscape is set when the initState() method is initialized, so landscape is set by default

When you click the text landscape, the text changes to portrait, and call the portrait method to change the orientation of the phone.

This code is not too difficult.

Rendering (1.3):

Be sure to leave a comment in the comments section if you don’t understand anything

Top right back button

Widget initPopButton(a) {
    return Positioned(
      top: 25,
      left: 25,
      child: GestureDetector(
        onTap: () {
          Navigator.of(context).pop();
        },
        child: Container(
          width: 100,
          height: 45,
          alignment: Alignment.center,
          decoration: BoxDecoration(
              color: Colors.grey.withOpacity(0.8),
              borderRadius: BorderRadius.circular(10)),
          child: Icon(Icons.keyboard_return,color: Colors.white,),
        ),
      ),
    );
  }
Copy the code

 Navigator.of(context).pop();
Copy the code

Returns after the video is played

The question is the same as the one in the previous chapter.

@override
  void initState(a) {
    super.initState();
    _controller.addListener(() {
      // Current progress == total progress
      if (_controller.value.position == _controller.value.duration) {
        // Indicates that the playback is completeFuture.delayed(Duration.zero, () { Navigator.of(context).pop(); }); }}); }Copy the code

• _controller. Value. The position of the current broadcast schedule
• _controller. The value. The duration for the progress

Current Progress == Total Progress Indicates that the playback is complete

Navigator.of(context).pop();
Copy the code

Can.

Here are some things to note:

In the initState() method the context has not been created yet, so it cannot be used directly. You need to queue the context.

Change the status bar color

  // Change the top status bar color
  static void setStatusBarColor(Color color){
    SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(statusBarColor:color);
    SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
  }
Copy the code