How to Integrate Augmented Reality Features in FlutterFlow

In FlutterFlow, go to Custom Code → Pubspec Dependencies → Add Dependency → type ar_flutter_plugin and add the current stable version. Also add vector_math and flutter_cache_manager as dependencies — ar_flutter_plugin uses these internally. Click Save. Next, add the Custom Widget: Custom Code → Custom Widgets → Add Widget. Name it ARView. Set the widget dimensions to take the full available space (isFullPage: true or give it flexible width/height). In the Custom Widget code editor, import the ar_flutter_plugin package and create the ARWidget. Add a parameter to the Custom Widget: modelUrl (String) — this will receive the 3D model URL from the parent page. Add optional parameters: onObjectPlaced (Action) to notify the parent page when a model is placed, and initialScale (double) defaulting to 0.5 for the model size. The ARView Custom Widget is a StatefulWidget that creates an ARSessionManager and ARObjectManager in initState and disposes them in dispose.

1// Custom Widget: ARView
2// Pubspec: ar_flutter_plugin, vector_math
3// Parameters: modelUrl (String), initialScale (double)
4
5import 'package:flutter/material.dart';
6import 'package:ar_flutter_plugin/ar_flutter_plugin.dart';
7import 'package:ar_flutter_plugin/datatypes/config_planedetection.dart';
8import 'package:ar_flutter_plugin/datatypes/node_types.dart';
9import 'package:ar_flutter_plugin/managers/ar_anchor_manager.dart';
10import 'package:ar_flutter_plugin/managers/ar_location_manager.dart';
11import 'package:ar_flutter_plugin/managers/ar_object_manager.dart';
12import 'package:ar_flutter_plugin/managers/ar_session_manager.dart';
13import 'package:ar_flutter_plugin/models/ar_anchor.dart';
14import 'package:ar_flutter_plugin/models/ar_node.dart';
15import 'package:vector_math/vector_math_64.dart' as vector;
16
17class ARViewWidget extends StatefulWidget {
18  final String modelUrl;
19  final double initialScale;
20  const ARViewWidget({
21    required this.modelUrl,
22    this.initialScale = 0.5,
23    Key? key,
24  }) : super(key: key);
25
26  @override
27  State<ARViewWidget> createState() => _ARViewWidgetState();
28}
29
30class _ARViewWidgetState extends State<ARViewWidget> {
31  ARSessionManager? arSessionManager;
32  ARObjectManager? arObjectManager;
33  ARAnchorManager? arAnchorManager;
34  ARNode? placedNode;
35  List<ARAnchor> anchors = [];
36
37  @override
38  void dispose() {
39    arSessionManager?.dispose();
40    super.dispose();
41  }
42
43  @override
44  Widget build(BuildContext context) {
45    return ARView(
46      onARViewCreated: _onARViewCreated,
47      planeDetectionConfig: PlaneDetectionConfig.horizontalAndVertical,
48    );
49  }
50
51  void _onARViewCreated(
52    ARSessionManager sessionMgr,
53    ARObjectManager objectMgr,
54    ARAnchorManager anchorMgr,
55    ARLocationManager locationMgr,
56  ) {
57    arSessionManager = sessionMgr;
58    arObjectManager = objectMgr;
59    arAnchorManager = anchorMgr;
60
61    arSessionManager!.onInitialize(
62      showFeaturePoints: false,
63      showPlanes: true,          // Show detected planes as translucent surfaces
64      showWorldOrigin: false,
65    );
66    arObjectManager!.onInitialize();
67
68    // Place object when user taps on a detected plane
69    arSessionManager!.onPlaneOrPointTap = _onPlaneTapped;
70  }
71
72  Future<void> _onPlaneTapped(List<ARHitTestResult> hits) async {
73    if (hits.isEmpty) return;
74
75    // Remove previously placed node
76    if (placedNode != null) {
77      arObjectManager?.removeNode(placedNode!);
78    }
79
80    final hit = hits.first;
81    final anchor = ARPlaneAnchor(transformation: hit.worldTransform);
82    final bool anchorAdded = await arAnchorManager!.addAnchor(anchor);
83    if (!anchorAdded) return;
84    anchors.add(anchor);
85
86    // Place the 3D model at the tapped location
87    final node = ARNode(
88      type: NodeType.webGLB, // Remote .glb URL
89      uri: widget.modelUrl,
90      scale: vector.Vector3(
91        widget.initialScale,
92        widget.initialScale,
93        widget.initialScale,
94      ),
95      position: vector.Vector3(0.0, 0.0, 0.0),
96      rotation: vector.Vector4(1.0, 0.0, 0.0, 0.0),
97    );
98
99    await arObjectManager!.addNode(node, planeAnchor: anchor);
100    placedNode = node;
101  }
102}

