Android XR Integration in Flutter & React Native

XR (Extended Reality) is no longer just a concept for games and simulations, it’s becoming a driving force in how mobile apps engage users. 

If you’re building Android apps in Flutter or React Native, you’ve likely seen the rising demand for XR features: AR try-ons, immersive training modules, virtual product showrooms, and even real-world navigation overlays. 

However, integrating XR into these frameworks isn’t a plug-and-play process. It takes planning, smart implementation, and the right tools to make it work seamlessly.

In this blog, we’ll take you deep into how XR works in the Android environment and what it means for developers using Flutter and React Native.

What is Android XR Really About?

XR is an umbrella term that includes:

• AR (Augmented Reality): Adding digital elements into the real world (think Instagram filters or Google Maps AR).
• VR (Virtual Reality): Immersive digital environments that block out the physical world.
• MR (Mixed Reality): A hybrid of AR and VR, like when digital objects respond to the real world, e.g., placing furniture in your room through your camera and interacting with it.

For Android, XR revolves mostly around ARCore, Google’s platform for building AR apps. It provides environmental understanding, motion tracking, and light estimation, everything you need to build AR experiences.

Why Developers Want XR in Flutter & React Native Apps

Today’s users expect apps to go beyond static screens. Whether you’re building for retail, real estate, education, or healthcare, XR is now a strong differentiator. Here’s what’s pushing developers in that direction:

1. Visual Experience is the New UX

An XR-enabled app doesn’t just show information, it lets users interact with it. From 3D car visualizations to AR-driven shopping assistants, XR features can instantly improve time spent on the app and conversions.

2. Client Demand is Real

Companies are now asking for AR-based onboarding, VR training environments, and immersive walkthroughs in even the most traditional sectors. If you’re not XR-ready, you risk losing projects.

3. Competition is Already Doing It

Your competitors are already incorporating XR elements, especially in apps for e-commerce, real estate, fitness, and education. If your app still feels 2D, it may appear outdated in comparison to XR-enabled versions.

The Big Dilemma: Flutter or React Native for XR?

Before jumping into XR integration, one major decision shapes the path forward: Flutter vs React Native.

Let’s look at how both frameworks handle XR on Android.

Flutter: The Visual Powerhouse with Some Workarounds

Flutter, built by Google, is naturally closer to Android’s native APIs. That helps when tapping into ARCore and related services. But XR support in Flutter is not native yet.

• Pros:
  
  • Flutter’s rendering engine (Skia) is fast and custom-drawn, ideal for dynamic visuals.
  • There’s a growing community building packages like ar_flutter_plugin, which acts as a bridge between Flutter and native ARCore.
  • Easy to manage cross-platform logic once AR is abstracted properly.
    
• Challenges:
  
  • Direct support for AR or VR is missing.
  • Most solutions require building platform channels or writing native Kotlin code.
  • SceneKit (used for 3D rendering) doesn’t directly translate into Flutter’s rendering approach.

When Flutter works best for XR: Use Flutter if your app is mostly standard UI/UX with specific XR modules like AR previews, simple overlays, or object detection. Anything beyond that, say, complex gesture interaction or 6DoF VR, you’ll need deep native integration.

React Native: Community-Driven, JavaScript-Based, but Not XR-Ready Out of the Box

React Native has a huge community and tons of native modules, but XR is still a developing area.

• Pros:
  • Easier to integrate JavaScript-based XR libraries.
  • Better support for WebXR, thanks to React Native WebView and WebXR support in Android Chrome.
  • Packages like react-native-unimodules and expo-gl can enable custom rendering.
    
• Challenges:
  • Limited direct ARCore support.
  • Most XR features require native bridging via Java/Kotlin.
  • Higher risk of performance lag if not optimized well.

When React Native works best for XR: If you’re creating XR features that are relatively simple or web-based, like virtual try-ons via WebAR, React Native with WebXR might be sufficient. But for high-performance AR or VR, React Native often struggles unless supplemented with deep native code.

