Create Immersive AR/VR Apps with Flutter & ARCore/ARKit

Flutter is a popular, open-source UI development framework that is used to build native-like apps for various platforms including Android, iOS, and the web. One of the most exciting things about Flutter is its ability to support Augmented Reality (AR) and Virtual Reality (VR) apps, making it possible to build truly immersive experiences.

In this tutorial, I will show you step-by-step how to create an AR/VR app with Flutter and how to use the Flutter AR/VR plugins to achieve this.

Setting Up the Development Environment

To get started, you will need to install Flutter and set up your development environment. If you haven’t installed Flutter yet, follow these instructions to get started: flutter.dev/docs/get-started/install

Creating a New Flutter Project

Next, we’ll create a new Flutter project by running the following command in the terminal:

flutter create my_ar_vr_app

Installing the AR/VR Plugins

There are several AR/VR plugins available for Flutter, including ARCore, ARKit, and Vuforia. In this tutorial, we’ll use ARCore and ARKit plugins as they are the most popular and widely used AR/VR plugins for Flutter.

To install the ARCore and ARKit plugins, add the following dependencies to your pubspec.yaml file:

dependencies:
  arkit_plugin: ^0.0.1
  arcore_flutter_plugin: ^0.0.1

Writing the Code

Now that we’ve installed the plugins, it’s time to write some code! We’ll start by creating an ARCore or ARKit session in our Flutter app. To do this, we’ll use the ArCoreView or ArKitView widget, respectively.

Here’s an example of how to use the ArCoreView widget:

import 'package:flutter/material.dart';
import 'package:arcore_flutter_plugin/arcore_flutter_plugin.dart';

class MyArCorePage extends StatefulWidget {
  @override
  _MyArCorePageState createState() => _MyArCorePageState();
}

class _MyArCorePageState extends State<MyArCorePage> {
  ArCoreController arCoreController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ARCore in Flutter'),
      ),
      body: ArCoreView(
        onArCoreViewCreated: _onArCoreViewCreated,
      ),
    );
  }

  void _onArCoreViewCreated(ArCoreController controller) {
    arCoreController = controller;
  }

  @override
  void dispose() {
    arCoreController.dispose();
    super.dispose();
  }
}

And here’s an example of how to use the ArKitView widget:

import 'package:flutter/material.dart';
import 'package:arkit_plugin/arkit_plugin.dart';

class MyArKitPage extends StatefulWidget {
  @override
  _MyArKitPageState createState() => _MyArKitPageState();
}

class _MyArKitPageState extends State<MyArKitPage> {
  ArKitController arKitController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ARKit in Flutter'),
      ),
      body: ArKitSceneView(
        onArKitViewCreated: _onArKitViewCreated,
      ),
    );
  }

  void _onArKitViewCreated(ArKitController controller) {
    arKitController = controller;
  }

  @override
  void dispose() {
    arKitController.dispose();
    super.dispose();
  }
}

Adding 3D Models

Now that we’ve set up the AR/VR session, we can add 3D models to our app. We’ll use the ArCoreNode or ArKitNode widget to add 3D models to our scene.

Here’s an example of how to add a 3D model to the ARCore scene:

arCoreController.addArCoreNodeWithNode(
  ArCoreReferenceNode(
    name: 'Reference Node',
    shape: ArCoreSphere(
      materials: [
        ArCoreMaterial(
          color: Colors.red,
        ),
      ],
      radius: 0.1,
    ),
  ),
);

And here’s an example of how to add a 3D model to the ARKit scene:

arKitController.add(
  ARKitSphere(
    materials: [
      ARKitMaterial(
        color: Colors.red,
      ),
    ],
    radius: 0.1,
  ),
);

Running the App

Finally, we’re ready to run our app and see the results. To do this, run the following command in the terminal:

flutter run

You should now see a red sphere displayed in the AR/VR scene. You can add more 3D models, animations, and interactivity to the scene to create a more immersive experience.

Conclusion

In this tutorial, I’ve shown you how to create an AR/VR app with Flutter using the ARCore and ARKit plugins. With these plugins, you can easily build truly immersive experiences with Flutter. Happy coding!

Before we go...

If you've come this far, thanks a lot for reading. Let's chat on top of it, you can reach me on LinkedIn or Twitter.

You can take a look at my portfolio here: yatendrakumar.me

Ciao 👋

Flutter and AR/VR: How to Build Immersive Experiences with Flutter

Table of contents