Explore ARCore in Flutter

This article mainly focuses 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, recognize 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.
• Surroundings comprehension:- lets in the phone to distinguish the size and place of all forms of surfaces: horizontal, vertical, and calculated surfaces like the ground, a footstool, or walls.
• Brightness approximation:- allows the device to appraise the surroundings present lights circumstances.

Implementation:

Step 1: Add the dependencies

Add dependencies to pubspec — yaml file.

dependencies:

arcore_flutter_plugin: latest version

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.
• At the point when clients introduce an AR Required application, the Google Play Store consequently introduces Google Play Services for AR. Be that as it may, your app needs to, anyhow, play out extra runtime checks on the off risk that Google Play Services for AR has to be refreshed or has physically uninstalled.

<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.
• At the factor, when clients introduce an AR Optional application, the Google Play Store won’t consequently introduce Google Play Services for AR with the app.

<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. 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.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 gradle.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)
• Android (China)
• iOS

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.

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.

flutter-devs/flutter_arcore_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com

---

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 a 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.

---

ember 4, 2023.