全屏播放
添加插件
pubspec.yaml
// 设置屏幕方向的插件
orientation: ^1.3.0
添加播放器状态监听
video_view.dart
// 状态发生变更时回调
_chewieController.addListener(_fullScreenListener);
@override
void dispose() {
// 移除监听
_chewieController.removeListener(_fullScreenListener);
_videoPlayerController.dispose();
_chewieController.dispose();
super.dispose();
}
/// 改变屏幕方向
void _fullScreenListener() {
Size size = MediaQuery.of(context).size;
// 横屏 -> 竖屏
if (size.width > size.height) {
OrientationPlugin.forceOrientation(DeviceOrientation.portraitUp);
}
}
设置播放控制UI
appbar.dart
封装播放器顶部控制视频返回以及扩展功能的 UI
/// 用于添加在播放器顶部的播放控制UI
videoAppBar() {
return Container(
padding: EdgeInsets.only(right: 8),
decoration: BoxDecoration(gradient: blackLinearGradient(fromTop: true)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
BackButton(
color: Colors.white,
),
Row(
children: [
Icon(
Icons.live_tv_rounded,
color: Colors.white,
size: 20,
),
Padding(
padding: EdgeInsets.only(left: 12),
child: Icon(
Icons.more_vert_rounded,
color: Colors.white,
size: 20,
),
)
],
)
],
),
);
}
video_view.dart
视频播放控制器添加播放控制Widget
final Widget overlayUI; // 显示在播放器顶部的UI
const VideoView(this.url,
{
Key key,
this.cover,
this.autoPlay = false,
this.looping = false,
this.aspectRatio = 16 / 9,
this.overlayUI})
: super(key: key);
@override
void initState() {
super.initState();
customControls: MaterialControls(
showLoadingOnInitialize: false,
showBigPlayIcon: false,
bottomGradient: blackLinearGradient(),
overlayUI: widget.overlayUI,
));
}
video_detail_page.dart
播放详情页:传递自定义的视频详情页顶部appBar
class _VideoDetailPageState extends State<VideoDetailPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Column(
children: [_videoView(), Text('视频详情页,vid:${widget.videoModel.vid}')],
),
);
}
_videoView() {
var model = widget.videoModel;
return VideoView(
model.url,
cover: model.cover,
overlayUI: videoAppBar(),
);
}
}
沉浸式状态栏
view_util.dart
封装设置沉浸式状态栏的方法
/// 修改状态栏
void changeStatusBar({
color: Colors.white, StatusStyle statusStyle}) {
// 沉浸式状态栏样式
FlutterStatusbarManager.setColor(color, animated: false);
FlutterStatusbarManager.setStyle(statusStyle == StatusStyle.DARK_CONTENT
? StatusBarStyle.DARK_CONTENT
: StatusBarStyle.LIGHT_CONTENT);
}
navigation_bar.dart
自定义导航栏设置状态栏颜色
class _NavigationBarState extends State<NavigationBar> {
@override
void initState() {
super.initState();
_statusBarInit();
}
// 设置沉浸式状态栏
void _statusBarInit() {
changeStatusBar(color: widget.color, statusStyle: widget.statusStyle);
}
}
video_detail_page.dart
视频播放详情页:设置状态栏颜色以及针对android和ios状态栏高度进行适配
class _VideoDetailPageState extends State<VideoDetailPage> {
@override
void initState() {
super.initState();
// 黑色状态栏
changeStatusBar(
color: Colors.black, statusStyle: StatusStyle.LIGHT_CONTENT);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: MediaQuery.removePadding(
removeTop: Platform.isIOS, // IOS 移除顶部padding
context: context,
child: Column(
children: [
// 导航栏
NavigationBar(
color: Colors.black,
statusStyle: StatusStyle.LIGHT_CONTENT,
height: Platform.isAndroid ? 0 : 46, // 导航栏的高度 android:0,ios:46
),
_videoView(),
Text('视频详情页,vid:${widget.videoModel.vid}')
],
),
),
);
}
}