Flutter设计资源整合插件designhubz的使用

在设计hubz中，我们通过全球领先的AR技术帮助品牌以沉浸式的方式与消费者建立联系。

我们正在通过下一代电子商务界面来改变在线购物体验，该技术已被一些全球最大的品牌和零售商采用。

Designhubz | 眼镜虚拟试戴 Flutter 插件

本插件可将Designhubz眼镜虚拟试戴AR功能集成到您的Flutter应用中。

使用

要使用此插件，请在您的pubspec.yaml文件中添加designhubz作为依赖项。

入门指南

Android

1. 在android/app/build.gradle中将minSdkVersion设置为21，并将compileSdkVersion设置为至少34：

android {
    compileSdkVersion 34

    ...

    defaultConfig {
        minSdkVersion 21
    }
}

iOS

无需进行额外步骤。

Flutter

您必须在Android和iOS上授予相机权限。您可以选择任何适合您的包来完成此操作。例如，在使用任何试戴小部件之前，可以使用permission_handler。

您可以在您的小部件树中添加EyewearTryOnWidget用于眼镜试戴，添加CCLTryOnWidget用于隐形眼镜试戴。

该小部件可以通过传递给小部件的onTryOnReady回调的相应TryOnController进行控制。

请参阅示例以获取完整的示例应用。检查example/lib/eyewear_tryon_demo_page.dart以获取眼镜小部件的详细用法，以及example/lib/ccl_tryon_demo_page.dart以获取隐形眼镜小部件的用法。

片段

1. 添加EyewearTryOnWidget

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

class DesignHubzDemo extends StatefulWidget {
  const DesignHubzDemo({super.key});

  @override
  State<DesignHubzDemo> createState() => _DesignHubzDemoState();
}

class _DesignHubzDemoState extends State<DesignHubzDemo> {
  late TryOnController _tryOnController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: EyewearTryOnWidget(
        organizationId: "your_organization_id",
        onTryOnReady: (controller) {
          _tryOnController = controller;
        },
      ),
    );
  }
}

1. 一旦从onTryOnReady回调接收到EyewearTryOnController，您就可以在其上调用各种方法。

相同的操作也可以对CCLTryOnWidget及其控制器CCLTryOnController进行。

TryOnControllers通用方法

许多方法在EyewearTryOnController和CCLTryOnController中都是通用的。首先讨论这些通用的方法。

所有方法都可能抛出TryOnError，如果由于网络或其他错误导致TryOn小部件与应用程序之间的通信失败，则会抛出此异常。更多关于抛出错误的详细信息在TryOnError的message参数中。

setUserId()

您需要在加载任何产品之前调用setUserId函数。

请求

示例

_tryOnController.setUserId('user_id');

响应

此函数没有返回值。

loadProduct()

它将加载提供的productId关联的产品。您可以传递一个可选的progressHandler回调以获取产品的加载进度。

请求

响应

如果成功，它将返回VTOProduct。

VTOProduct {
  String productKey;
  List<String> variations;
}

如果productId无效或无法找到产品，它可能会抛出TryOnError。

takeSnapshot()

它将捕获TryOn小部件内显示内容的快照图像。

请求

此函数没有必需的参数。

响应

它将以Uint8List形式返回图像数据，该数据可以用于Image小部件以显示图像。

FutureBuilder(
  future: _tryOnController.takeSnapshot(),
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      if (snapshot.hasError) {
        return Text("Error:${snapshot.error}");
      }
      final image = snapshot.data;
      if (image == null) {
        return const Text("No image captured");
      }
      return Image.memory(image);
    } else {
      return const Text(
        "Loading...",
        textAlign: TextAlign.center,
      );
    }
  },
);

EyewearTryOnController特定方法

这些方法仅在EyewearTryOnController中可用。

switchMode()

它将在3d模式和tryon模式之间切换。

请求

此函数没有必需的参数。

响应

此函数没有返回值。

fetchRecommendations()

它将获取一定数量的推荐。

请求

响应

如果成功，它将返回ScoredRecommendation列表，其中包括产品数据（包括变体）。

class ScoredRecommendation {
  final String productKey;
  final num score;
}

示例响应：

[
  ScoredRecommendation(
    productKey: "000209-0107",
    score: 10,
  ),
  ScoredRecommendation(
    productKey: "000838-0118",
    score: 10,
  ),
  ScoredRecommendation(
    productKey: "000241-2906",
    score: 10,
  ),
];

事件处理程序

EyewearTryOnWidget和CCLTryOnWidget都提供了以下事件处理回调：

onUpdateTryonStatus

当小部件的状态发生变化时将被调用。

参数

onError

当发生错误时将被调用。

参数

onTryOnRecovering

TryOn小部件在内存压力下崩溃后可以自动恢复。这在低端Android设备上很少发生。

恢复过程会重新加载用户、已加载的产品和正在使用的模式。当TryOn小部件恢复时，您可以检查isInRecoveryProcess标志以显示加载指示器。

参数

EyewearTryOnWidget特定事件处理程序

这些事件处理程序仅在EyewearTryOnWidget中可用。

onUpdateTrackingStatus

当面部跟踪状态发生变化时将被调用。

参数

trackingStatus将是以下值之一：

• idle
• cameraNotFound
• faceNotFound
• analyzing
• tracking

onUpdateUserInfo

当用户信息更新时将被调用。

参数

TryOnUserInfo类型如下所示：

class TryOnUserInfo {
  /// 可以为以下之一："Small"，"Medium"，"Large"
  String size;

  /// 眼睛之间的距离
  num eyeSize;

  /// 瞳孔间距
  num ipd;
}