如何为Flutter应用添加支持Google Cardboard的360度视频

1. 添加依赖 #

在项目的pubspec.yaml中添加以下依赖：

dependencies:
  google_vr_flutter: ^0.4.0
  video_player: ^2.8.0

执行命令安装依赖：

flutter pub get

2. 平台权限配置 #

Android端（AndroidManifest.xml） #

添加必要权限和VR特性声明：

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.NFC"/>
<uses-feature android:name="android.hardware.vr.headtracking" android:required="false"/>

iOS端（Info.plist） #

添加网络权限和设备能力要求：

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>
<key>UIRequiredDeviceCapabilities</key>
<array>
    <string>gyroscope</string>
    <string>accelerometer</string>
</array>

3. 实现360度视频播放组件 #

创建一个支持Cardboard的VR视频播放Widget：

import 'package:flutter/material.dart';
import 'package:google_vr_flutter/google_vr_flutter.dart';
import 'package:video_player/video_player.dart';

class Cardboard360Video extends StatefulWidget {
  final String videoUrl;

  const Cardboard360Video({super.key, required this.videoUrl});

  @override
  State<Cardboard360Video> createState() => _Cardboard360VideoState();
}

class _Cardboard360VideoState extends State<Cardboard360Video> {
  late VideoPlayerController _videoController;
  late Future<void> _initializeVideoPlayerFuture;

  @override
  void initState() {
    super.initState();
    // 初始化视频控制器，支持网络或本地视频
    _videoController = VideoPlayerController.networkUrl(Uri.parse(widget.videoUrl));
    _initializeVideoPlayerFuture = _videoController.initialize();
    _videoController.setLooping(true);
  }

  @override
  void dispose() {
    _videoController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder(
        future: _initializeVideoPlayerFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            // 使用VRVideoView实现Cardboard立体显示
            return VRVideoView(
              controller: _videoController,
              mode: VRViewMode.stereo, // 立体模式适配Cardboard
              displayMode: VRDisplayMode.fullscreen,
            );
          } else {
            return const Center(child: CircularProgressIndicator());
          }
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _videoController.value.isPlaying
                ? _videoController.pause()
                : _videoController.play();
          });
        },
        child: Icon(
          _videoController.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }
}

4. 调用播放组件 #

在需要触发视频播放的地方，导航到该组件：

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => const Cardboard360Video(
      videoUrl: "https://example.com/your-360-video.mp4",
    ),
  ),
);

注意事项 #

• 确保视频采用Equirectangular（等矩形）投影格式，这是Cardboard支持的标准360度视频格式
• 优先使用真机测试，多数模拟器不支持VR头显追踪功能
• 本地视频可替换为VideoPlayerController.asset("assets/your-video.mp4")，需在pubspec.yaml中声明资源路径
• Android端需确保gradle配置中包含Google VR相关依赖，通常google_vr_flutter会自动处理

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