Skip to main content

Flutter Setup

In your Flutter project, ensure that your environment is properly configured as per the Flutter setup guide for your specific case.
We recommend using our demo project reference to assist you in integrating the SDK into your project

icon

Flutter Demo Project

Prerequisites​

To follow along you should have basic knowledge of building apps with Flutter and Dart. In this tutorial we are going to use:

Don’t worry if you’re new to Flutter — we’ll explain everything along the way.

Run flutter doctor to verify your environment before you start.

  • Your access key must be setup under Pixelbin > GlamAR console.
  • Under tab GlamAR > Skin Analysis, should have atleast one app with its appId

Installation​

Add the dependency in your pubspec.yaml

dependencies:
  glam_ar_sdk: ^1.0.0

Run:

flutter pub get

Now to start using the GlamAr SDK simply import it

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

Initialization​

To get started, The first step is to initialize GlamAR by calling the init function:

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();

  final overrides = GlamAROverrides(
    category: 'skinanalysis',
    configuration: {
      'skinAnalysis': {
        'appId': 'YOUR_skin-app-id',
      },
    },
  );

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

Replace 'YOUR CONTAINER ID' with your CSS container ID and 'YOUR ACCESS KEY' with your organization AccessKey.

Basic Functions​

addEventListener​

Event listeners are essential soon after initialization is called to start listening to GlamAR SDK callback events.

GlamAr.addEventListener('loaded', (payload) {
  // Triggered when the SDK has successfully loaded
  // Use this to handle any setup tasks that depend on the SDK being ready
  debugPrint('GlamAr SDK Initialized: \$payload');
  // GlamAr.skinAnalysis('start') Start skin analysis right after init
});

After calling init, best practise is to wait to receive the event "loaded" before calling any other function

skinAnalysis​

Open the live camera to see the SKU that you applied. If no sku data has been pass to SDK, it will show an error

GlamAr.skinAnalysis('start');

Camera Permissions​

Android​

To handle camera permission handling for Android follow the given steps

  • In MainActivity.java, ensure onPermissionRequest grants camera access for WebView.
  • Add the required permissions in AndroidManifest.xml
<uses-permission android:name="android.permission.CAMERA"/>
<uses-feature android:name="android.hardware.camera" android:required="true"/>

iOS​

To handle camera permission handling for iOS follow the given steps

  • In Info.plist, add the following key-value pair to request camera permissions:
<key>NSCameraUsageDescription</key>
<string>This app requires access to the camera for showing ar try on's</string>
  • Inside your podfile add the following code
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', /// This is make sure we can get camera permission
        ]
    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();

  final overrides = GlamAROverrides(
    category: 'skinanalysis',
    configuration: {
      'skinAnalysis': {
        'appId': 'your_skin-app-id',
      },
    },
  );

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

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

  GlamAr.addEventListener('loaded', (payload) {
    debugPrint('GlamAR content loaded.');
    // Can call GlamAr.skinAnalysis("start") if we want to start skin analysis as soon as possible
  });

  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,
        );
      },
    );
  }
}