Explore ARCore in Flutter

Shaiq khan
May 19 · 5 min read

This article mainly focusses on ARCore and their handling in flutter apps. ARCore is Google’s platform for building augmented reality apps to be made that brings capabilities to millions of cellular devices utilizing extraordinary APIs. It permits your device to locate its surroundings, recognise the arena, and communicate with them . After the arrival of arcore 1.6 with further improvement to assist us with building a more realistic and more compelling augmented reality experience with a lot of updates. A part of the APIs is to be had throughout Android and iOS to permit shared AR reviews. We will integrate ARCore in a flutter with a demo example.

ARCore Uses:

There are three uses to combine digital substance with the present actual world as observed through your device’s camera:

  • Motion trace:- permits the phone to realize and observe with its role comparative with the sector.

Implementation:

Step 1: Add the dependencies

Add dependencies to pubspec — yaml file.

dependencies:

arcore_flutter_plugin: ^0.0.3

Step 2: Import

import 'package:arcore_flutter_plugin/arcore_flutter_plugin.dart';

Step 3: Run flutter packages get in the root directory of your app.

Minimum Version Requirement:

minSdkVersion to 24 and compileSdkVersion to 28 change in your android/app/buld.gradle file.

Step 4: Enable ARCore

Enable ARCore in the main/Androidmanifest.xml file.

An app that helps AR capabilities may be configured in two methods are:

For AR Required apps

If you want to Playstore to download ARCore whilst the application has established:-

  • The Google Play Store makes AR Required apps available only on devices that assist ARCore.
<uses-sdk android:minSdkVersion="24"/>
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera.ar" />
<application …>
<meta-data android:name="com.google.ar.core" android:value="required" />
</application>

For AR Optional apps

If you don’t want Playstore to download ARCore whilst the application has established:-

  • AR Optional applications can be established and run on devices that do not support ARCore.
<uses-permission android:name="android.permission.CAMERA" /><!-- "AR Optional" apps must declare minSdkVersion ≥ 14. -->
<uses-sdk android:minSdkVersion="14" />
<application …>
<meta-data android:name="com.google.ar.core" android:value="optional" />
</application>

Step 5: Add the Sceneform library

Add this to your app’s build.gradlefile.

android {

compileSdkVersion 28
...
compileOptions {
sourceCompatibility 1.8
targetCompatibility 1.8
}
defaultConfig {
...
minSdkVersion 24
...
}
}
dependencies {implementation 'com.google.ar.sceneform.ux:sceneform-ux:1.11.0'// Alternatively, use ArSceneView without the UX dependency.
implementation 'com.google.ar.sceneform:core:1.11.0'
implementation 'com.google.ar:core:1.11.0'
}

Step 6:Enable AndriodX

Add this to your grade.properties file:

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

Supported devices:

A record of the unique phone that is currently supported is indexed proper right there:

  • Android (Google Play)

Code Implementation:

In the body part, you will add ArCoreView().

body: ArCoreView(
onArCoreViewCreated: _onArCoreViewCreated,),

Create Controller and use in this_onArCoreViewCreated() method.

ArCoreController arCoreController;

Create _onArCoreViewCreated() method and add all shape in this methods.

_onArCoreViewCreated(ArCoreController _arCoreController){
arCoreController = _arCoreController;
_addSphere(arCoreController);
_addCube(arCoreController);
_addCylinder(arCoreController);
}

In all shape methods, you will add arcore shape and arcore node with position and materials, and you will view on arcore.dartfile.

import 'package:flutter/material.dart';
import 'package:arcore_flutter_plugin/arcore_flutter_plugin.dart';
import 'package:vector_math/vector_math_64.dart' as vector;
class ARCore extends StatefulWidget {
ARCore({Key key, this.title}) : super(key: key);
final String title;@override
_ARCoreState createState() => _ARCoreState();
}
class _ARCoreState extends State<ARCore> {
ArCoreController arCoreController;
_onArCoreViewCreated(ArCoreController _arCoreController){
arCoreController = _arCoreController;
_addSphere(arCoreController);
_addCube(arCoreController);
_addCylinder(arCoreController);
}
_addSphere(ArCoreController _arCoreController) {
final material = ArCoreMaterial(color: Colors.deepPurple, );
final sphere = ArCoreSphere(materials: [material], radius: 0.2,);
final node = ArCoreNode(
shape: sphere,
position: vector.Vector3(
0, -0.3, -1
),
);
_arCoreController.addArCoreNode(node);
}
_addCylinder(ArCoreController _arCoreController) {
final material = ArCoreMaterial(color: Colors.green, reflectance: 1);
final cylinder =
ArCoreCylinder(materials: [material], radius: 0.3,
height: 0.1,);
final node = ArCoreNode(
shape: cylinder,
position: vector.Vector3(
-0.3, -1, -1.0
),
);
_arCoreController.addArCoreNode(node);
}
_addCube(ArCoreController _arCoreController) {
final material = ArCoreMaterial(color: Colors.pink, metallic: 1);
final cube = ArCoreCube(materials: [material], size: vector.Vector3(0.5, 0.5, 0.5));
final node = ArCoreNode(
shape: cube,
position: vector.Vector3(
0.5, -3, -3
),
);
_arCoreController.addArCoreNode(node);
}
@override
void dispose() {
arCoreController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: ArCoreView(
onArCoreViewCreated: _onArCoreViewCreated,
),
);
}
}

You will see a full code on a GitHub, and this is a small demo example to integrate with ARCore, and this below video shows how ARCore will work and 3d Object shown.

3D Object

Conclusion:

I hope this blog will provide you with sufficient information in Trying up ARCore in your flutter projects. Well, there are various options out there for ARCore, and its a fascinating topic for developers.


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.

Click the GitHub link below to find the source code of the Flutter ARCore Demo.


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, Twitter, and LinkedIn for any flutter related queries.

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


FlutterDevs

FlutterDevs intent to deliver Flutter apps with high…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store