Flutter 全屏播放与沉浸式播放功能实现

全屏播放

添加插件

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}')
          ],
        ),
      ),
    );
  }
}