AR Weather App in Flutter using ARKIT — Lesson 6

In this lesson, we will be implementing Tap Gestures on ARKitView.

Here is the structured course of this project.

Adding Node Tap Handler

• On Tapping on ARKit View Node list of Node names will be collected and used in that nodes name list we will be placing the planes.
• onNodeTap needs to be created on ARKitController which will be created by onARKitViewCreated method.

void onARKitViewCreated(ARKitController arkitController) {
        this.arkitController = arkitController;
        this.arkitController.onAddNodeForAnchor = _handleAddAnchor;
        // Adding Tap Gestures
        this.arkitController.onNodeTap = (nodes) => onNodeTapHandler(nodes);
    }

Declaring Method for onNodeTapHandler

• On tapping on any node on AR View we will be getting the nodeName and we need to check the nodeName exists in the anchor of planes which we got on the horizontal and vertical planes.
• Once we get the anchor of the tapped node we will be placing the Weather Plane on that node using the _plotWeatherDataOnARKit method.

void onNodeTapHandler(List<String> nodesList) async {
        final tappedAnchor = allAnchor
            .where((element) => element.nodeName == nodesList.first)
            .toList()
            .first;
        _plotWeatherDataOnARKit(tappedAnchor);
    }

• On the tapped node we will be placing a plane.

_plotWeatherDataOnARKit(ARKitPlaneAnchor tappedAnchor) {
        const width = 0.25;
        const height = 0.2;
        final weatherPlane = ARKitPlane(
        width: width,
        height: height,
        materials: [
            ARKitMaterial(
            transparency: 0.6,
            diffuse: ARKitMaterialProperty.color(Colors.black),
            )
        ],
        );
        final weatherNode = ARKitNode(
        geometry: weatherPlane,
        position:
            vector.Vector3(tappedAnchor.center.x, 0.01, tappedAnchor.center.z),
        rotation: vector.Vector4(1, 0, 0, -pi / 2),
        );
        arkitController.add(weatherNode, parentNodeName: tappedAnchor.nodeName);
    }

You can check out the whole project on my GitHub.

GitHub — AgnelSelvan/AR-Weather-App-Flutter

Hurrah! and we are done with the Tap Gestures on 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.