Cross-platform Embed(Flutter)

What is Flutter?

Flutter is Google's UI toolkit for building beautiful, natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase.

AR-MOD with Flutter

In the past, to use AR-MOD sdk in Flutter, developers need to create AR-MOD plug-ins for Flutter projects, so that Flutter can use AR-MOD!
We also found this problem, so we launched a plug-in that fully supports Flutter in version 0.0.4. We pushed it to pub.dev and the name is flutter_armod_widget .
From now on I will lead you to see how to use AR-MOD SDK in Flutter.
We will skip how to install flutter and how to create a project with flutter

Setup Flutter project

Step 1

Open the pubspec.yaml file and write the flutter_armod_widget: ^0.0.3 to dependencies .
1
dependencies:
2
flutter:
3
sdk: flutter
4
flutter_armod_widget: ^0.0.3
Copied!

Step 2

Run the flutter pub get command in your project's termial to install the dependencies.

Step 3

Download and unzip the AR-MOD SDK Framework from github.
GitHub - Phantomxm2021/ARMOD-Framework: AR-MOD means to provide stable, flexible, convenient and fast AR technology empowerment for enterprises or individual developers with existing applications. In addition, it is also possible to build a brand new AR application for enterprises or individuals that do not use the application. AR-MOD provides AR integration capabilities for enterprises or individuals. Users do not need to understand ARKit or ARCore or even rendering logic and information, but only need to focus on the realization of AR experience content.
GitHub

Step 3.1 for Android

Go to the location of your FLUTTER SDK PATH/.pub-cache/hosted/pub.dartlang.org/flutter_armod_widget-0.0.3/ folder, then paste the libs to android platform folder.

Step 3.2 for iOS

  1. 1.
    Create the ThirdParties folder to your XCode project.
  2. 2.
    Import UnityFramework.framework to the folder(ThridParties).
  3. 3.
    Add the Framewrok to Xcode -> Targets -> Your APP -> General -> Franework,Libraries, and Embedded Content area, And set the Embed mode to Embed & Sign.
  4. 4.
    Execute the cd iOS command and run Pod install command in your termial.

Step 4

  1. 1.
    Run Flutter pub get command in your termial again.
  2. 2.
    Create and write your app token to PhantomsXRConfig.dart.
  3. 3.
    And write a new screen for AR-MOD.

Build and Test

Android
No additional configuration required
iOS
If you're using Swift, open the ios/Runner/AppDelegate.swift file and change the following:
AppDelegate.swift
1
import UIKit
2
import Flutter
3
import flutter_armod_widget
4
5
@UIApplicationMain
6
@objc class AppDelegate: FlutterAppDelegate {
7
override func application(
8
_ application: UIApplication,
9
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
10
) -> Bool {
11
12
InitARMODIntegrationWithOptions(argc: CommandLine.argc, argv: CommandLine.unsafeArgv, launchOptions)
13
let nativeCalls: AnyClass? = NSClassFromString("FrameworkLibAPI")
14
nativeCalls?.registerAPIforNativeCalls(ARMODCallbackAPI())
15
16
GeneratedPluginRegistrant.register(with: self)
17
return super.application(application, didFinishLaunchingWithOptions: launchOptions)
18
}
19
}
20
Copied!
If you're using Objective-C, open the ios/Runner/main.m file and change the following:
main.m
1
#import "flutter_armod_widget.swift.h"
2
int main(int argc, char * argv[]) {
3
@autoreleasepool {
4
InitARMODIntegration(argc, argv);
5
return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
6
}
7
}
Copied!
Edit the info.plist
1
<dict>
2
<key>io.flutter.embedded_views_preview</key>
3
<string>YES</string>
4
</dict>
Copied!
1
<dict>
2
<key>Privacy - Camera Usage Description</key>
3
<string>$(PRODUCT_NAME) uses Cameras</string>
4
</dict>
Copied!
1
<dict>
2
<key>NSBonjourServices</key>
3
<string>_dartobservatory._tcp</string>
4
</dict>
Copied!
OK, you just need to run flutter run --release command in the terminal. An AR app will be run in you phone!
The following is a sample project that we have verified:
GitHub - Phantomxm2021/ARMOD-FlutterAppDemo: Flutter AR-MOD widget for embedding AR features in flutter.
GitHub

Common mistakes

iOS Error

  • Q: ios/Flutter/Generated.xcconfig must exist.
    • A: Execute Flutter run command to generate the Generated.xcconfig file
  • Q: CocoaPods could not find compatible versions for pod "flutter_armod_widget"
    • A: Find and replace the platform :ios, '9.0' to platform :ios, '11.0' in the Podfile. Then Execute Pod update command to refresh your project.
Last modified 1mo ago