Augmented Reality in Flutter
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
- Enable ARCore
- Installing plugin
- Classes provided by the plugin
- Making a Sphere
- Making a Cylinder
- Making a Cube
- GitHub Link
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. 🌸