如何在Pico Neo 3上实现Flutter 360°视频沉浸式VR播放？

针对你在Pico Neo 3上使用vr_player包出现视频独立窗口的问题，以下是具体解决方案：

一、替换适配VR头显的Flutter包 #

vr_player包对专业VR头显的支持有限，推荐使用以下更适配的包：

• google_vr_flutter：基于Google Cardboard SDK封装，原生支持VR沉浸式渲染，可直接适配Pico Neo 3的头显跟踪功能。
• pico_flutter_plugin：针对Pico设备开发的插件，直接对接Pico VR SDK，能完美利用头显的硬件特性。

这些包会自动处理双屏渲染、头动跟踪和沉浸式全屏，不会出现独立窗口问题。

二、Android平台配置调整 #

不管使用哪个包，都需要修改Android项目配置来启用VR模式：

1. 修改AndroidManifest.xml：
   添加VR相关权限和特性声明：

   <!-- VR硬件支持声明 -->
   <uses-feature android:name="android.hardware.vr.headtracking" android:required="true" />
   <!-- 本地视频播放权限 -->
   <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
   <!-- 在线视频播放权限 -->
   <uses-permission android:name="android.permission.INTERNET" />
   

   在MainActivity标签内添加VR元数据和Intent过滤：

   <meta-data android:name="com.google.vr.vrcore.min_version" android:value="1.100.0" />
   <intent-filter>
       <action android:name="android.intent.action.MAIN" />
       <category android:name="com.google.intent.category.CARDBOARD" />
   </intent-filter>
   

   设置Activity为全屏主题：

   android:theme="@android:style/Theme.Black.NoTitleBar.Fullscreen"
   

2. 启用沉浸式系统UI：
   在Flutter初始化时强制隐藏系统状态栏和导航栏：

   void main() {
     WidgetsFlutterBinding.ensureInitialized();
     SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
     SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft]);
     runApp(const MyApp());
   }
   

三、原生集成方案（进阶） #

如果现有Flutter包无法满足需求，可直接对接Pico Android原生SDK：

1. 在Android项目中引入Pico VR SDK（从Pico开发者平台获取）。
2. 编写原生VR视频播放Activity，使用Pico SDK的VrVideoView实现360°视频的双屏渲染和头动跟踪。
3. 通过Flutter的MethodChannel调用原生Activity，传递视频路径等参数。
4. 原生Activity中配置沉浸式全屏，禁用系统UI。

四、现有代码的临时调整 #

如果暂时不想更换包，可尝试以下修改：

1. 调整VR模式触发时机：
   修改onReceiveState方法，确保进入VR模式前完全隐藏系统UI：

   void onReceiveState(VrState state) async{
     switch (state) {
       case VrState.loading:
         setState(() {
           isVideoLoading = true;
         });
         break;
       case VrState.ready:
         setState(() {
           isVideoLoading = false;
           isVideoReady = true;
         });
         // 先设置沉浸式UI再播放
         await SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
         await SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft]);
         await _viewPlayerController.play();
         setState(() {
           _isPlaying = true;
         });
         break;
       case VrState.buffering:
         // 确保全屏后再切换VR模式
         await fullScreenPressed();
         _viewPlayerController.toggleVRMode();
         break;
       case VrState.idle:
         break;
     }
   }
   

2. 设置全屏播放器尺寸：
   将VrPlayer尺寸直接设为屏幕全尺寸，去掉条件判断：

   VrPlayer(
     x: 0,
     y: 0,
     onCreated: onViewPlayerCreated,
     width: MediaQuery.of(context).size.width,
     height: MediaQuery.of(context).size.height,
   )
   

3. 去掉Scaffold多余背景：
   将Scaffold背景设为纯黑，避免窗口边框：

   return Scaffold(
     backgroundColor: Colors.black,
     body: GestureDetector(
       // 现有代码
     ),
   );
   

内容的提问来源于stack exchange，提问作者Ranot