How to Create Custom AR/VR Experiences in FlutterFlow

1import 'package:flutter/material.dart';
2import 'package:flutter_3d_controller/flutter_3d_controller.dart';
3
4class ProductViewer3D extends StatefulWidget {
5  const ProductViewer3D({
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<ProductViewer3D> createState() => _ProductViewer3DState();
17}
18
19class _ProductViewer3DState extends State<ProductViewer3D> {
20  late final Flutter3DController _ctrl = Flutter3DController();
21
22  @override
23  void dispose() {
24    _ctrl.dispose();
25    super.dispose();
26  }
27
28  @override
29  Widget build(BuildContext context) {
30    return SizedBox(
31      width: widget.width,
32      height: widget.height,
33      child: Flutter3DViewer(
34        controller: _ctrl,
35        src: widget.modelUrl,
36        enableTouch: true,
37        onLoad: () => debugPrint('Model loaded: ${widget.modelUrl}'),
38        onError: () => debugPrint('Model error: ${widget.modelUrl}'),
39      ),
40    );
41  }
42}

1import 'package:flutter/material.dart';
2import 'package:ar_flutter_plugin/ar_flutter_plugin.dart';
3import 'package:ar_flutter_plugin/datatypes/config_planedetection.dart';
4import 'package:ar_flutter_plugin/datatypes/node_types.dart';
5import 'package:ar_flutter_plugin/managers/ar_location_manager.dart';
6import 'package:ar_flutter_plugin/managers/ar_session_manager.dart';
7import 'package:ar_flutter_plugin/managers/ar_object_manager.dart';
8import 'package:ar_flutter_plugin/managers/ar_anchor_manager.dart';
9import 'package:ar_flutter_plugin/models/ar_node.dart';
10import 'package:vector_math/vector_math_64.dart';
11
12class ARPlacementView extends StatefulWidget {
13  const ARPlacementView({
14    super.key,
15    required this.modelUrl,
16    required this.width,
17    required this.height,
18  });
19  final String modelUrl;
20  final double width;
21  final double height;
22
23  @override
24  State<ARPlacementView> createState() => _ARPlacementViewState();
25}
26
27class _ARPlacementViewState extends State<ARPlacementView> {
28  ARSessionManager? arSessionManager;
29  ARObjectManager? arObjectManager;
30
31  @override
32  void dispose() {
33    arSessionManager?.dispose();
34    super.dispose();
35  }
36
37  @override
38  Widget build(BuildContext context) {
39    return SizedBox(
40      width: widget.width,
41      height: widget.height,
42      child: ARView(
43        onARViewCreated: _onARViewCreated,
44        planeDetectionConfig: PlaneDetectionConfig.horizontalAndVertical,
45      ),
46    );
47  }
48
49  void _onARViewCreated(
50    ARSessionManager session,
51    ARObjectManager objects,
52    ARAnchorManager anchors,
53    ARLocationManager location,
54  ) {
55    arSessionManager = session;
56    arObjectManager = objects;
57    arSessionManager!.onInitialize(
58      showFeaturePoints: false,
59      showPlanes: true,
60    );
61    arObjectManager!.onInitialize();
62    arSessionManager!.onPlaneOrPointTap = _onPlaneTap;
63  }
64
65  Future<void> _onPlaneTap(List<ARHitTestResult> hits) async {
66    if (hits.isEmpty) return;
67    final hit = hits.first;
68    final node = ARNode(
69      type: NodeType.webGLB,
70      uri: widget.modelUrl,
71      scale: Vector3(0.2, 0.2, 0.2),
72      position: Vector3(0, 0, 0),
73      rotation: Vector4(1, 0, 0, 0),
74    );
75    await arObjectManager?.addNode(node, planeAnchor: hit);
76  }
77}

1import 'package:flutter/material.dart';
2import 'package:panorama_viewer/panorama_viewer.dart';
3
4class PanoramaViewer360 extends StatelessWidget {
5  const PanoramaViewer360({
6    super.key,
7    required this.imageUrl,
8    required this.width,
9    required this.height,
10  });
11  final String imageUrl;
12  final double width;
13  final double height;
14
15  @override
16  Widget build(BuildContext context) {
17    return SizedBox(
18      width: widget.width,
19      height: widget.height,
20      child: Panorama(
21        child: Image.network(
22          imageUrl,
23          fit: BoxFit.cover,
24          errorBuilder: (ctx, err, stack) =>
25              const Center(child: Text('Failed to load panorama')),
26        ),
27      ),
28    );
29  }
30}