Augmented Reality in Flutter

Real-world with virtual reality

Introduction

AR core in flutter is a beautiful plugin that provides us API to implement Argumented reality in flutter application. This is one of the emerging new technologies in the market. With this plugin, we shall discuss the various features provided by this plugin the flutter, so let’s start.

Table of content

1. Enable ARCore
2. Installing plugin
3. Classes provided by the plugin
4. Making a Sphere
5. Making a Cylinder
6. Making a Cube
7. GitHub Link

Enable ARCore

To enable ARCore functionality in Android Studio you need to perform the following steps:-

1. Add AR Required or AR Optional entries to the manifest

AR Required

You need to include the following entries in your AndroidManifest.xml file:-

<uses-permission android:name="android.permission.CAMERA" />
<uses-sdk android:minSdkVersion="24" />
<uses-feature android:name="android.hardware.camera.ar" />
<application …>
    <meta-data android:name="com.google.ar.core" android:value="required" />
</application>

AR Optional

<uses-permission android:name="android.permission.CAMERA" />
<uses-sdk android:minSdkVersion="14" />
<application>
    <meta-data android:name="com.google.ar.core" android:value="optional" />
</application>

The difference between the AR Optional and AR Required is that AR Required app requires an ARCore Supported Devices that had Goole Play Services for AR installed in it. In AR Required apps the play store automatically stores the Goole Play Services for AR.

While in AR Optional apps can be installed and run on the devices that don’t support ARCore and also play store will not install the Goole Play Services for AR automatically.

2. Modify build.gradle

Please make sure in your projects build.gradle file includes the following code.

allprojects {
    repositories {
        google()

Add the following dependencies inside your app-level build.gradle file

dependencies {
  implementation 'com.google.ar:core:1.16.0'
}

3. Sceneform plugin in your app-level build.gradle file

android {
    compileOptions {
        sourceCompatibility 1.8
        targetCompatibility 1.8 
}
dependencies {
    implementation 'com.google.ar.sceneform.ux:sceneform-ux:1.8.0'
    implementation 'com.google.ar.sceneform:core:1.8.0'
}

4. Enable android X

Add the following code into your gradle.properties

org.gradle.jvmargs=-Xmx1536M
android.useAndroidX=true
android.enableJetifier=true

Installing Package

arcore_flutter_plugin | Flutter Package

This is the plugin that I am using for my project.

Update the dependencies in your pubspec.yaml file.

Classes provided by the plugin

There are a total of 13 classes provided by this plugin until May 2020.

1. ArCoreView
2. ArCoreController
3. ArCoreFaceView
4. ArCoreFaceContrller
5. ArCoreSphere
6. ArCoreCylinder
7. ArCoreCube
8. ArCoreNode
9. ArCoeMaterial
10. ArCoreHitTestResult
11. ArCoreRotatingNode
12. ArCorePlane
13. ArCoreReferenceNode

ArCoreView

This class returns the view type. There are two types of views in it.

1. AUGMENTEDFACE
2. STANDARDVIEW

There are 4 properties in it:-

1. onArCoreViewCreated
2. enableTapRecoginzer
3. enableUpdateListener
4. type

onArCoreViewCreated

This property takes a ArCoreController. We shall discuss about ArCoreController in our later section.

enableTapRecoginzer

Initially, set to false. It is used as an argument by the MethodChannel.

enableUpdateListener

Initially, set to false. It is used as an argument by the MethodChannel.

type

It is a view type, it is either AUGMENTEDFACE, STANDARDVIEW. It is set to STANDARDVIEW by default.

ArCoreController

This controller used to add a ArNode using addArCoreNode function, add a ArCoreNode with ancher using a addArCoreNodeWithAncher function and also remove node using removeNode function.

ArCoreFaceView

It is a stateful widget that returns a ArCoreAndroidView. It has two properties enableAugmentedFaces, onArCoreViewCreated.

Initially, enableAugmentedFaces is set to false.

onArCoreViewCreated takes a function with ArCoreController argument.

ArCoreFaceController

It used dispose and loadMesh method to control the FaceView.

ArCoreSphere

It is ArCoreShape, takes a radius and ArCoreMaterial.

ArCoreCylender

It is ArCoreShape, takes a radius, height, and ArCoreMaterial.

ArCoreCube

It is ArCoreShape, takes a size i.e. Vector3 and ArCoreMaterial.

ArCoreNode

This widget is used to provide the position, shape, scale, rotation, name.

ArCoreMaterial

It is used to describe the outlook of the virtual object created by the user.

It has color,textureBytes, metallic, roughness, reflection.

ArCoreRotatingNode

It is an ArCoreNode with a degreesPerSecond property which is a double value.

ArCorePlane

It takes the x, y coordinate of the plane, ArCorePose, and ArCorePlaneType.

There are three types of plane:-

1. HORIZONTAL_UPWARD_FACING
2. HORIZONTAL_DOWNWARD_FACING
3. VERTICAL

ArCoreReferenceNode

It is ArCoreNode, it has all the properties that the ArCoreNode has also it has objectUrl and object3DFileName.

objectUrl

URL of glft object for remote rendering.

object3DFileName

Filename of sfb object in assets folder.

Making a Sphere

void _addSphere(ArCoreController controller) {
  final material = ArCoreMaterial(
    color: Color.fromARGB(120, 66, 134, 244),
  );
  final sphere = ArCoreSphere(
    materials: [material],
    radius: 0.1,
  );
  final node = ArCoreNode(
    shape: sphere,
    position: vector.Vector3(0, 0, -1.5),
  );
  controller.addArCoreNode(node);
}

Making a Cylinder

void _addCylinder(ArCoreController controller) {
  final material = ArCoreMaterial(
    color: Colors.red,
    reflectance: 1.0,
  );
  final cylinder = ArCoreCylinder(
    materials: [material],
    radius: 0.5,
    height: 0.3,
  );
  final node = ArCoreNode(
    shape: cylinder,
    position: vector.Vector3(0.0, -0.5, -2.0),
  );
  controller.addArCoreNode(node);
}

Making a Cube

void _addCube(ArCoreController controller) {
  final material = ArCoreMaterial(
    color: Color.fromARGB(120, 66, 134, 244),
    metallic: 1.0,
  );
  final cube = ArCoreCube(
    materials: [material],
    size: vector.Vector3(0.5, 0.5, 0.5),
  );
  final node = ArCoreNode(
    shape: cube,
    position: vector.Vector3(-0.5, 0.5, -3.5),
  );

  controller.addArCoreNode(node);
}

main.dart file

GitHub Link :

https://github.com/flutter-devs/arcoreflutter

Thanks for reading this article ❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

If we got something wrong? Let me know in the comments. we would love to improve.

Feel free to connect with us:
And read more articles from FlutterDevs.com

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, and Twitter for any flutter related queries.

We welcome feedback, and hope that you share what you’re working on using #Flutter. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!

Thank you for reading. 🌸