How to Create a Virtual Store with a 3D Product Viewer in FlutterFlow

In Firestore, open your products collection (or create it) and add these fields to each product document: model3dUrl (String — Firebase Storage URL to the .glb file), variants (Array of Maps — each map has color (String), hexCode (String), model3dUrl (String for this color variant's model), imageUrls (Array of Strings for 2D photos of this variant)), isArEnabled (Boolean — whether AR is available), modelSizeKb (Integer — store the file size to warn users on mobile data). Upload your .glb files to Firebase Storage under a models/ folder. In FlutterFlow's Firestore panel, import the updated schema. Keep .glb files under 5MB — use tools like gltf-transform or Blender to compress models before uploading.

In FlutterFlow, go to Custom Widgets and create a widget named ProductViewer3D. In the pubspec dependencies, add model_viewer_plus: ^1.6.0. The widget accepts parameters: modelUrl (String — the Firebase Storage URL to the .glb file), autoRotate (Boolean, default true), backgroundColor (Color). The widget renders a ModelViewer widget from the model_viewer_plus package. Set the src property to the modelUrl, enable ar mode, set autoRotate and autoRotateDelay. The ModelViewer widget renders the .glb file using the device's WebView (Android) or Quick Look (iOS) with built-in touch controls for rotate, zoom, and pan. Place this Custom Widget in the product detail page's upper section with a fixed height of 350px.

1// Custom Widget: ProductViewer3D
2// pubspec: model_viewer_plus: ^1.6.0
3import 'package:flutter/material.dart';
4import 'package:model_viewer_plus/model_viewer_plus.dart';
5
6class ProductViewer3D extends StatefulWidget {
7  final String modelUrl;
8  final bool autoRotate;
9  final Color backgroundColor;
10  final double width;
11  final double height;
12
13  const ProductViewer3D({
14    Key? key,
15    required this.modelUrl,
16    this.autoRotate = true,
17    this.backgroundColor = Colors.white,
18    required this.width,
19    required this.height,
20  }) : super(key: key);
21
22  @override
23  State<ProductViewer3D> createState() => _ProductViewer3DState();
24}
25
26class _ProductViewer3DState extends State<ProductViewer3D> {
27  @override
28  Widget build(BuildContext context) {
29    if (widget.modelUrl.isEmpty) {
30      return Container(
31        width: widget.width,
32        height: widget.height,
33        color: widget.backgroundColor,
34        child: const Center(child: Text('No 3D model available')),
35      );
36    }
37    return SizedBox(
38      width: widget.width,
39      height: widget.height,
40      child: ModelViewer(
41        src: widget.modelUrl,
42        ar: true,
43        arModes: const ['scene-viewer', 'webxr', 'quick-look'],
44        autoRotate: widget.autoRotate,
45        autoRotateDelay: 2000,
46        cameraControls: true,
47        backgroundColor: Color.fromARGB(
48          widget.backgroundColor.alpha,
49          widget.backgroundColor.red,
50          widget.backgroundColor.green,
51          widget.backgroundColor.blue,
52        ),
53        shadowIntensity: 1,
54        shadowSoftness: 1,
55      ),
56    );
57  }
58}

On the product detail page, below the 3D viewer, add a Row of color chip buttons. Each chip is a GestureDetector wrapping a Container with the variant's hexCode as its background color and a checkmark overlay for the selected variant. Create a Page State variable selectedVariantIndex (Integer, default 0). Bind the ProductViewer3D widget's modelUrl parameter to the currently selected variant's model3dUrl: use a Custom Function named getVariantModelUrl that takes the variants list and selectedVariantIndex and returns the model3dUrl string. When a color chip is tapped, update selectedVariantIndex. The 3D viewer, main product image, and price will all update via their data bindings. If a variant does not have its own .glb model, fall back to the base product's model3dUrl.

The model_viewer_plus package's ar: true parameter automatically adds an AR button to the 3D viewer on supported devices. On Android, it uses Google Scene Viewer via the scene-viewer AR mode. On iOS, it uses Apple Quick Look via the quick-look AR mode. These are OS-level AR experiences — no custom AR code required. Add a separate View in AR button below the 3D viewer that is conditionally visible only when the product's isArEnabled field is true. When tapped, call a Custom Action named launchArViewer that opens the .glb URL directly using the launch URL action with the special Google Scene Viewer URL format for Android and the .usdz file URL for iOS. Note that AR works best for physical products with accurate real-world dimensions — set the scale attribute in ModelViewer to match actual product dimensions.

Unoptimized 3D models are the most common cause of poor performance in 3D stores. Use Blender (free) or the gltf-transform CLI to compress .glb files before uploading. Target file sizes: under 2MB for mobile, under 5MB for tablet/desktop. In Blender, use Draco compression when exporting to .glb — this reduces file sizes by 60-80% with minimal visual quality loss. In FlutterFlow, show the model file size (from the modelSizeKb Firestore field) as a download notice if it exceeds 3MB: 'Large 3D model (4.2MB) — load anyway?' with Yes/No buttons. Cache the loaded model by keeping the ProductViewer3D widget mounted in the widget tree rather than rebuilding it on tab switch.