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

发布于 1周前 作者 ionicwang 来自 Flutter

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

什么是AR-MOD SDK?

简单来说，AR-MOD的解决方案是一个类似于Snapchat（Lens Studio）和Facebook（SparkAR）的AR体验平台！

AR-MOD基于Unity ARFoundation的一个衍生框架。MOD在AR-MOD中的含义是修改，在英语中意为修改和模块。这一概念广泛应用于游戏中，对应可修改的视频游戏。例如著名的《魔兽争霸》、《红色警戒》、《半条命》、《反恐精英》等！

我们将MOD的概念移植到AR技术中，让用户拥有更多自由来创建他们所需的AR创意互动体验内容！在这个过程中，用户无需担心AR-SDK算法和代码实现，只需专注于AR创意互动体验内容的制作。通过少量代码，即可利用APP的所有AR-MOD功能创造更大的商业价值。

开始使用

安装插件

  1. 将此插件安装到您的Flutter项目中。如果您不知道如何安装Flutter Package，可以点击这里查看文档。
# 其他配置
dependencies:
  flutter:
    sdk: flutter
  flutter_armod_widget: ^0.0.3
# 其他配置

设置平台

选择iOS或Android平台进行设置。

Android设置
  1. 转到您的FLUTTER SDK PATH/.pub-cache/hosted/pub.dartlang.org/flutter_armod_widget-0.0.3/文件夹，然后将libs文件夹复制到android平台文件夹中。
  2. 在终端中运行Flutter pub get命令。
iOS设置
  1. 在XCode项目中创建一个名为ThirdParties的文件夹。
  2. 导入UnityFramework.framework到ThirdParties文件夹中。
  3. 将框架添加到Xcode -> 目标 -> 您的应用程序 -> 通用 -> 框架、库和已嵌入内容区域，并将嵌入模式设置为嵌入并签名。
  4. 在终端中执行cd iOS命令并运行Pod install命令。
  5. 双击打开Runner.xcworkspace文件，这将启动XCode应用程序。
  6. 如果您使用的是Swift，打开ios/Runner/AppDelegate.swift文件并进行以下更改：
import UIKit
import Flutter
import flutter_armod_widget

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        InitARMODIntegrationWithOptions(argc: CommandLine.argc, argv: CommandLine.unsafeArgv, launchOptions)
        let nativeCalls: AnyClass? = NSClassFromString("FrameworkLibAPI")
        nativeCalls?.registerAPIforNativeCalls(ARMODCallbackAPI())
        GeneratedPluginRegistrant.register(with: self)
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
}

如果您使用的是Objective-C，打开ios/Runner/main.m文件并进行以下更改：

#import "flutter_armod_widget.swift.h"

int main(int argc, char * argv[]) {
    @autoreleasepool {
        InitARMODIntegration(argc, argv);
        [NSClassFromString(@"FrameworkLibAPI") registerAPIforNativeCalls:[ARMODCallbackAPI alloc]];
        return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
    }
}
  1. 编辑info.plist文件：
<key>io.flutter.embedded_views_preview</key>
<string>YES</string>

<key>Privacy - Camera Usage Description</key>
<string>$(PRODUCT_NAME) 使用摄像头</string>

<key>NSBonjourServices</key>
<string>_dartobservatory._tcp</string>

创建应用令牌

创建并编写您的应用令牌到PhantomsXRConfig.dart文件中。

创建新的AR-MOD屏幕

编写一个新的屏幕用于AR-MOD。

示例代码

import 'package:flutter/material.dart';

import 'menu_screen.dart';
import 'screens/SimpleScreen.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';

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

class MyApp extends StatelessWidget {
  // 这个小部件是您的应用的根
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter AR-MOD Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => MenuScreen(),
        '/simple': (context) => SimpleScreen(),
      },
      builder: EasyLoading.init(),
    );
  }
}

更多关于Flutter增强现实功能插件flutter_armod_widget的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter增强现实功能插件flutter_armod_widget的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何使用 flutter_armod_widget 插件来实现 Flutter 应用中的增强现实（AR）功能的代码示例。请注意，这只是一个基本的示例，实际应用中可能需要更多的配置和优化。

首先，确保你已经在 pubspec.yaml 文件中添加了 flutter_armod_widget 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_armod_widget: ^最新版本号  # 请替换为实际的最新版本号

然后，运行 flutter pub get 来获取依赖。

接下来，在你的 Flutter 项目中，你可以按照以下步骤来使用 flutter_armod_widget：

  1. 导入必要的包：
import 'package:flutter/material.dart';
import 'package:flutter_armod_widget/flutter_armod_widget.dart';
  1. 创建 AR 页面：
class ARPage extends StatefulWidget {
  @override
  _ARPageState createState() => _ARPageState();
}

class _ARPageState extends State<ARPage> {
  late ARController _arController;

  @override
  void initState() {
    super.initState();
    // 初始化 ARController
    _arController = ARController(
      onPlaneDetected: (plane) {
        // 当检测到平面时回调
        print('Detected plane: $plane');
      },
    );
  }

  @override
  void dispose() {
    // 释放资源
    _arController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AR Demo'),
      ),
      body: Center(
        child: ARScene(
          controller: _arController,
          // 添加你想要在 AR 场景中显示的 3D 模型或其他内容
          children: [
            // 示例：添加一个简单的立方体
            ARBox(
              size: Vector3(0.5, 0.5, 0.5),
              position: Vector3(0, 0, -2),
              color: Colors.red,
            ),
          ],
        ),
      ),
    );
  }
}
  1. 在应用中导航到 AR 页面：
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter AR Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter AR Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => ARPage()),
            );
          },
          child: Text('Open AR'),
        ),
      ),
    );
  }
}

这个示例展示了如何创建一个简单的 Flutter 应用，其中包含一个按钮，点击该按钮后会导航到一个 AR 页面。在 AR 页面中，使用 flutter_armod_widget 插件来显示一个简单的 3D 立方体。

请注意，flutter_armod_widget 插件的具体 API 和用法可能会随着版本的更新而有所变化，因此建议查阅最新的官方文档以获取最准确的信息。此外，增强现实功能通常需要设备的摄像头权限和网络连接（用于加载 3D 模型等资源），因此在实际应用中还需要处理这些权限和网络请求。

回到顶部