Flutter插件flutter_r2u的简介与使用方法

Flutter插件flutter_r2u的简介与使用方法

flutter_r2u 简介

R2U Augmented Reality SDK for Flutter（目前为测试版）。

Flutter插件flutter_r2u使用方法

class R2U {
  static Future<void> init({customerId: String}) async;
  static Future<bool> deviceSupportsAR() async;
  static Future<bool> isActive(String sku) async;
  static Future<void> openAR({sku: String, resize = false}) async;
  static Future<String> getLink(String sku) async;
}

支持的设备列表: iOS 和 Android。

• iOS: https://www.apple.com/augmented-reality/
• Android: https://developers.google.com/ar/discover/supported-devices

安装

1. 在 pubspec.yaml 文件的 dependencies 下添加 flutter_r2u 包。
2. 使用 flutter pub get 安装它。

额外步骤

iOS

1. 在 Info.plist 文件中添加相机访问权限请求。

   <?xml version="1.0" encoding="UTF-8"?>
   <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "___">
   <plist version="1.0">
   <dict>
     <key>NSCameraUsageDescription</key>
     <string>Camera used to display product in Augmented Reality</string>
     ...
   </dict>
   </plist>
   

2. 安装 React Native pod：

   cd ios
   pod install
   

Android

1. 在 AndroidManifest.xml 文件中添加相机访问权限请求。

   <uses-permission android:name="android.permission.CAMERA" />
   
   <application ...>
       ...
       <!-- "AR Optional" app, contains non-AR features that can be used when
            "Google Play Services for AR" (ARCore) is not available. -->
       <meta-data android:name="com.google.ar.core" android:value="optional" />
   </application>
   

示例代码

以下是一个完整的示例代码，展示如何使用 flutter_r2u 插件。

示例代码

import 'package:flutter/material.dart';
import 'dart:async';

import 'package:flutter/services.dart';
import 'package:flutter_r2u/flutter_r2u.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final String customerId = '5e8e7580404328000882f4ae'; // 替换为您的客户 ID
  final String sku = 'RE000001'; // 替换为您要查看的产品 SKU

  bool init = false; // 是否初始化完成
  bool isActive = false; // 产品是否可用
  bool supportsAR = false; // 设备是否支持 AR

  [@override](/user/override)
  void initState() {
    super.initState();
    initPlatformState(); // 初始化平台状态
  }

  // 初始化 R2U SDK
  Future<void> initPlatformState() async {
    try {
      await R2U.init(customerId: customerId); // 初始化 SDK
      init = true; // 设置初始化标志
      supportsAR = await R2U.deviceSupportsAR(); // 检查设备是否支持 AR
      print("supportsAR " + supportsAR.toString());

      isActive = await R2U.isActive(sku); // 检查产品是否可用
      print("isActive " + isActive.toString());
    } on PlatformException {
      print('Failed to init R2U Flutter SDK'); // 捕获异常
    }

    if (!mounted) return; // 如果组件未挂载，返回
  }

  // 打开 AR 视图
  void onPressed() {
    R2U.openAR(sku: sku); // 打开指定 SKU 的 AR 视图
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('R2U Flutter SDK'), // 应用标题
        ),
        body: Center(
          child: Column(
            children: <Widget>[
              Container(
                margin: EdgeInsets.all(25), // 添加间距
                child: ElevatedButton(
                  child: Text(
                    'View in your space', // 按钮文本
                    style: TextStyle(fontSize: 20.0), // 文本样式
                  ),
                  onPressed: init && supportsAR && isActive ? onPressed : null, // 禁用按钮条件
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}