At Designhubz we empower brands around the world to connect with shoppers in a complete immersive way.

We’re transforming the online shopping experience with next generation eCommerce interfaces using our leading AR technology that’s being adopted by some of the largest brands and retailers globally.

Designhubz | Eyewear VTO Flutter plugin

A plugin to add DesignHubz Try-On AR into your Flutter app.

Android iOS
Support SDK 21+ iOS 10+


To use this plugin, add designhubz as a dependency in your pubspec.yaml file.

Getting Started


  1. Set the minSdkVersion in android/app/build.gradle to 21 and compileSDKVersion to at least 34:
android {
    compileSdkVersion 34

    defaultConfig {
        minSdkVersion 21


No additional steps are required for iOS.


You must grant the camera permission on both Android and iOS. You can use any package of your choice to do this. For example, permission_handler before using any try on widget from this package.

Add EyewearTryOnWidget for eyewear try on and CCLTryOnWidget for contact lens try on to your widget tree.

The widget can be controlled with the respective TryOnController that is passed to the widget's onTryOnReady callback.

Refer to the example for a complete sample app. Check example/lib/eyewear_tryon_demo_page.dart for comprehensive Eyewear widget usage and example/lib/ccl_tryon_demo_page.dart for the contact lens widget usage.


  1. Add EyewearTryOnWidget
import 'package:designhubz/designhubz.dart';
import 'package:flutter/material.dart';

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

  State<DesignHubzDemo> createState() => _DesignHubzDemoState();

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

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

  1. Once the EyewearTryOnController is received from onTryOnReady callback, you can call various methods on it.

Same can be done for CCLTryOnWidget and its controller CCLTryOnController.

TryOnControllers Common Methods

A lot of the methods are common in EyewearTryOnController and CCLTryOnController. The common one are discussed first.

All methods can throw TryOnError if communication between TryOn Widget and app is unsuccessful due to network or other errors. More details regarding the thrown error is in TryOnError's message parameter.


You will need to call setUserId function before loading any product.


Parameter Type Description
userId string Required. Your User Id




This function does not have any return value.


It will load the provided productId associated product. You can pass a optional progressHandler callback to get the progress of the loading product.


Parameter Type Description
productId string Required. The Product ID
progressHandler ProductLoadingProgressCallback Optional. Callback to receive the loading progress of the product


It returns VTOProduct if succeeds.

VTOProduct {
  String productKey;
  List<String> variations;

It can throw TryOnError if productId is invalid, or product cannot be found.


It will take a snapshot image of the content displayed inside the try on widget.


This function does not have any required parameters.


It and return as the image data as a Uint8List that can be used in a Image Widget to display it.

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

EyewearTryOnController specific methods

These additional methods are only available in EyewearTryOnController


It will switch the mode between 3d and tryon


This function does not have any required parameters.


This function does not have any return value.


It will fetch certain number of recommendations.


Parameter Type Description
count number Required. Number of recommendations


It returns List of ScoredRecommendation which has product data including variations if succeeds.

class ScoredRecommendation {
  final String productKey;
  final num score;

Example response:

    productKey: "000209-0107",
    score: 10,
    productKey: "000838-0118",
    score: 10,
    productKey: "000241-2906",
    score: 10,

Event Handlers

Both EyewearTryOnWidget and CCLTryOnWidget provide the following event handlers callbacks:


It will be called when the status of widget is changed.


Parameter Type Description
status TryOnStatus Status of the widget (idle, loading, read)


It will be called when an error occurs.


Parameter Type Description
error string Error while interacting


TryOn widget can automatically recover in case of a crash due to memory pressure. This rarely happens on low-end android devices.

The recovery process loads back the user, any loaded product and the mode that was being used. While the TryOnWidget recovers, you can show a loading indicator by checking the isInRecoveryProcess flag

Parameter Type Description
isInRecoveryProcess bool Indicate whether TryOn is in recovery process

EyewearTryOnWidget specific event handlers

These event handlers are only available in EyewearTryOnWidget widget


It will be called when the face tracking status is changed.


Parameter Type Description
trackingStatus TryOnTrackingStatus Status of the tracking

The trackingStatus will be one of these values

  • idle
  • cameraNotFound
  • faceNotFound
  • analyzing
  • tracking


It will be called when the user info is updated.


Parameter Type Description
userInfo TryOnUserInfo Detailed user info

The TryOnUserInfo type will look like this:

class TryOnUserInfo {
  /// can be one of the following: "Small", "Medium", "Large"
  String size;

  /// Distance from the midpoint between the eyes
  num eyeSize;

  /// Inter-Pupillary Distance
  num ipd;

Copyright 2023 Designhubz. All rights reserved.