How to Implement Augmented Reality Navigation Within an App in FlutterFlow

1import 'dart:math';
2import 'package:flutter/material.dart';
3import 'package:camera/camera.dart';
4import 'package:geolocator/geolocator.dart';
5import 'package:flutter_compass/flutter_compass.dart';
6
7class POI {
8  final String name;
9  final double latitude;
10  final double longitude;
11  const POI({required this.name, required this.latitude, required this.longitude});
12}
13
14class ARNavigationWidget extends StatefulWidget {
15  final List<POI> pois;
16  const ARNavigationWidget({super.key, required this.pois});
17  @override
18  State<ARNavigationWidget> createState() => _ARNavigationWidgetState();
19}
20
21class _ARNavigationWidgetState extends State<ARNavigationWidget> {
22  CameraController? _cameraController;
23  double _heading = 0;
24  double _userLat = 0;
25  double _userLon = 0;
26  final List<double> _headingBuffer = [];
27
28  @override
29  void initState() {
30    super.initState();
31    _initCamera();
32    _startStreams();
33  }
34
35  Future<void> _initCamera() async {
36    final cameras = await availableCameras();
37    if (cameras.isEmpty) return;
38    _cameraController = CameraController(cameras.first, ResolutionPreset.medium);
39    await _cameraController!.initialize();
40    if (mounted) setState(() {});
41  }
42
43  void _startStreams() {
44    Geolocator.getPositionStream(
45      locationSettings: const LocationSettings(accuracy: LocationAccuracy.high),
46    ).listen((pos) => setState(() { _userLat = pos.latitude; _userLon = pos.longitude; }));
47
48    FlutterCompass.events?.listen((event) {
49      if (event.heading == null) return;
50      _headingBuffer.add(event.heading!);
51      if (_headingBuffer.length > 5) _headingBuffer.removeAt(0);
52      setState(() => _heading = _headingBuffer.reduce((a, b) => a + b) / _headingBuffer.length);
53    });
54  }
55
56  double _bearing(double lat2, double lon2) {
57    final dLon = (lon2 - _userLon) * pi / 180;
58    final y = sin(dLon) * cos(lat2 * pi / 180);
59    final x = cos(_userLat * pi / 180) * sin(lat2 * pi / 180) -
60        sin(_userLat * pi / 180) * cos(lat2 * pi / 180) * cos(dLon);
61    return (atan2(y, x) * 180 / pi + 360) % 360;
62  }
63
64  double _distance(double lat2, double lon2) {
65    final dLat = (lat2 - _userLat) * pi / 180;
66    final dLon = (lon2 - _userLon) * pi / 180;
67    final a = sin(dLat/2)*sin(dLat/2) +
68        cos(_userLat*pi/180)*cos(lat2*pi/180)*sin(dLon/2)*sin(dLon/2);
69    return 6371000 * 2 * atan2(sqrt(a), sqrt(1 - a));
70  }
71
72  @override
73  Widget build(BuildContext context) {
74    if (_cameraController == null || !_cameraController!.value.isInitialized) {
75      return const Center(child: CircularProgressIndicator());
76    }
77    final size = MediaQuery.of(context).size;
78    return Stack(children: [
79      SizedBox.expand(child: CameraPreview(_cameraController!)),
80      CustomPaint(
81        size: size,
82        painter: _AROverlayPainter(
83          pois: widget.pois, heading: _heading,
84          bearingFn: _bearing, distanceFn: _distance,
85        ),
86      ),
87    ]);
88  }
89
90  @override
91  void dispose() {
92    _cameraController?.dispose();
93    super.dispose();
94  }
95}
96
97class _AROverlayPainter extends CustomPainter {
98  final List<POI> pois;
99  final double heading;
100  final double Function(double, double) bearingFn;
101  final double Function(double, double) distanceFn;
102  _AROverlayPainter({required this.pois, required this.heading,
103      required this.bearingFn, required this.distanceFn});
104  @override
105  void paint(Canvas canvas, Size size) {
106    final paint = Paint()..color = Colors.white..strokeWidth = 2;
107    for (final poi in pois) {
108      final dist = distanceFn(poi.latitude, poi.longitude);
109      if (dist > 500) continue;
110      final bearing = bearingFn(poi.latitude, poi.longitude);
111      final rel = ((bearing - heading + 360) % 360);
112      final angle = rel > 180 ? rel - 360 : rel;
113      final x = size.width / 2 + sin(angle * pi / 180) * size.width / 2;
114      final clampedX = x.clamp(20.0, size.width - 20);
115      final y = size.height * 0.6;
116      final path = Path()
117        ..moveTo(clampedX, y - 20)
118        ..lineTo(clampedX - 10, y)
119        ..lineTo(clampedX + 10, y)
120        ..close();
121      canvas.drawPath(path, paint);
122      final tp = TextPainter(
123        text: TextSpan(text: '${poi.name}\n${dist.toInt()}m',
124            style: const TextStyle(color: Colors.white, fontSize: 12)),
125        textDirection: TextDirection.ltr,
126      )..layout();
127      tp.paint(canvas, Offset(clampedX - tp.width / 2, y + 5));
128    }
129  }
130  @override
131  bool shouldRepaint(_AROverlayPainter old) => true;
132}