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

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

Huawei AR Engine Flutter插件

Huawei AR Engine Flutter插件是一个基于HiSilicon芯片组的平台，用于在Android设备上使用Flutter框架构建增强现实（AR）应用程序。它集成了AR核心算法，提供了运动跟踪、环境跟踪、人体跟踪和面部跟踪等基本AR功能。这使得您的应用能够将虚拟世界与真实世界融合，为用户提供全新的视觉互动体验。

此插件实现了Huawei AR Engine SDK与Flutter平台之间的通信，暴露了所有由Huawei AR Engine SDK提供的功能。

安装

请参阅 pub.dev 和 AppGallery Connect 配置。

文档

常见问题或问题反馈

如果您在使用HMS样本时遇到问题，请尝试以下选项：

  • Stack Overflow 是任何编程问题的最佳去处。请务必使用标签 <strong>huawei-mobile-services</strong>。
  • GitHub 是这些插件的官方仓库，您可以在此提交问题或提出建议。
  • 华为开发者论坛 的HMS Core模块适合于一般性问题、建议或意见。
  • 华为开发者文档 是所有HMS Core套件的官方文档资源，您可以在此找到详细文档。

如果您在我们的样本中发现了一个错误，请提交一个到 GitHub仓库 的问题。

许可证

Huawei AR Engine Flutter插件遵循 Apache 2.0许可证。

示例代码

以下是使用Huawei AR Engine Flutter插件的基本示例代码：

/*
    Copyright 2020-2023. Huawei Technologies Co., Ltd. All rights reserved.

    Licensed under the Apache License, Version 2.0 (the "License")
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

        https://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
*/

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