Tools, SDKs, and Frameworks That Work

Here’s what developers are actually using to get XR into Flutter and React Native:

For Flutter XR Development

Flutter doesn’t come with built-in XR capabilities, but it does have a few plugins and approaches that developers are actively using. One of the most popular is ar_flutter_plugin, which enables basic ARCore functionality within Flutter apps. It allows you to place 3D models in real-world environments and detect surfaces.

If you’re targeting iOS as well, arkit_flutter_plugin can be used to integrate Apple’s ARKit for basic AR experiences. But it’s important to note that for more complex requirements, like gesture detection, 6DoF movement, or environmental occlusion, you’ll need to go deeper into native Kotlin or Swift code using Flutter’s platform channels.

For developers building high-performance 3D experiences, Unity is often used alongside Flutter. The flutter_unity_widget package makes it possible to embed a Unity view into a Flutter screen and control it using Dart. This is especially useful for simulations, virtual walkthroughs, and training modules.

For React Native XR Development

React Native takes a different approach. It has limited native support for AR or VR, so most developers rely on WebXR to create XR experiences using browser-based 3D engines like Three.js.

By building a WebXR scene and rendering it inside a react-native-webview, you can deploy lightweight AR scenes with minimal native code. This is great for simple features like product try-ons or interactive 3D visualizations.

More advanced use cases, like immersive VR training or gesture-sensitive AR, require native bridges or Unity integration. Tools like react-native-unity-view allow you to embed Unity’s powerful rendering engine directly into your React Native app.

For developers needing better control over graphics rendering, packages like react-native-unimodules and expo-gl offer low-level access to OpenGL, allowing more sophisticated 3D graphics handling.

Real Use Cases Developers Are Building Right Now

Let’s take a look at actual mobile apps and modules being built using XR on Android with Flutter or React Native:

• AR Furniture Placement: Let users place 3D sofas, tables, or décor in their rooms. Flutter developers often use ar_flutter_plugin for this.
• Interactive Museum Guides: Built in React Native using WebAR, visitors scan QR codes and see AR artifacts come to life on their phones.
• Virtual Try-On for Eyewear or Makeup: A hybrid approach using Unity and Flutter/React Native for smooth rendering.
• Construction Site Visualization: Builders preview 3D floor plans onsite, powered by ARCore inside a Flutter shell.

These aren’t just fancy features. They’re increasing app stickiness, reducing product return rates, and wowing stakeholders during demos.

Making XR Work: The Integration Process Step-by-Step

So you’ve decided to integrate XR features into your Flutter or React Native app. Now what?

Here’s a step-by-step walkthrough for both frameworks, highlighting what you’ll need, what to expect, and where most developers run into issues.

Flutter XR Integration: Step-by-Step

Step 1: Add Dependencies

Start by adding the ar_flutter_plugin or any custom AR plugin you plan to use. This handles the connection between your Flutter code and the ARCore SDK.

dependencies:

  ar_flutter_plugin: ^0.6.0

Step 2: Configure AndroidManifest

ARCore needs specific permissions and features.

<uses-permission android:name=”android.permission.CAMERA”/>

<uses-feature android:name=”android.hardware.camera.ar” android:required=”true”/>

Step 3: Enable AR Session

Once your app launches, initialize an AR session. This includes surface detection, plane tracking, and optionally loading 3D models.

ARView(

  onARViewCreated: _onARViewCreated,

)

Step 4: Load 3D Assets

Use .glb or .usdz models hosted locally or via cloud. Keep file sizes low or use lazy loading.

_arView.addARObject(

  ARNode(

    type: NodeType.localGLTF2,

    uri: “assets/3d_model.glb”,

  ),

);

Step 5: Interact and Animate

Add gestures like drag, pinch, and rotate. Flutter doesn’t have built-in support for advanced gestures in AR, so you’ll often use GestureDetector and custom logic.

