Augmented Reality in Flutter

July 5, 2024July 5, 2024 Shaiq Khan Packages and Plugins

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.

Enable ARCore

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

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
Thanks to Oleksandr Leuschenko for inspiration and his precious code: arkit_flutter_plugin I wrote 2 articles for setup…pub.dev

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.

ArCoreView
ArCoreController
ArCoreFaceView
ArCoreFaceContrller
ArCoreSphere
ArCoreCylinder
ArCoreCube
ArCoreNode
ArCoeMaterial
ArCoreHitTestResult
ArCoreRotatingNode
ArCorePlane
ArCoreReferenceNode

ArCoreView

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

AUGMENTEDFACE
STANDARDVIEW

There are 4 properties in it:-

onArCoreViewCreated
enableTapRecoginzer
enableUpdateListener
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:-

HORIZONTAL_UPWARD_FACING
HORIZONTAL_DOWNWARD_FACING
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

https://gist.github.com/anmolseth06/5f2d4708d907b1327d0756f482027e47#file-main-dart

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. 🌸

Trending Now

Optimizing Flutter Apps for Performance

Octo Image In Flutter

Parse And Display XML Data In Flutter

Explore Table In Flutter

Exploring Intro Slider In Flutter

November 24, 2024

Flutterexperts

Empowering Vision with FlutterExperts' Expertise