import 'package:huawei_ar_example/ar_body_scene.dart';
import 'package:huawei_ar_example/ar_face_scene.dart';
import 'package:huawei_ar_example/ar_hand_scene.dart';
import 'package:huawei_ar_example/ar_world_scene.dart';
import 'package:huawei_ar_example/ar_augmented_image_scene.dart';
import 'package:huawei_ar_example/ar_face_health_scene.dart';
import 'package:huawei_ar_example/ar_scene_mesh_scene.dart';
import 'package:huawei_ar_example/ar_world_body_scene.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _isAREngineAPKReady = false;
  Color _serviceAppCheckColor = Colors.grey;

  [@override](/user/override)
  void initState() {
    super.initState();
    _checkServiceApk();
  }

  void _checkServiceApk() async {
    if (!mounted) return;
    bool result = await AREngine.isArEngineServiceApkReady();
    setState(() {
      _isAREngineAPKReady = result;
      _serviceAppCheckColor = result ? Colors.green : Colors.red;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Builder(
        builder: (BuildContext context) {
          return Scaffold(
            appBar: AppBar(
              title: const Text('Huawei AREngine Flutter Demo'),
              centerTitle: true,
              backgroundColor: Colors.red,
            ),
            body: SafeArea(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  const SizedBox(
                    height: 10,
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      _customContainer(
                        _serviceAppCheckColor,
                        'AREngine Service APK Ready',
                        5,
                        false,
                      ),
                      _customContainer(
                        _serviceAppCheckColor,
                        _isAREngineAPKReady ? 'Yes' : 'No',
                        1,
                        true,
                      )
                    ],
                  ),
                  _expandedButton(
                    () => AREngine.navigateToAppMarketPage(),
                    'Navigate To AppGallery Page',
                    Icons.store,
                    color: Colors.black,
                  ),
                  _expandedButton(
                    () => Navigator.of(context).push(
                      MaterialPageRoute<dynamic>(
                        builder: (BuildContext context) {
                          return const ArFaceScreen();
                        },
                      ),
                    ),
                    'ARFace Scene',
                    Icons.face,
                  ),
                  _expandedButton(
                    () => Navigator.of(context).push(
                      MaterialPageRoute<dynamic>(
                        builder: (BuildContext context) {
                          return const ArHandScene();
                        },
                      ),
                    ),
                    'ARHand Scene',
                    Icons.pan_tool,
                  ),
                  _expandedButton(
                    () => Navigator.of(context).push(
                      MaterialPageRoute<dynamic>(
                        builder: (BuildContext context) {
                          return const ArBodyScene();
                        },
                      ),
                    ),
                    'ARBody Scene',
                    Icons.accessibility,
                  ),
                  _expandedButton(
                    () => Navigator.of(context).push(
                      MaterialPageRoute<dynamic>(
                        builder: (BuildContext context) {
                          return const ARWorldScene();
                        },
                      ),
                    ),
                    'ARWorld Scene',
                    Icons.public,
                  ),
                  _expandedButton(
                    () => Navigator.of(context).push(
                      MaterialPageRoute<dynamic>(
                        builder: (BuildContext context) {
                          return const ArAugmentedImageScene();
                        },
                      ),
                    ),
                    'ARAugmentedImage Scene',
                    Icons.image,
                  ),
                  _expandedButton(
                    () => Navigator.of(context).push(
                      MaterialPageRoute<dynamic>(
                        builder: (BuildContext context) {
                          return const ArWorldBodyScene();
                        },
                      ),
                    ),
                    'ARWorldBody Scene',
                    Icons.accessibility,
                  ),
                  _expandedButton(
                    () => Navigator.of(context).push(
                      MaterialPageRoute<dynamic>(
                        builder: (BuildContext context) {
                          return const ArFaceHealthScreen();
                        },
                      ),
                    ),
                    'FaceHealth Scene',
                    Icons.health_and_safety,
                  ),
                  _expandedButton(
                    () => Navigator.of(context).push(
                      MaterialPageRoute<dynamic>(
                        builder: (BuildContext context) {
                          return const ArSceneMeshScene();
                        },
                      ),
                    ),
                    'ARSceneMesh Scene',
                    Icons.grid_on,
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }

  Widget _expandedButton(
    Function()? onPressed,
    String buttonText,
    IconData iconData, {
    Color? color,
  }) {
    return Flexible(
      flex: 2,
      child: SizedBox(
        child: Padding(
          padding: const EdgeInsets.all(5.0),
          child: MaterialButton(
            onPressed: onPressed,
            color: color ?? Colors.red,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(
                  iconData,
                  color: Colors.white,
                ),
                const SizedBox(
                  width: 10,
                ),
                Text(
                  buttonText,
                  style: const TextStyle(color: Colors.white),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _customContainer(
    Color borderColor,
    String text,
    int flex,
    bool reverseBorder,
  ) {
    if (reverseBorder) {
      return Flexible(
        flex: flex,
        child: Container(
          height: 50,
          padding: const EdgeInsets.all(5.0),
          margin: const EdgeInsets.only(right: 5.0),
          decoration: BoxDecoration(
            borderRadius: const BorderRadius.only(
              topRight: Radius.circular(5.0),
              bottomRight: Radius.circular(5.0),
            ),
            border: Border.all(color: _serviceAppCheckColor, width: 2.0),
          ),
          child: Center(
            child: Text(
              text,
              style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
            ),
          ),
        ),
      );
    }
    return Flexible(
      flex: flex,
      child: Container(
        height: 50,
        padding: const EdgeInsets.all(5.0),
        margin: const EdgeInsets.only(left: 5.0),
        decoration: BoxDecoration(
          borderRadius: const BorderRadius.only(
            topLeft: Radius.circular(5.0),
            bottomLeft: Radius.circular(5.0),
          ),
          border: Border.all(color: _serviceAppCheckColor, width: 2.0),
        ),
        child: Center(
          child: Text(
            text,
            style: const TextStyle(fontSize: 16),
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


要在Flutter项目中使用华为的增强现实（AR）功能，你可以使用 huawei_ar 插件。这个插件是华为移动服务（HMS）的一部分，提供了与华为设备上的AR引擎集成的能力。以下是如何在Flutter项目中使用 huawei_ar 插件的步骤。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 huawei_ar 插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  huawei_ar: ^x.x.x # 请使用最新版本

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

2. 配置项目

2.1 配置 AndroidManifest.xml

在 android/app/src/main/AndroidManifest.xml 文件中添加以下配置：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.yourapp">

    <application>
        <!-- 其他配置 -->

        <!-- AR Engine meta-data -->
        <meta-data
            android:name="com.huawei.hms.arengineservices.apk.version"
            android:value="AREngineServices.apk.version" />
    </application>
</manifest>

2.2 配置 build.gradle

在 android/app/build.gradle 文件中添加以下配置：

android {
    compileSdkVersion 30

    defaultConfig {
        applicationId "com.example.yourapp"
        minSdkVersion 21
        targetSdkVersion 30
        versionCode 1
        versionName "1.0"

        // 添加以下配置
        ndk {
            abiFilters "armeabi-v7a", "arm64-v8a"
        }
    }

    // 其他配置
}

dependencies {
    implementation 'com.huawei.hms:arenginesdk:3.7.0.3' // 使用最新版本
    // 其他依赖
}

3. 初始化 AR Engine

在使用 huawei_ar 插件之前，你需要初始化 AR Engine。

import 'package:huawei_ar/huawei_ar.dart';

void initAR() async {
  bool isSupported = await AREngine.isAREngineSupported();
  if (isSupported) {
    await AREngine.initAREngine();
    print("AR Engine initialized successfully.");
  } else {
    print("AR Engine is not supported on this device.");
  }
}

4. 使用 AR 功能

4.1 创建 AR Scene

你可以使用 ARSceneController 来创建和管理 AR 场景。

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

class ARScreen extends StatefulWidget {
  @override
  _ARScreenState createState() => _ARScreenState();
}

class _ARScreenState extends State<ARScreen> {
  ARSceneController _arSceneController;

  @override
  void initState() {
    super.initState();
    _arSceneController = ARSceneController();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AR Scene'),
      ),
      body: ARSceneView(
        controller: _arSceneController,
      ),
    );
  }
}

4.2 添加 AR 对象

你可以在 AR 场景中添加 3D 对象或其他 AR 元素。

void addARObject() async {
  ARNode arNode = ARNode(
    nodeType: ARNodeType.OBJ,
    objPath: "assets/your_model.obj", // 3D 模型路径
    texturePath: "assets/your_texture.png", // 纹理路径
    position: Vector3(0, 0, -1), // 初始位置
  );

  await _arSceneController.addNode(arNode);
}

5. 处理 AR 事件

你可以监听 AR 事件，例如平面检测、点击事件等。

void handleAREvents() {
  _arSceneController.onPlaneDetected = (ARPlane plane) {
    print("Plane detected: ${plane.center}");
  };

  _arSceneController.onTap = (Vector3 position) {
    print("Tapped at position: $position");
  };
}
回到顶部