AR Weather App in Flutter using ARKIT — Lesson 5

In this lesson, we will be detecting the Horizontal and Vertical planes in ARKitSceneView.

Here is the structured course of this project.

Required Imports

• Import all the required packages at the top of the file.

import 'dart:math';
import 'package:ar_weather_app/models/weather.dart';
import 'package:ar_weather_app/services/weather.dart';
import 'package:arkit_plugin/arkit_plugin.dart';
import 'package:flutter/material.dart';
import 'package:vector_math/vector_math_64.dart' as vector;

Variable Declaration and dispose

• Declaring all the required parameters and disposing of the arkitController when the screen deinitializes in order to avoid memory leaks.

late ARKitController arkitController;
  ARKitPlane? plane;
  List<ARKitPlaneAnchor> allAnchor = [];
  @override
  void dispose() {
    arkitController.dispose();
    super.dispose();
  }

Creating ARKitSceneView

• Replace the body with the below code.

body: Container(
        child: ARKitSceneView(
          enableTapRecognizer: true,
          onARKitViewCreated: onARKitViewCreated,
          planeDetection: ARPlaneDetection.horizontalAndVertical,
        ),
    ),

• Make sure you assign the planeDetection proper enum i.e ARPlaneDetection.horizontalAndVertical, by default it is set as none. For Only Horizontal, ARPlaneDetection.horizontal Only Vertical, ARPlaneDetection.vertical

Declaring Methods

• onARViewCreated once the AR View is Created assign the controller to a global variable so to we can add the nodes on the ARViewScene from anywhere throughout the widget. And when the Horizontal or Vertical planes are detected onAddNodeForAnchor method will be triggered.

void onARKitViewCreated(ARKitController arkitController) {
        this.arkitController = arkitController;
        this.arkitController.onAddNodeForAnchor = _handleAddAnchor;
    }

• Once the onAddNodeForAnchor is triggered we will be adding the plane to the AR Scene.

void _handleAddAnchor(ARKitAnchor anchor) {
    if (anchor is! ARKitPlaneAnchor) {
      return;
    }
    _addPlane(anchor);
  }
  void _addPlane(ARKitPlaneAnchor anchor) {
    allAnchor.add(anchor);
    plane = ARKitPlane(
      width: anchor.extent.x,
      height: anchor.extent.z,
      materials: [
        ARKitMaterial(
          transparency: 0.3,
          diffuse: ARKitMaterialProperty.color(Colors.white),
        )
      ],
    );
    final node = ARKitNode(
      name: anchor.nodeName,
      geometry: plane,
      position: vector.Vector3(anchor.center.x, 0, anchor.center.z),
      rotation: vector.Vector4(1, 0, 0, -pi / 2),
    );
    arkitController.add(node, parentNodeName: anchor.nodeName);
  }

• ARKitPlane will be used to add the Plane in the Scene we need to pass the width and height for that plane. Here, for width and height, we will be getting data from the anchor when the method gets triggered, not only width and height, we will get position and more data from the anchor.
• ARKitMaterial is used to assign some color, and transparency to the 3D object.
• ARKitNode is used for placing the object in the scene without ARKitNode we cannot place any 3D Object on the Scene
• At least we will be adding the node to the controller.

You can check out the whole project on my GitHub.

GitHub — AgnelSelvan/AR-Weather-App-Flutter

Hurrah! and we are done with the Horizontal and Vertical planes in ARKitView.

Do you know you can press the clap👏 button 50 times? The higher you go, the more it motivates me to write more stuff for you guys!
Hello, I am Agnel Selvan. A noob developer. You can find me on Linkedin or stalk me on GitHub.