Flutter

This page shows how to Create the Flutter platform client using platform channels

TL;DR

Clone and run sample Flutter app with ARCloud module bridge.

Step 1 - Clone this git repo

Github - Graffity-Technologies/graffity-viewer

Step 2 - Put YOUR_ACCESS_TOKEN in TextField and press Submit Button

Create the Flutter platform client

Step 1 - Import the necessary packages

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

Step 2 - Construct the channel to establish communication between Flutter and platform-specific code

Read More: Flutter Docs (opens in a new tab)

class _MyHomePageState extends State<MyHomePage> {
  static const platform = MethodChannel('YOUR_CHANNEL'); // For example 'samples.flutter.dev/ar'

Step 3 - Invoke a method on the method channel

Here is how you get your Access Token

...  
static const platform = MethodChannel('YOUR_CHANNEL'); // For example 'samples.flutter.dev/ar'
var String accessToken = "YOUR_ACCESS_TOKEN"
 
Future<void> _openARFunction() async {
    await platform.invokeMethod('YOUR_METHOD_CHANNEL', {'accessToken': accessToken});
}
...

Step 4 - Use your function

...
ElevatedButton(
  onPressed: _openARFunction,
  child: Text(
    'Open AR',),
  ),
...

iOS with Flutter

Before starting, make sure you already Install the Graffity AR Cloud SDK for iOS

Let's get started!

Step 1 - Setup AR

AppDelegate.swift
import UIKit
import Flutter
 
@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
    
    var navigationController: UINavigationController!
    
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
            
        // Optional if you have external packages such as url_launcher, etc.    
        GeneratedPluginRegistrant.register(with: self) 
            
        // AR Setup
        let controllerAR = window?.rootViewController as! FlutterViewController
        self.navigationController = UINavigationController(rootViewController: controllerAR)
        self.window.rootViewController = self.navigationController
        self.navigationController.setNavigationBarHidden(true, animated: false)
        self.window.makeKeyAndVisible()
        ...

Step 2 - Flutter Platform Channel Setup

AppDelegate.swift
...
let ARChannel = FlutterMethodChannel(name: "YOUR_CHANNEL", binaryMessenger: controllerAR.binaryMessenger)
 
    ARChannel.setMethodCallHandler { [weak self] (call: FlutterMethodCall, result: @escaping FlutterResult) -> Void in
            if call.method == "YOUR_METHOD_CHANNEL" {
                if let args = call.arguments as? Dictionary<String, Any>,
                    let accessToken = args["accessToken"] as? String {
                    let arVC = ARViewController()
                    arVC.accessToken = accessToken
                    self?.navigationController?.setNavigationBarHidden(false, animated: true)
                    self?.navigationController?.pushViewController(arVC, animated: true)
                }
            }
        }
...

Step 3 - Create ARViewController.swift

ARViewController.swift
import UIKit
import GraffityARCloudService
 
class ARViewController: UIViewController {
    var accessToken: String?
    let graffityARCloud = GraffityARCloud(accessToken: "YOUR_ACCESS_TOKEN")
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Use the "accessToken" property to display the passed data
        if let accessToken = accessToken {
                let graffityARCloud = GraffityARCloud(accessToken: accessToken)
                let arCloudUIView = ARCloudUIView(service: self.graffityARCloud)
                self.addChild(arCloudUIView)
                self.view.addSubview(arCloudUIView.view)
            } 
        }
    }

Step 4 - Finally, Add a permission request for your iOS app

Check this

Android with Flutter

Before starting, ensure you do steps 1 - 3 of the Android SDK page.

Step 1 - Add Graffity AR Cloud dependencies

Step 2 - Set minimum SDK version

Step 3 - Add package dependency

Let's get started!

Step 1 - Add an AR Cloud activity

MainActivity.kt
import android.content.Intent
import androidx.annotation.NonNull
import com.graffity.arcloud.ar.ARCloudActivity
 
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.MethodChannel
import io.flutter.plugins.GeneratedPluginRegistrant
 
class MainActivity: FlutterActivity() {
    private val CHANNEL = "YOUR_CHANNEL"
 
    override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) {
        GeneratedPluginRegistrant.registerWith(flutterEngine);
        super.configureFlutterEngine(flutterEngine)
        MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).setMethodCallHandler {
                call, result ->
            if (call.method == "YOUR_METHOD_CHANNEL") {
                val accessToken = call.argument<String>("accessToken")
                val intent = Intent(this, ARCloudActivity::class.java)
                intent.putExtra("PointCloudMode", true)
                intent.putExtra("AccessToken", accessToken)
                startActivity(intent)
                result.success("Success!!!")
            } else {
                result.notImplemented()
            }
        }
    }
}

Step 2 - Finally, Add a permission request for your Android app

Check this

Report Issues

If you're facing any issues related to this package, please find out here.