AR Weather App in Flutter using ARKIT — Lesson 2

In this lesson, we will be creating Hello World using ARView and will be going through some of the basic stuff of AR App.

Here is the structured course of this project.

Creating the Hello World AR App

Creating the Hello World AR App

1. Late Initialize ARKitController and dispose the ARKitController

3. Adding the ARKitSceneView in your Scaffold body.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Hello World"),
      ),
      body: ARKitSceneView(
        onARKitViewCreated: onARKitViewCreated,
        environmentTexturing:
            ARWorldTrackingConfigurationEnvironmentTexturing.automatic,
      ),
    );
  }

onARKitViewCreated: This will be called when the ARKitSceneView will get initialized on the screen. environment texturing: It gathers the environment texture in the scene which will be used for lighting the texture in the scene.

4. Initializing ARKitController on ARView created

void onARKitViewCreated(ARKitController arkitController) {
    this.arkitController = arkitController;
    this.arkitController.add(_createHelloWorldText());
  }

On ARKitView Created we are initializing the arKitController and on ARKit Controller we will be adding the Hello World Text. So to add that Hello world text we have created a separate method for that Hello World Text.

5. Creating the Hello World Text in ARKit Scene

ARKitNode _createHelloWorldText() {
    final text = ARKitText(
      text: 'Hello World',
      extrusionDepth: 2,
      materials: [
        ARKitMaterial(diffuse: ARKitMaterialProperty.color(Colors.red))
      ],
    );
    return ARKitNode(
      geometry: text,
      position: vector.Vector3(-0.1, 0.1, -0.4),
      scale: vector.Vector3(0.001, 0.001, 0.001),
    );
  }

• Based on the previous step, the controller called the _createHelloWorldText() function. So on this function, we are creating ARKitText and passing the required parameter, and assigning it to a variable.
• And we need to place the ARKitText on the scene using the ARKitNode. So basically, ARKitNode has multiple parameters we will be using the position and scale parameter for placing and scaling the Text.
• Please feel free to play with all the parameters in ARKitNode.

You can check out the whole project on my GitHub.

GitHub — AgnelSelvan/AR-Weather-App-Flutter

Hurrah! and we are done with the Hello World App using ARView.

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.