Flutter ARCore plugin integration

  • img
    Muhammad T S
  • August 1,2019

Powerful Augmented Reality Application using Flutter

Augmented Reality blends digital objects into real world to provide enriched and real-time experience.
Different AR platforms are available for developing great applications. AR Core by Google is a software development kit that allows for augmented reality applications to be built.
AR Core is SDK is available for both ios and android platforms and support for different development engines like Unity is available.
Developers can use AR Core ,AR Kit by Apple or other platform plugins to develop AR enabled Apps.

AR Core Plugin for flutter ,which is available on pub.dev ,is easy to understand and use. The api is well documented and easy to follow.

To use this plugin , we have to configure our flutter app by adding dependency in the pubspec.yaml

pubspec.yaml:

   dependencies:
	   arcore_flutter_plugin: ^0.0.2+2

Save the file and

$  flutter pub get

in the console to download the plugin.

Now, we can import the plugin to our project dart file by

import 'package:arcore_flutter_plugin/arcore_flutter_plugin.dart';

Next Step is to enable AR Core in your app.
Add these to your main/Androidmanifest.xml

<!-- "AR Required" apps must declare minSdkVersion ≥ 24 -->
<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>

You can use optional instead of required if you don't want Playstore to download and AR Core when the app is installed.

<application>
<meta-data android:name="com.google.ar.core" android:value="optional" />
</application>

For Complex 3D models AR Core uses Sceneform
Add Sceneform plugin in your android/app/buld.gradle file

	android {
		compileSdkVersion 28
...
		compileOptions {
				sourceCompatibility 1.8
				targetCompatibility 1.8
		}
		defaultConfig {
...
				minSdkVersion 24
...	
		}
...
	}

	dependencies {
...
		implementation 'com.google.ar.sceneform.ux:sceneform-ux:1.8.0'
		implementation 'com.google.ar.sceneform:core:1.8.0'
		implementation 'com.google.ar:core:1.8.0'
	}

Flutter AR Core plugin requires androidX support
For AndroidX add this to your gradle.properties file

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

The important widget from the plugin is ArCoreView() The Constructor takes 4 named arguments

onArCoreViewCreated,enableTapRecognizer,enableUpdateListener,key

You can use ArCoreView( ) widget as body: of your Scaffold( ) or as child: of any other widgets.

ArCoreController arCoreController;

@override
Widget  build(BuildContext context) {
	return  Scaffold(
		appBar:  AppBar(
		title:  const  Text('AR Home'),
	),
		body:  ArCoreView(
			onArCoreViewCreated: _onArCoreViewCreated,
			enableTapRecognizer:  true,
		),
	);
}

void  _onArCoreViewCreated(ArCoreController controller) {
	arCoreController = controller;
	arCoreController.onPlaneTap = _handleOnPlaneTap;
}

AR Core detects and marks the plane it identifies and give the user visual feedback.

Plane Detection AR Core

Augmented Objects are called nodes.Objects can be created using constructor ArCoreNode( )

void  _onArCoreViewCreated(ArCoreController controller) {
	arCoreController = controller;
	arCoreController.onPlaneTap = _handleOnPlaneTap;
}

void _handleOnPlaneTap(List<ArCoreHitTestResult> hits){
	final material = ArCoreMaterial(
      color: Color.fromARGB(120, 66, 134, 244),
    );
    final sphere = ArCoreSphere(
      materials: [material],
      radius: 10,
    );
    final node = ArCoreNode(
      shape: sphere,
      position: vector.Vector3(0, 0, -1.5),
    );
    controller.addArCoreNode(node);
}

The Plugin includes constructors for other shapes as well.
Keep Exploring...

The official Documentation and examples are available in github

Subscribe to newsletter
Need more tech news? Tune in to our weekly newsletter to get the latest updates