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:-
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.
- 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'
}
- 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'
}
- 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]
Author - Johnson Augustine
Chief Technical Director and Programmer
Founder: Airo Global Software Inc
LinkedIn Profile: www.linkedin.com/in/johnsontaugustine/