After downloading your FlutterFlow project code, configure the native platform files for AR. For Android: open android/app/build.gradle and confirm minSdkVersion is 24 (ARCore requires Android 7.0+). Open android/app/src/main/AndroidManifest.xml and add inside the manifest element: <uses-permission android:name='android.permission.CAMERA' />, and inside the application element: <meta-data android:name='com.google.ar.core' android:value='required' /> (use 'optional' if AR is a bonus feature, not required). For iOS: open ios/Runner/Info.plist and add: NSCameraUsageDescription key with value explaining why you need camera access ('This app uses the camera to view 3D models in your space'). Open ios/Runner.xcodeproj in Xcode → select Runner target → Signing & Capabilities → + Capability → add 'Camera'. Minimum iOS version must be 11.0. In your Flutter project root, the pubspec.yaml should have arcore_flutter_plugin under dependency_overrides if you encounter version conflicts. These platform configurations are required for App Store and Google Play submission.

Not all devices support AR — ARCore is available on most Android devices from 2018 onward, but older Android and some budget devices are not supported. ARKit requires iPhone 6s+ (iOS 11+). Your app must check support before initializing AR and show a fallback experience. Create a Custom Action named checkARSupport that returns a Boolean — true if AR is supported, false if not. In FlutterFlow, on the AR feature page: on page load, call checkARSupport Custom Action. If the result is true, show the ARView Custom Widget. If false, show a fallback Container with a model_viewer Custom Widget (using the model_viewer_plus package) that displays the 3D model in an interactive 3D viewer without AR — users can rotate and zoom the model but cannot place it in their room. The fallback must show the model, not just an error message — 'View in 3D' is a valuable fallback even without AR.

1// Custom Action: checkARSupport
2// Returns: bool — true if device supports AR
3import 'package:ar_flutter_plugin/ar_flutter_plugin.dart';
4
5Future<bool> checkARSupport() async {
6  try {
7    // Check if ARCore (Android) or ARKit (iOS) is available
8    final bool isARCoreSupported = await ArCoreController.checkIfARCoreApkIsUpdated()
9        .then((_) => true)
10        .catchError((_) => false);
11    return isARCoreSupported;
12  } catch (e) {
13    return false;
14  }
15}
16
17// Alternative: simpler platform check
18import 'dart:io';
19Future<bool> checkARSupportSimple() async {
20  if (Platform.isIOS) {
21    // ARKit available on iPhone 6s+ with iOS 11+
22    // Basic check — full check requires ARSession.isSupported
23    return true; // Handle unsupported in ARKit error callback
24  } else if (Platform.isAndroid) {
25    // ARCore check via ar_flutter_plugin
26    try {
27      final availability = await checkARCoreAvailability();
28      return availability == ARCoreAvailability.supportedAndUpdated ||
29             availability == ARCoreAvailability.supportedApkTooOld;
30    } catch (e) {
31      return false;
32    }
33  }
34  return false;
35}

Static AR demos use hardcoded model URLs, but production AR features load models dynamically — different products show their own 3D models. Upload your .glb files to Firebase Storage: in Firebase Console → Storage → Upload file, or use FlutterFlow's File Upload button with a Cloud Function to handle admin uploads. Store the model URL in the Firestore product document: a field named arModelUrl (String). In FlutterFlow, on the ProductDetail page, the Backend Query fetches the product including the arModelUrl field. Pass this URL as the modelUrl parameter to your ARView Custom Widget using Set from Variable → Backend Query Result → arModelUrl. Add an 'AR View' button on the product page that navigates to a fullscreen AR page, passing the arModelUrl as a page parameter. On the AR page, place the ARView Custom Widget and bind modelUrl to the page parameter. Add a back arrow overlay button in a Stack on top of the AR view so users can return to the product page.

The basic tap-to-place interaction is the minimum viable AR experience, but users also need to resize and rotate the placed object. Add an overlay UI on top of the ARView using a Stack widget: place the ARView as the bottom layer, and a Column of controls as the top layer positioned at the bottom of the screen. Add a Slider widget for scale: bind to a Page State variable objectScale (Double, initial: 0.5, min: 0.1, max: 2.0). On slider change, call a Custom Action named updateNodeScale that calls arObjectManager.updateNodeScale(placedNode, newScale). Add rotation buttons: left arrow and right arrow icon buttons, each calling updateNodeRotation Custom Action with +/- 15 degree increments. Add a trash icon button that removes the placed object: calls arObjectManager.removeNode(placedNode) and arAnchorManager.removeAnchor(lastAnchor). Add a 'Capture' icon button that calls Custom Action takeScreenshot to capture the AR view as an image: uses RenderRepaintBoundary to capture the screen and saves to the camera roll or Firebase Storage for sharing.