Flutter Demo

This is a React Native application that integrates a WebView to load the GlamAR SDK. The WebView requests camera permissions and interacts with the SDK for skin analysis and other AR-based functionalities.

Prerequisites

To follow along you should have basic knowledge of Fluttert, Android or iOS and their ecosystem. In this tutorial we are going to use:

• Your access key must be setup under Pixelbin > GlamAR console.
• Any valid SKU inside your Product Inventory under GlamAR.

Visit Getting Started Page if access key or SKU has not been created

Installation

Add the dependency in your pubspec.yaml:

dependencies:
  glam_ar_sdk: ^1.0.0

Run:

flutter pub get

Required Permissions

Android (in AndroidManifest.xml):

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />

iOS (in Info.plist):

<key>NSCameraUsageDescription</key>
<string>Camera access is required for AR try-on</string>

iOS (in ios/Podfile) — Required for permission_handler to grant camera:

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)',
        'PERMISSION_CAMERA=1',
      ]
    end
  end
end

Usage Example

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:glam_ar_sdk/glam_ar_sdk.dart';
import 'package:glam_ar_sdk/src/core/glamar_webview_manager.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await GlamAr.init(
    accessKey: 'YOUR_ACCESS_KEY', // Replace with your actual key
    debug: true,
  );

  GlamAr.addEventListener('init-complete', (payload) {
    debugPrint('GlamAR SDK Initialized: \$payload');
    GlamAr.applyByCategory('sunglasses');
  });

  GlamAr.addEventListener('loaded', (payload) {
    debugPrint('GlamAR content loaded.');
  });

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GlamAR Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const GlamArScreen(),
    );
  }
}

class GlamArScreen extends StatelessWidget {
  const GlamArScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: SafeArea(child: GlamArView()),
    );
  }
}

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

  @override
  State<GlamArView> createState() => _GlamArViewState();
}

class _GlamArViewState extends State<GlamArView> {
  @override
  Widget build(BuildContext context) {
    return InAppWebView(
      headlessWebView: GlamArWebViewManager.getGlamArView(),
      initialSettings: GlamArWebViewManager.platformSettings,
      onWebViewCreated: (controller) {
        GlamArWebViewManager.wireJsBridge(controller);
      },
      onLoadStop: (controller, url) async {
        await GlamArWebViewManager.initPreview();
      },
      onPermissionRequest: (controller, request) async {
        debugPrint('[GlamAR] onPermissionRequest');
        return PermissionResponse(
          action: PermissionResponseAction.GRANT,
          resources: request.resources,
        );
      },
    );
  }
}

API Methods

GlamAr.applyBySku("SKU_ID");
GlamAr.applyByCategory("sunglasses");
GlamAr.applyByMultipleConfigData(); // pass a pre-defined sku config
GlamAr.open(mode: "live");
GlamAr.close();
GlamAr.back();
GlamAr.snapshot();
GlamAr.reset();

Event Handling

GlamAr.addEventListener('init-complete', (payload) {
  debugPrint('SDK initialized: \$payload');
});

GlamAr.addEventListener('loaded', (payload) {
  debugPrint('SDK content loaded: \$payload');
});

GlamAr.removeEventListener('loaded');