How to Use FlutterFlow's Built-In AR/VR Features

Open your FlutterFlow project and click the '+' icon in the widget panel to add a new widget. Search for 'AR', 'augmented', 'virtual reality', '3D', or 'model viewer' in the widget search bar. You will find no results matching these terms. This is expected and not a bug — FlutterFlow's built-in widget library covers standard UI patterns. The only way to add AR/VR to a FlutterFlow app is through (a) a Custom Widget that wraps a Flutter AR package, (b) a WebView widget loading a web-based AR experience, or (c) a Custom Action that launches a separate native AR session. Choose your path based on your requirements before proceeding.

Add flutter_3d_controller to your project's pubspec.yaml via the Custom Code panel's pubspec tab: 'flutter_3d_controller: ^2.0.0'. Tap Get Packages. Create a new Custom Widget named 'ModelViewer3D'. Define two required parameters: modelUrl (String — the GLTF/GLB URL from Firebase Storage) and width/height (double). In the widget code, return a Flutter3DViewer widget from the flutter_3d_controller package, passing the src parameter as a NetworkGlbLoader with your modelUrl. The flutter_3d_controller widget handles gestures for rotation, zoom, and pan automatically. This is the fastest implementation — no iOS/Android native setup required, works in both Test Mode and Run Mode.

1import 'package:flutter/material.dart';
2import 'package:flutter_3d_controller/flutter_3d_controller.dart';
3
4class ModelViewer3D extends StatefulWidget {
5  const ModelViewer3D({
6    super.key,
7    required this.modelUrl,
8    required this.width,
9    required this.height,
10  });
11  final String modelUrl;
12  final double width;
13  final double height;
14
15  @override
16  State<ModelViewer3D> createState() => _ModelViewer3DState();
17}
18
19class _ModelViewer3DState extends State<ModelViewer3D> {
20  final Flutter3DController controller = Flutter3DController();
21
22  @override
23  Widget build(BuildContext context) {
24    return SizedBox(
25      width: widget.width,
26      height: widget.height,
27      child: Flutter3DViewer(
28        controller: controller,
29        src: widget.modelUrl,
30        enableTouch: true,
31      ),
32    );
33  }
34}

AR placement — placing virtual objects on real-world surfaces using the device camera — requires native platform setup. Add 'ar_flutter_plugin: ^0.7.3' to pubspec.yaml and tap Get Packages. For iOS: export your FlutterFlow project code (Pro plan), open in Xcode, add the 'Privacy - Camera Usage Description' key to Info.plist, and add the ARKit capability to your app target. For Android: add the CAMERA permission and AR_REQUIRED meta-data to AndroidManifest.xml, and add the 'com.google.ar:core' dependency to build.gradle. Create a Custom Widget named 'ARPlacementView' that returns an ARView widget from ar_flutter_plugin. Wire AR hit testing and model placement logic in the widget's AR session handlers.

WebAR uses JavaScript libraries (A-Frame + AR.js, 8th Wall, or Niantic Lightship) to deliver AR experiences through a web browser loaded in a WebView. This path requires no custom Flutter packages, no platform-specific native setup, and works on any device with a camera. In FlutterFlow, add a WebView widget (built-in — search 'WebView' in the widget panel) to your page. Set its URL to your hosted WebAR page. You can host the WebAR page on Firebase Hosting, Vercel, or any static host. Pass the 3D model URL to the WebAR page as a URL parameter so you can dynamically change which model is shown.

All three AR paths require camera access. In FlutterFlow, go to Settings → App Details → Permissions and enable 'Camera'. This adds the iOS NSCameraUsageDescription key to Info.plist and the CAMERA permission to the Android manifest. Write a clear usage description: 'We use your camera to display augmented reality content.' For the ar_flutter_plugin path, also request the camera permission explicitly at runtime before launching the AR view — use the permission_handler Flutter package in a Custom Action that calls Permission.camera.request() and checks the PermissionStatus result. Show a custom explanation dialog before requesting if the status is 'denied'.

AR features require physical hardware and cannot be tested in the FlutterFlow canvas, Test Mode browser, iOS Simulator, or Android emulators. Use FlutterFlow's Run Mode to deploy to a connected physical device. For Path A (flutter_3d_controller), Run Mode on a recent iPhone or Android phone is sufficient. For Path B (ar_flutter_plugin), you need an ARKit-compatible iPhone (6s or later, running iOS 13+) or an ARCore-compatible Android device. Verify the AR tracking planes are detected (shown as colored grids on real surfaces), and test model placement by tapping detected planes. Check the DevTools console for any ARKit/ARCore initialization errors.