ar_tryon_view 0.0.5

Native camera preview with transparent PNG overlay effects for Flutter AR try-on (Android+iOS).

AR Try-On View (Flutter)

A lightweight Flutter plugin that embeds a native camera preview using PlatformView + CameraX/AVFoundation and supports transparent PNG overlay effects plus 3D .glb/glTF mask overlays. This is a great starting point for building virtual try-on experiences for e-commerce apps.

Features

• Embedded native Android camera preview using PlatformView + CameraX.
• Overlay transparent PNG effects on top of the camera feed.
• Overlay 3D .glb/glTF masks above the camera preview using ArTryOnGlbMask.
• Dart controller API: start/stop, setEffect, setEffectBytes, setEffectAsset, clearEffect.
• Uses PreviewView ImplementationMode.COMPATIBLE for proper alpha blending (TextureView).
• Works well with permission_handler for camera permission.

Platform Support

• Android: ✅ Supported
• iOS: ✅ Supported (AVFoundation camera preview + PNG overlay)

Installation

Add to your pubspec.yaml:

dependencies:
  ar_tryon_view: ^0.0.5

Usage

Take permission from AndroidManifest.xml file

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

Make sure the /android/app/build.gradle.kts file contain this

android {
    // Recommended to avoid NDK mismatch with some plugins
    ndkVersion = "27.0.12077973"

    defaultConfig {
        // Required for this plugin (CameraX / platform view pipeline)
        minSdk = 24
    }
}

Add your assets in pubspec.yaml file

flutter:
  assets:
    - assets/glasses_01.png
    - assets/face_mask.glb

Set .png assets here

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: ElevatedButton(
      onPressed: () => controller?.setEffectAsset('assets/glasses_01.png'),
      child: const Text('Effect'),
    ),
  );
}

Just like this:

import 'package:flutter/material.dart';
import 'package:permission_handler/permission_handler.dart';
import 'package:ar_tryon_view/ar_tryon_view.dart';

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

  @override
  State<TryOnScreen> createState() => _TryOnScreenState();
}

class _TryOnScreenState extends State<TryOnScreen> {
  ArTryOnController? controller;

  Future<void> _startSafely() async {
    final status = await Permission.camera.request();
    if (!status.isGranted) return;
    await controller?.start();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('AR Try-on Demo')),
      body: Column(
        children: [
          Expanded(
            child: ArTryOnView(
              onCreated: (c) async {
                controller = c;
                await _startSafely();
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(12),
            child: Wrap(
              spacing: 10,
              children: [
                ElevatedButton(
                  onPressed: _startSafely,
                  child: const Text('Start'),
                ),
                ElevatedButton(
                  onPressed: () => controller?.stop(),
                  child: const Text('Stop'),
                ),
                ElevatedButton(
                  onPressed: () => controller?.setEffectAsset('assets/glasses_01.png'),
                  child: const Text('Effect'),
                ),
                ElevatedButton(
                  onPressed: () => controller?.clearEffect(),
                  child: const Text('Clear'),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Use a 3D .glb face mask

Add your .glb file to the app assets:

flutter:
  assets:
    - assets/face_mask.glb

Then pass an ArTryOnGlbMask to ArTryOnView:

ArTryOnView(
  glbMask: const ArTryOnGlbMask.asset(
    'assets/face_mask.glb',
    widthFactor: 0.62,
    heightFactor: 0.42,
    alignment: Alignment(0, -0.28),
    cameraOrbit: '0deg 75deg 2.2m',
    cameraTarget: '0m 0.9m 0m',
    fieldOfView: '26deg',
  ),
  onCreated: (controller) async {
    await controller.start();
  },
)

You can also use remote or local file sources:

ArTryOnGlbMask.url('https://example.com/masks/face_mask.glb');
ArTryOnGlbMask.file('/absolute/path/to/face_mask.glb');

This renders the 3D model as an overlay above the camera preview. True face-anchored tracking still requires a native ARCore/ARKit face tracking implementation; this API prepares the plugin for .glb mask usage and lets you tune placement with alignment, offset, widthFactor, heightFactor, and model-viewer camera values.

iOS Setup

1) Add Camera Permission to Info.plist

Open: ios/Runner/Info.plist and add inside <dict> ... </dict>:

<key>NSCameraUsageDescription</key>
<string>This app needs camera access for AR try-on preview.</string>