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-viewerStep 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
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
Report Issues
If you're facing any issues related to this package, please find out here.