Airo Global Software

Think Beyond Future !

What Is Augmented Reality In Flutter?

- Posted in Flutter by

AR core in flutter is a wonderful plugin that gives us an API to perform Augmented presence in flutter applications. This is one of the emerging new technologies in the business. With this plugin, we shall consider the different features presented by this plugin the flutter, so let’s start.

How to Enable ARCore?

To qualify ARCore functionality in Android Studio you require to complete the following steps:-

  1. Include AR Required or AR Optional entries to the manifestAR

    Required

You need to include the below 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" />

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 Google Play Services for AR-enabled in it. In AR Required apps the play store automatically stores the Google Play Services for AR.

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

  1. Modify build.gradle

Please ensure that your project's build.gradle file includes the below code.

allprojects {
   repositories {
       google()

Add the below dependencies in your app-level build.gradle file

dependencies {
 implementation 'com.google.ar:core:1.16.0'
}
  1. 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'
}
  1. Enable android X

Include the below code into your gradle.properties

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

Which are the Classes provided by the plugin?

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

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

ArCoreView

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

  • AUGMENTEDFACE
  • STANDARDVIEW

There are 4 properties in it:-

  • onArCoreViewCreated
  • enableTapRecoginzer
  • enableUpdateListener
  • type

onArCoreViewCreated

This kind takes an ArCoreController. We shall discuss ArCoreController in our later section.

enableTapRecoginzer

Initially, set to false. It is made an augment by MethodChannel.

enableUpdateListener

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

type

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

ArCoreController

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

ArCoreFaceView

It is a stateful widget that makes an ArCoreAndroidView. It has two characters: enableAugmentedFaces, onArCoreViewCreated.

At first, enableAugmentedFaces is set to false.

onArCoreViewCreated takes a program with an ArCoreController augment.

ArCoreFaceController

It is used to dispose of and loadMesh the method to control the FaceView.

ArCoreSphere

It is ArCoreShape, which takes a radius and ArCoreMaterial.

ArCoreCylender

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

ArCoreCube

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

ArCoreNode

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

ArCoreMaterial

It is used to make the outlook of the virtual type generated by the user.

It has colour, texture bytes, metallic, roughness, reflection.

ArCoreRotatingNode

It is an ArCoreNode with a degree per second property which is a double value.

ArCorePlane

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

There are three kinds of plane:-

  • HORIZONTAL_UPWARD_FACING
  • HORIZONTAL_DOWNWARD_FACING
  • VERTICAL

ArCoreReferenceNode

It is ArCoreNode, it has all the characteristics 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

import 'package:arcore_flutter_plugin/arcore_flutter_plugin.dart';
import 'package:flutter/material.dart';
import 'package:vector_math/vector_math_64.dart' as vector;
void main() {
 runApp(HelloWorld());
}
class HelloWorld extends StatefulWidget {
 @override
 _HelloWorldState createState() => _HelloWorldState();
}
class _HelloWorldState extends State {
 ArCoreController arCoreController = ArCoreController();
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     home: Scaffold(
       appBar: AppBar(
         title: const Text('Hello World'),
       ),
       body: ArCoreView(
         onArCoreViewCreated: _onArCoreViewCreated,

       ),
     ),
   );
 }
 void _onArCoreViewCreated(ArCoreController controller) {
   arCoreController = controller;
   _addSphere(arCoreController);
   _addCylinder(arCoreController);
   _addCube(arCoreController);
 }
 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);
 }
 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);
 }
 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);
 }
 @override
 void dispose() {
   arCoreController.dispose();
   super.dispose();
 }
}

If you have any doubt about this augment reality in flutters. If you want any software consultations and services, Don’t hesitate to contact us through the given email. Airo global software will always be your digital partner.

E-mail id: [email protected]

enter image description here Author - Johnson Augustine
Chief Technical Director and Programmer
Founder: Airo Global Software Inc
LinkedIn Profile: www.linkedin.com/in/johnsontaugustine/