How to Use Augmented Reality for Virtual Product Displays in FlutterFlow

Every AR product model must be in .glb (GL Binary) format — a binary-encoded version of glTF 2.0. Open your 3D model in Blender (free) and export as glTF Binary (.glb). Before exporting, apply Draco mesh compression: in Blender's glTF export panel, expand the Geometry section and enable Draco Mesh Compression. This typically reduces file size by 60-80% (a 20MB model becomes 4MB). Aim for models under 5MB for fast loading. Upload the .glb files to Firebase Storage under a path like products/[product_id]/model.glb. For color variants, create separate .glb files per color or modify the material URL dynamically. Store each variant's Storage URL in the Firestore product document as a map: model_urls.red, model_urls.blue, model_urls.natural.

Create a Custom Widget named ProductViewerWidget. It accepts modelUrl (String), backgroundColor (Color), and autoRotate (bool) parameters. Import model_viewer_plus and use the ModelViewer widget which renders Google's model-viewer web component inside a WebView. Set the src parameter to the modelUrl. Enable auto-rotate, set camera-controls to true, and configure shadow-intensity for a realistic floor shadow. The model_viewer_plus widget works on iOS, Android, and Web without any AR hardware requirement — it is a 3D orbit viewer. Add a 360° rotate icon button overlay that toggles autoRotate to help users discover they can interact with the model. This is the fallback experience for users on devices that do not support ARKit/ARCore.

1import 'package:flutter/material.dart';
2import 'package:model_viewer_plus/model_viewer_plus.dart';
3
4class ProductViewerWidget extends StatefulWidget {
5  final String modelUrl;
6  final bool autoRotate;
7  const ProductViewerWidget({
8    super.key,
9    required this.modelUrl,
10    this.autoRotate = false,
11  });
12  @override
13  State<ProductViewerWidget> createState() => _ProductViewerWidgetState();
14}
15
16class _ProductViewerWidgetState extends State<ProductViewerWidget> {
17  bool _autoRotate = false;
18
19  @override
20  void initState() {
21    super.initState();
22    _autoRotate = widget.autoRotate;
23  }
24
25  @override
26  Widget build(BuildContext context) {
27    return Stack(children: [
28      ModelViewer(
29        src: widget.modelUrl,
30        alt: '3D product model',
31        ar: true,
32        autoRotate: _autoRotate,
33        cameraControls: true,
34        shadowIntensity: 0.8,
35        backgroundColor: Colors.white,
36      ),
37      Positioned(
38        bottom: 16, right: 16,
39        child: FloatingActionButton.small(
40          onPressed: () => setState(() => _autoRotate = !_autoRotate),
41          child: Icon(_autoRotate ? Icons.pause : Icons.threesixty),
42        ),
43      ),
44    ]);
45  }
46}

Create a second Custom Widget named ARPlacementWidget. It accepts modelUrl (String) and scaleMeters (double — the real-world scale of the model in metres). Import ar_flutter_plugin and implement an ArSessionManager with a hit-test placement strategy. When the user taps the floor plane detected by ARKit/ARCore, an ArObject is added to the scene at the tapped position, with the modelUrl loaded from Firebase Storage. Add a placement instruction overlay at the top of the screen: 'Move your phone slowly to detect a flat surface, then tap to place the product.' Show this instruction until the first surface is detected (ArSessionManager.onPlaneDetected callback). Add a Remove button that calls ArObjectManager.removeNode(lastPlacedNode) to clear the placed model.

In the FlutterFlow page containing the ProductViewerWidget, add a horizontal Row of color swatch buttons (small CircleAvatars with each color). Store the available colors and their model URLs from the Firestore product document's model_urls map field. Bind each swatch button to an Action Flow that updates a page state variable selectedModelUrl. The ProductViewerWidget's modelUrl parameter is bound to this page state variable. When the user taps a different color swatch, the page state updates and the ModelViewer reloads with the new model URL. Add a brief fade animation on the viewer to signal the model is changing. If color variants are just material/texture changes (not shape changes), consider a single base model with environment lighting that makes color variants look accurate.

A size reference helps users understand the product's real-world dimensions. When the ARPlacementWidget is active, show a semi-transparent overlay card at the bottom of the screen displaying: the product's dimensions (width x depth x height in cm) loaded from Firestore, and a comparison like 'About the size of a standard dining table.' Add a ruler icon button that places a 1-metre reference cube next to the product in the AR scene — this gives users a spatial reference they intuitively understand. If ar_flutter_plugin is not available (older devices), show the dimensions in the ProductViewerWidget's 3D view instead, rendered as text labels positioned around the model using ModelViewer's hot-spot API.