How to Implement a Virtual Try-On Feature for Products in FlutterFlow

1// Key portion of FaceDetectionCamera Custom Widget
2import 'package:google_mlkit_face_detection/google_mlkit_face_detection.dart';
3import 'package:camera/camera.dart';
4
5class FaceDetectionCameraWidget extends StatefulWidget {
6  final String productImageUrl;
7  final String productType;
8  const FaceDetectionCameraWidget({
9    Key? key,
10    required this.productImageUrl,
11    required this.productType,
12  }) : super(key: key);
13
14  @override
15  State<FaceDetectionCameraWidget> createState() =>
16      _FaceDetectionCameraWidgetState();
17}
18
19class _FaceDetectionCameraWidgetState
20    extends State<FaceDetectionCameraWidget> {
21  CameraController? _controller;
22  List<Face> _faces = [];
23  final FaceDetector _detector = FaceDetector(
24    options: FaceDetectorOptions(
25      enableLandmarks: true,
26      performanceMode: FaceDetectorMode.accurate,
27    ),
28  );
29
30  @override
31  void initState() {
32    super.initState();
33    _initCamera();
34  }
35
36  Future<void> _initCamera() async {
37    final cameras = await availableCameras();
38    final front = cameras.firstWhere(
39      (c) => c.lensDirection == CameraLensDirection.front,
40    );
41    _controller = CameraController(front, ResolutionPreset.high);
42    await _controller!.initialize();
43    _controller!.startImageStream(_processFrame);
44    if (mounted) setState(() {});
45  }
46
47  void _processFrame(CameraImage image) async {
48    // Convert CameraImage to InputImage then run detector
49    // (full conversion code omitted for brevity)
50    final faces = await _detector.processImage(inputImage);
51    if (mounted) setState(() => _faces = faces);
52  }
53
54  @override
55  Widget build(BuildContext context) {
56    if (_controller == null || !_controller!.value.isInitialized) {
57      return const Center(child: CircularProgressIndicator());
58    }
59    return Stack(children: [
60      CameraPreview(_controller!),
61      if (_faces.isNotEmpty)
62        ProductOverlay(
63          face: _faces.first,
64          productImageUrl: widget.productImageUrl,
65          productType: widget.productType,
66        ),
67    ]);
68  }
69}

1// ProductOverlay positions product image on face landmarks
2class ProductOverlay extends StatelessWidget {
3  final Face face;
4  final String productImageUrl;
5  final String productType;
6  const ProductOverlay({
7    required this.face,
8    required this.productImageUrl,
9    required this.productType,
10  });
11
12  @override
13  Widget build(BuildContext context) {
14    final leftEye = face.landmarks[FaceLandmarkType.leftEye];
15    final rightEye = face.landmarks[FaceLandmarkType.rightEye];
16    if (leftEye == null || rightEye == null) return const SizedBox();
17
18    final eyeDist = (rightEye.position.x - leftEye.position.x).abs();
19    final overlayWidth = eyeDist * 2.5;
20    final midX = (leftEye.position.x + rightEye.position.x) / 2;
21    final midY = (leftEye.position.y + rightEye.position.y) / 2;
22    final tiltAngle = (face.headEulerAngleZ ?? 0) * (3.14159 / 180);
23
24    return Positioned(
25      left: midX - overlayWidth / 2,
26      top: midY - overlayWidth * 0.25,
27      child: Transform.rotate(
28        angle: -tiltAngle,
29        child: CachedNetworkImage(
30          imageUrl: productImageUrl,
31          width: overlayWidth,
32          fit: BoxFit.contain,
33        ),
34      ),
35    );
36  }
37}

1// Custom Action: captureAndShare
2import 'dart:io';
3import 'package:screenshot/screenshot.dart';
4import 'package:share_plus/share_plus.dart';
5import 'package:path_provider/path_provider.dart';
6
7Future<void> captureAndShare(
8  ScreenshotController screenshotController,
9) async {
10  final imageBytes = await screenshotController.capture(
11    pixelRatio: 2.0,
12  );
13  if (imageBytes == null) return;
14  final dir = await getTemporaryDirectory();
15  final file = await File(
16    '${dir.path}/try_on_${DateTime.now().millisecondsSinceEpoch}.png',
17  ).writeAsBytes(imageBytes);
18  await Share.shareXFiles(
19    [XFile(file.path)],
20    text: 'Check out how I look with this!',
21  );
22}