Flutter ListView play video list ③
Life is like a river, suffering is a turning point: thinking and choosing, gaining and losing, affording and letting go, we need to give up, forsaking and forgetting; life is like a leaf, suffering is wandering: a wandering heart cannot touch what we rely on shore. To pursue and endure hard, leaving withered and lonely feelings; life is like a play, suffering is an encounter: a wonderful journey of life, leaving gratitude or passing by, lingering on each other or parting ways, life is just like the first time.
Today's effect, complete video playback, horizontal screen full screen display:
效果图(1.1):
analysis:
- Click the button to jump to another page to play the currently clicked video
- When jumping to the playback page, the screen is automatically horizontal
- After the playback is complete, the screen automatically exits and the screen becomes vertical
- There are start/pause, return, landscape/portrait buttons on the screen
- The status bar is transparent
Click to jump to play video
Code:
//放大按钮
Widget initFullScreen() {
return GestureDetector(
child: Icon(
Icons.fullscreen,
color: Colors.white,
),
onTap: () {
NavigatorUtil.pushPage(
context: context,
widget:
FullScreenWidget(url: widget.url, videoPageEnum: widget.type));
},
);
}
This code is very simple, complete the placement of the button through Stack() and Positioned()
Click the button to jump to another page to play the video
Two values need to be passed when jumping to the page:
- Url of currently playing video
- Whether to play local video or network video.
Jump to the second page and play directly. (If you don't know how to play, please refer to: Flutter Wheel: Video Play
Landscape/Portrait
When playing, it involves whether the screen is horizontal or vertical.
The horizontal screen code is:
//横屏
static void setHorizontal(){
SystemChrome.setPreferredOrientations(
[DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeRight]);
}
Vertical screen code:
//竖屏
static void setVertical(){
// 强制竖屏
SystemChrome.setPreferredOrientations(
[DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]);
}
This code idea:
When the page is initialized, change the screen to horizontal, and when the playback ends, change the screen to vertical.
@override
void initState() {
super.initState();
//设置横屏
EntityState.setHorizontal();
}
@override
void dispose() {
//设置竖屏
EntityState.setVertical();
super.dispose();
}
Button in the lower right corner to switch between landscape and portrait
//是否是横屏 默认横屏
bool isHorizontal = true;
Widget initPosition() {
return Positioned(
right: 40,
bottom: 40,
// horizontal_rule
child: 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 ? "横屏" : "竖屏",
style: TextStyle(color: Colors.white),
))),
);
}
analysis:
Set the position in the lower right corner through Stack() and Positioned()
Because the horizontal screen has been set when the initState() method is initialized, the default is horizontal screen
When you tap the text on the horizontal screen, the text changes to the vertical screen, and the vertical screen method is called to change the orientation of the phone.
There is no difficulty in this code.
效果图(1.3):
If you don’t understand anything, please leave a message in the comment area~
Back button in the upper right corner
The upper left corner uses Stack() with Positioned() to set the position
Widget initPopButton() {
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,),
),
),
);
}
Return the simplest, call directly
Navigator.of(context).pop();
That's it.
效果图(1.2):
Video playback ends and return
This problem is the same as the idea of replaying after the previous chapter .
@override
void initState() {
super.initState();
_controller.addListener(() {
//当前进度 == 总进度
if (_controller.value.position == _controller.value.duration) {
//表示已经播放完
Future.delayed(Duration.zero, () {
Navigator.of(context).pop();
});
}
});
}
- _controller.value.position is the current playback progress
- _controller.value.duration is the total progress
Current progress == The total progress indicates that the playback is complete, then directly
Navigator.of(context).pop();
That's it.
The things to note here are:
In the initState() method, the context context has not been created, so it cannot be used directly.You need to put the context in the queue.
Change the status bar color
//修改顶部状态栏颜色
static void setStatusBarColor(Color color){
SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(statusBarColor:color);
SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
}
Just pass a color value directly.
Let's take a look at the renderings:
效果图(1.2):
Previous Chapter: Flutter Tips: ListView Play Video List (2)
Originality is not easy, your likes are your greatest support for me, please like to support it~