DEV Community

vmodal_ai
vmodal_ai

Posted on

Flutter + ARCore/ARKit: Building a Cross-Platform Spatial AR App

Flutter + ARCore/ARKit: Building a Cross-Platform Spatial AR App

Flutter can provide a shared application layer while ARCore and ARKit handle platform-specific spatial tracking.

Architecture 

                 Flutter
                    ↓
           Spatial AR Interface
              ↙           ↘
          Android          iOS
          ARCore          ARKit
              ↘           ↙
             Spatial State
                    ↓
              Flutter UI
Enter fullscreen mode Exit fullscreen mode

Create a Common API 

abstract class SpatialArService {
  Future<void> start();
  Future<void> stop();

  Future<void> addAnchor({
    required double x,
    required double y,
    required double z,
  });
}
Enter fullscreen mode Exit fullscreen mode

The Android implementation can use ARCore and the iOS implementation can use ARKit.

Spatial Concepts

An AR application commonly works with:

  • camera pose
  • planes
  • anchors
  • hit testing
  • depth
  • world coordinates
  • tracking state

Do not assume that coordinate conventions are identical across platforms. Put conversions in a dedicated spatial layer.

Anchors 

Physical Surface
      ↓
Hit Test
      ↓
3D Position
      ↓
Anchor
      ↓
Virtual Object
Enter fullscreen mode Exit fullscreen mode

Anchors allow virtual content to remain associated with real-world locations.

Platform Channels

Flutter can expose a small contract:

startSession
stopSession
addAnchor
removeAnchor
setTrackingMode
Enter fullscreen mode Exit fullscreen mode

For continuous events, use an event stream or plugin API:

trackingChanged
planeDetected
anchorAdded
trackingLost
Enter fullscreen mode Exit fullscreen mode

Avoid exposing the entire native AR API to Dart.

State Management

A BLoC or controller can model:

sealed class ArState {}

class ArInitial extends ArState {}
class ArStarting extends ArState {}
class ArReady extends ArState {}
class ArTrackingLost extends ArState {}

class ArError extends ArState {
  final String message;
  ArError(this.message);
}
Enter fullscreen mode Exit fullscreen mode

Performance

High-frequency AR rendering should remain close to the native AR engine.

Avoid:

Native AR → hundreds of Dart events → huge rebuilds
Enter fullscreen mode Exit fullscreen mode

Prefer:

Native AR → native rendering
             ↓
       compact state/events
             ↓
          Flutter
Enter fullscreen mode Exit fullscreen mode

Tracking Loss

Tracking can degrade because of:

  • poor lighting
  • blank surfaces
  • rapid movement
  • camera obstruction
  • insufficient visual features

Provide useful feedback such as:

Tracking lost
Move the camera slowly
Enter fullscreen mode Exit fullscreen mode

Cross-Platform Testing

Test both ecosystems independently:

Android → different ARCore devices
iOS     → different ARKit devices
Enter fullscreen mode Exit fullscreen mode

Equivalent APIs do not guarantee identical behavior.

Conclusion

The key to cross-platform spatial AR is a stable Flutter abstraction with native AR implementations underneath it. Keep performance-sensitive spatial processing close to ARCore and ARKit while Flutter manages the broader application.

Useful Links

SDK Flutter: https://github.com/v-modal/vmodal_sdk_flutter

SDK Android: https://github.com/v-modal/vmodal_sdk_android

Discord: https://discord.gg/K72z28KUx

Top comments (0)