React Native XR Integration: Step-by-Step

Step 1: Choose Your Method

You have two main paths in React Native:

• WebXR via WebView (easier, lightweight, limited power)
• Native Modules or Unity Bridge (complex, high performance)

Let’s go with WebXR for this guide since it’s faster to ship.

Step 2: Build WebXR Scene

Use a 3D library like Three.js and create an AR scene.

// Your 3D model loading logic

const scene = new THREE.Scene();

// Add lighting, camera, model, etc.

Then host this scene on a secure HTTPS server (WebXR needs HTTPS to work).

Step 3: Add WebView in React Native

Use react-native-webview to render your hosted XR scene inside the app.

<WebView

  source={{ uri: ‘https://yourdomain.com/xr-scene’ }}

  javaScriptEnabled={true}

/>

Step 4: Pass Camera Permissions

Request camera permissions inside the React Native app using react-native-permissions.

const permission = await request(PERMISSIONS.ANDROID.CAMERA);

Unity as a Bridge (Optional but Powerful)

For both frameworks, you can use Unity as a backend engine to handle complex XR rendering. 

Here’s how it works:

• Unity renders the XR environment.
• Flutter or React Native sends commands via platform channels or bridge.
• Unity returns the visual output via a texture or a native view.

Tools You’ll Need:

• flutter_unity_widget (for Flutter)
• react-native-unity-view (for React Native)

This is especially helpful for:

• Games
• Simulators
• High-fidelity environments
• Multi-platform apps with shared Unity assets

Pain Points and How to Solve Them

No integration comes without challenges. Here are the most common problems developers face while adding XR in Flutter and React Native, and how to fix them:

Issue 1: Lack of Native API Support

Neither Flutter nor React Native has XR APIs out of the box. This forces you to rely on third-party plugins or custom platform code.

Use method channels (Flutter) or native modules (React Native) to access ARCore features directly from Kotlin or Java. Consider using Unity as a rendering backend if the feature set is too heavy.

Issue 2: Poor Performance

Rendering 3D models, tracking real-world planes, and managing camera input drains CPU and GPU. Lag or frame drops make the experience unusable.

Solution:

• Keep 3D models under 5MB.
• Use lazy loading for assets.
• Avoid continuous AR sessions when not needed.
• Optimize shaders and lighting in Unity/WebXR.

Issue 3: Incompatibility Across Devices

Some Android phones don’t support ARCore, leading to crashes or blank screens.

Check device compatibility with ArCoreApk.getInstance().checkAvailability() before starting AR. Offer a fallback view (or WebXR mode) when unsupported.

Issue 4: 3D Asset Management

3D assets need to be compressed, converted, and optimized for mobile.

Solution:

• Use .glb or .gltf formats for lighter size and web compatibility.
• Compress textures using Draco or KTX2.
• Host large models on cloud/CDN and stream as needed.

Issue 5: Testing is a Nightmare

Simulating XR in emulators is nearly impossible. Debugging AR sessions on multiple Android devices is time-consuming.

Solution:

• Test on actual hardware from Day 1.
• Use logging to track camera feed, plane detection, and asset loading.
• Use ARCore’s debug tools for plane visualization.

When to Choose WebXR vs Native SDKs

Choosing between WebXR and native SDKs depends entirely on your use case, performance requirements, and timeline.

WebXR: Fast and Flexible for Light Use Cases

If your goal is to quickly integrate AR into a mobile app without going too deep into native code, WebXR is an excellent option. It’s browser-based, works over HTTPS, and can be embedded directly into your app using a WebView. This makes it ideal for simpler XR applications like virtual product previews, interactive ads, or AR-enhanced content displays.

The biggest advantage of WebXR is the ease and speed of development. You can build with familiar JavaScript libraries, host your scene online, and roll out updates without going through app store approval processes. But it does come with performance limitations and lacks full access to device sensors.

Native SDKs: Power and Performance for Complex XR

When you’re building high-performance, sensor-rich, or highly interactive XR features, native SDKs are the way to go. Flutter works well with ARCore through plugins or native Kotlin integrations, and React Native can use Unity to handle complex rendering and motion tracking.

Native SDKs give you deeper control over the camera, sensors, 3D asset handling, and real-world interactions. They’re a better choice for applications like virtual training simulators, architectural walkthroughs, and advanced AR shopping experiences.

If user immersion, smooth animations, or 3D interactivity is critical to your app, investing in a native approach is worth the effort, even if it takes longer to build.

Cross-Platform or Native: What Should You Choose?

If you’re still deciding which stack to use, here’s a quick decision tree:

Choose Flutter if:

• Your team already uses Dart
• You need Android-first AR with occasional iOS support
• Your XR features are part of a larger cross-platform app

Choose React Native if:

• Your devs are JavaScript-native
• You’re planning to use WebXR
• Your XR features are light and don’t demand native performance

Choose Unity with native bridge if:

• You need advanced AR/VR features
• You’re building something immersive or game-like
• You want XR to be the core feature of the app

Future of XR in Cross-Platform Development

Extended Reality is evolving fast, and cross-platform frameworks like Flutter and React Native are trying to keep up. While neither platform is natively designed for XR, the demand is so high that support is being built piece by piece through plugins, third-party engines, and developer workarounds.

Let’s explore where things are headed and how developers can stay ahead of the curve.

What’s Coming Next?

1. Flutter XR Support Is Slowly Maturing

Although Flutter doesn’t yet have built-in support for ARCore or Sceneform, the community is filling the gap. More developers are contributing to open-source plugins like ar_flutter_plugin, and Google’s own support for Flutter is improving year by year.

We expect:

• Improved camera support (already rolling out in camera_platform_interface)
• More robust AR plugins with gesture handling
• Unity-Flutter bridges becoming easier to implement

2. React Native Pushing Toward WebXR Integration

React Native’s strength is its web-first mindset. With Chrome and Firefox improving WebXR support, React Native apps can soon deliver immersive experiences directly from a WebView without needing native bridges.

New frameworks like React Native Vision Camera are helping push XR to the next level with lower latency and better hardware access. 

Expect:

• Easier access to WebXR APIs
• More integration with JavaScript-based 3D libraries
• Streamlined support for gesture and face tracking

3. Hardware Is Getting Better

Most XR limitations come from hardware bottlenecks: camera latency, poor tracking, overheating. But Android OEMs are closing that gap fast.

Modern phones from Google, Samsung, Xiaomi, and Oppo are shipping with:

• Depth sensors
• Better GPU acceleration
• Support for ARCore out of the box

This means fewer compatibility issues and better support for developers building XR features.

How to Future-Proof Your App for XR

You don’t need to go all-in on XR today. But you should build your app in a way that allows for XR in future updates, because chances are, your client or users will ask for it soon.

Here’s how to stay ready.

1. Design a Modular Architecture

Keep your XR features in a separate module or screen so they can be turned off or updated independently. Don’t hardwire XR into your core logic. This makes it easier to:

• Skip XR on unsupported devices
• Replace one plugin with another (e.g., Unity instead of Flutter plugin)
• Roll out updates without rewriting your main app

2. Use Feature Flags

Create toggle switches to turn XR on/off. Use remote config or a database flag to enable XR features only for supported devices or specific regions.

This also helps in testing, A/B experimentation, and fallback planning.

if (isXRSupported) {

  Navigator.push(context, MaterialPageRoute(builder: (_) => ARExperience()));

} else {

  Navigator.push(context, MaterialPageRoute(builder: (_) => StandardScreen()));

}

3. Plan for Low-End Devices

Not every Android phone supports ARCore. Budget phones often lack the hardware for even basic plane detection.

Smart Strategy:

• Show AR button only if device passes capability check.
• Offer a static 3D viewer or WebXR fallback.
• Compress assets and avoid memory-heavy animations.

4. Build Once, Extend Later

Even if your current project doesn’t need XR, consider future-proofing your app design by:

• Using a 3D-ready asset pipeline
• Building gesture-handling components early
• Designing UI that can work alongside camera input

How Agencies Are Packaging XR Features

Agencies and freelancers are increasingly offering XR capabilities as add-ons or core features in their mobile app projects. Whether working with Flutter or React Native, XR integration is quickly becoming a value proposition for clients across industries.

XR-Driven Features by Industry

In eCommerce, agencies are building AR-powered modules that allow users to preview furniture or clothing in their own space. These features not only increase engagement but also reduce return rates by giving customers a realistic view of the product before purchase.

In education, mobile apps are integrating 3D models and AR flashcards that help students visualize complex subjects like anatomy or astronomy. This is especially popular with EdTech startups and institutions aiming for interactive learning.

Real estate developers and property agents are also jumping in. Agencies are offering virtual walkthroughs and room previews using AR overlays, making it easier for buyers to explore properties remotely.

In healthcare, some apps now include AR features for visualizing surgeries or providing immersive training for medical students. Agencies building these tools are helping clients push innovation in sectors that were previously slow to adopt digital change.

Pricing and Delivery Strategy

XR modules are usually offered as separate deliverables or feature upgrades. For simple AR viewers or WebXR integrations, development can take under a week and is often priced between $1,000 and $2,000. These include things like product try-ons or 3D model viewers with limited interactivity.

For more complex builds, like Unity-powered simulations, room planners, or AR training modules, agencies typically charge $5,000 to $15,000 or more, depending on the complexity and scope.

Smart agencies also bundle XR features into premium packages or upsell them during proposal stages, showcasing live demos to impress clients. Even a basic AR feature, when presented properly, can justify higher pricing and win more projects.

Bonus: Real Code Snippets from Live Apps

Flutter – Place a Chair in Real Space

ARNode node = ARNode(

  type: NodeType.localGLTF2,

  uri: “assets/models/chair.glb”,

  scale: Vector3(0.5, 0.5, 0.5),

  position: Vector3(0.0, 0.0, -1.0),

);

arView.addARObject(node);

This places a 3D chair 1 meter in front of the user. Simple, but powerful.

React Native and WebXR

Here’s how to load a hosted WebXR scene inside your RN app:

<WebView

  source={{ uri: ‘https://myserver.com/xr-room’ }}

  style={{ flex: 1 }}

  originWhitelist={[‘*’]}

  javaScriptEnabled={true}

/>

Then in your WebXR page (using Three.js):

const renderer = new THREE.WebGLRenderer({ alpha: true });

renderer.xr.enabled = true;

document.body.appendChild(ARButton.createButton(renderer));

Need help integrating XR into your Flutter or React Native app?

At iTitans, we’ve built immersive solutions for retail, education, health, and real estate apps. Whether it’s a product try-on, virtual walkthrough, or a 3D simulation, our team makes it work fast and smooth.

Contact Us

FAQs

Can I use ARCore with Flutter?

Yes, you can use ARCore in Flutter by integrating plugins like ar_flutter_plugin, which enables placing and interacting with 3D objects in real environments.

Does React Native support XR features?

React Native doesn’t support XR natively, but you can integrate XR using WebXR with WebView or by bridging native modules like Unity.

Which framework is better for XR, Flutter or React Native?

Flutter works better for Android-native AR features using ARCore, while React Native is ideal for quick WebXR integration. For complex XR, both often use Unity.

What tools are used for XR in Flutter?

Developers often use ar_flutter_plugin, Unity via flutter_unity_widget, and native platform channels to access ARCore and 3D rendering features.

Is WebXR better than native SDKs for XR?

WebXR is faster for development and good for lightweight features, while native SDKs like ARCore or Unity provide better performance and deeper control.