Flutter增强现实功能插件ar_flutter_plugin_flutterflow的使用

Flutter增强现实功能插件ar_flutter_plugin_flutterflow的使用

简介

ar_flutter_plugin_flutterflow 是 ar_flutter_plugin 的一个直接改编版本，保留了其所有强大的功能和能力。这个分支创建的原因是原插件自2022年以来未更新。主要变化包括 AR Core 端点的更新、Gradle 升级以及与 FlutterFlow 的兼容性。

安装

1. 通过命令行安装：

   flutter pub add ar_flutter_plugin_flutterflow
   

2. 手动添加到 pubspec.yaml 文件：

   dependencies:
     ar_flutter_plugin_flutterflow: ^0.7.55
   

   然后运行：

   flutter pub get
   

3. 在 FlutterFlow 中： 在你的 widget 的 pubspecs 依赖中简单添加：

   ar_flutter_plugin_flutterflow: ^0.7.55
   

导入

在你的 Dart 代码中添加以下导入语句：

import 'package:ar_flutter_plugin_flutterflow/ar_flutter_plugin.dart';

iOS 权限

为了防止应用在启动增强现实功能时崩溃，你需要在 Info.plist 文件（位于 ios/Runner）中添加以下权限：

<key>NSCameraUsageDescription</key>
<string>此应用程序需要相机访问以启用增强现实功能。</string>

如果你使用的是 FlutterFlow，可以在 “App Settings” > “Permissions” 中将 “Camera” 行的开关切换为 “On”，并添加描述：

此应用程序需要访问相机以启用增强现实功能。

如果你在 iOS 上遇到权限问题（例如，即使允许相机访问，相机视图仍然不显示），请在应用的 ios 目录下的 podfile 中添加以下内容：

post_install do |installer|
  installer.pods_project.targets.each do |target|
    flutter_additional_ios_build_settings(target)
    target.build_configurations.each do |config|
      config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
        '$(inherited)',

        ## dart: PermissionGroup.camera
        'PERMISSION_CAMERA=1',

        ## dart: PermissionGroup.photos
        'PERMISSION_PHOTOS=1',

        ## dart: [PermissionGroup.location, PermissionGroup.locationAlways, PermissionGroup.locationWhenInUse]
        'PERMISSION_LOCATION=1',

        ## dart: PermissionGroup.sensors
        'PERMISSION_SENSORS=1',

        ## dart: PermissionGroup.bluetooth
        'PERMISSION_BLUETOOTH=1',

        # 如果需要，添加其他权限组
      ]
    end
  end
end

在 FlutterFlow 中，目前无法在内部执行上述操作，因此需要将项目发布到 GitHub 并手动进行修改，然后从 GitHub 发布。

示例应用程序

以下是几个示例应用程序及其描述：

插件架构

以下是插件实现的架构概览：

完整示例 Demo

以下是一个完整的示例代码，展示了如何使用 ar_flutter_plugin_flutterflow 插件创建一个简单的 AR 应用程序，该应用程序可以在检测到的平面上放置 3D 模型。

import 'package:flutter/material.dart';
import 'package:ar_flutter_plugin_flutterflow/ar_flutter_plugin.dart';
import 'package:ar_flutter_plugin_flutterflow/models/ar_anchor.dart';
import 'package:ar_flutter_plugin_flutterflow/models/ar_node.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ARScreen(),
    );
  }
}

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

class _ARScreenState extends State<ARSreen> {
  late ARController arController;
  bool isARViewCreated = false;
  List<ARNode> nodes = [];
  List<ARAnchor> anchors = [];

  void onARViewCreated(ARController controller) {
    arController = controller;
    arController.onPlaneDetected = () {
      setState(() {
        // 在检测到平面时执行操作
      });
    };
    arController.onTapPlane = (HitResult hitResult) async {
      final node = ARNode(
        type: NodeType.webGLB,
        uri: "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Duck/glTF-Binary/Duck.glb",
        position: hitResult.position,
        rotation: hitResult.rotation,
      );
      if (await arController.addARNodeWithAnchor(node)) {
        setState(() {
          nodes.add(node);
        });
      }
    };
  }

  [@override](/user/override)
  void dispose() {
    arController.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AR Example'),
      ),
      body: Stack(
        children: [
          ARView(
            onARViewCreated: onARViewCreated,
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: ElevatedButton(
                onPressed: () {
                  // 清除所有节点
                  for (var node in nodes) {
                    arController.removeARNode(node);
                  }
                  setState(() {
                    nodes.clear();
                  });
                },
                child: Text('清除所有模型'),
              ),
            ),
          ),
        ],
      ),
    );
  }
}