Quickstart in Flutter

Integrate the ARwayKit SDK with Flutter

In this quickstart guide, we will be integrating the ARwayKit SDK in the standard flutter app

Installed Versions

In this guide, we will be using the following versions of Flutter, Dart, and Unity:

• Flutter version: 3.10.5

• Dart version: 3.0.5

• Unity: 2022.3.29f1 LST

Download the ARwayKit SDK

Steps

1. Download the ARwayKit SDK project from GitHub as a ZIP. You can contact us for access to the ARwayKit SDK.

Creating a Blank Project in Flutter

If you have already created a Flutter project, you may skip the installation instructions and proceed with the next steps. Otherwise, kindly refer to the Flutter documentation for installation guidelines.

flutter create my_project_name

Configure the Flutter Project

We are using the flutter_unity_widget package to integrate our ARwayKit SDK with Flutter. https://pub.dev/packages/flutter_unity_widget

Steps

1. Open the pubspec.yaml file and add flutter_unity_widget to it under the dependencies section.

   dependencies:
     flutter_unity_widget: ^2022.2.0

   • Now inside your Dart code you can import it.

     import 'package:flutter_unity_widget/flutter_unity_widget.dart';

2. After adding the dependencies, you need to fetch them into your Flutter project. You can fetch the dependencies by -

   • From the terminal: Run flutter pub get OR

   • From Android Studio/IntelliJ: Click Packages get in the action ribbon at the top of pubspec.yaml.

   • From VS Code: Click Get Packages located on the right side of the action ribbon at the top of pubspec.yaml.

3. Then add an import statement for using the package inside your Dart code.

   We have created sample Dart files with unity pre-integrated to help you get started quickly with the project. The Dart files are located in the lib folder within the Flutter project.

Add the ARwayKit SDK to the Flutter Folder

Steps:

1. Download the Source code (zip) from the GitHub repo (unity-viewer-sdk-3.1.4.zip).
2. Extract the source code from the downloaded zip file by right-clicking on it and selecting "Extract All" or using a zip extraction tool of your choice.

3. In your Flutter app directory, create a new folder named "unity".

   • Move the extracted Unity project folder into the newly created "unity" folder. The expected path should be: unity/unity-viewer-sdk-3.1.4/...

   .
   ├── my_project_name
   │   └── .dart_tool
   │   └── .idea
   │   └── android
   │   └── ios
   │   └── lib
   │   └── linux
   │   └── macos
   │   └── test
   │   └── unity    // Create this folder
   │       └── <Your Unity Project>    // Example: unity-viewer-sdk-3.1.4
   │   └── web
   │   └── windows

4. Make sure you have the Unity editor version 2022.3.29f1 installed on your computer. If you don't have it, download and install it from the official Unity website.

5. Open the Unity editor and navigate to the "unity-viewer-sdk-3.1.4" folder by selecting "Open Project" from the Unity editor's file menu and choosing the appropriate folder.

6. Before opening the project, ensure that you have the required modules downloaded and installed for both Android and iOS builds. If you haven't already, download and install the following modules in the Unity Hub:

   • Android Build Support

   • OpenJDK

   • Android SDK & NDK Tools

   • iOS Build Support

7. Once you have the required modules installed, open the Unity project by selecting it from the Unity Hub or by double-clicking on the Unity project file in the "unity-viewer-sdk-3.1.4" folder.

8. After opening the project, the Unity editor will start importing the necessary files, and a new Unity editor window will open, displaying the project's contents.

Update Addressables Groups & Set Account ID and Secret Key

Getting the Account ID and Secret Key

1. From the ARway Creator Portal, go to "For Developers -> Create a New App -> Enter App Name".

2. Copy your Account ID and SecretKey for that App.

The "For Developers" page of the Creator Portal

Adding the Account ID and Secret Key

1. In the Project Window, go to "Assets -> ARway -> Viewer Mode -> Resource-> ARWayKitConfig
" and add your credentials for the Account ID and Secret Key.

AR Way Kit Config

Switch Build Platform to Android or iOS.

1. "File -> Build Settings -> Build -> Select iOS/Android"

Updating the Addressables Groups

1. Navigate to "Window -> Asset Management -> Addressable -> Groups".

2. In the Addressables Groups window, click on "Build -> New Build -> Default Build Script".

When making any changes that affect localization strings, you will need to update the Addressables Groups.

Configure the flutter_unity_widget Package

Configuring the flutter_unity_widget can be done by following the instructions in their README.md, or by following the steps outlined below.

Make sure to add the Account ID and Secret Key variables to the Unity project. Follow the guide for Integrating Unity Packages for instructions.

Steps

1. Download the fuw-2022.2.0.unitypackage file and place it into the Unity project folder.

   • The expected path is unity/unity-viewer-sdk-3.1.4/fuw-2022.2.0.unitypackage

2. Using Unity, open the Unity project, go to File -> Build Settings -> Player Settings -> Settings for Android -> Other Settings and change the following under the Configuration section:

   • In Scripting Backend, change to IL2CPP

   • In Target Architectures, select ARMv7 and ARM64

3. File -> Build Settings -> Player Settings -> Settings for iOS -> Other Settings and change the following under the Configuration section:

   • In Scripting Backend, change to IL2CPP

   • In Target Device, choose iPhone Only

   • In Target SDK, choose Device SDK

4. After importing, click on Flutter and select the Export Android Debug or Export Android Release option (will export to android/unityLibrary) or the Export iOS Debug or Export iOS Release option (will export to ios/UnityLibrary).

The "Release" export option is recommended due to optimizations.

To build for Android or iOS, follow the instructions below:

Android

6.1. Open the android/settings.gradle file and add the following:

+    include ":unityLibrary"
+    project(":unityLibrary").projectDir = file("./unityLibrary")
+    include ':unityLibrary:xrmanifest.androidlib'

6.2. The minimum SDK version required for this app is 24. Open the android/app/build.gradle file and change the following:

     android {
          defaultConfig {
+            minSdkVersion 24                                                                            
          }  
     }
     dependencies {
+        implementation project(':unityLibrary')
     }

6.3. If you need to build a release package, open the android/app/build.gradle file and change the following:

     buildTypes {
         release {
             signingConfig signingConfigs.debug
         }
+        debug {
+            signingConfig signingConfigs.debug
+        }
+        profile {
+            signingConfig signingConfigs.debug
+        }
+        innerTest {
+            matchingFallbacks = ['debug', 'release']
+        }
+   }

The code above use the debug signConfig for all buildTypes, which can be changed as you well if you need specify signConfig.

6.4. (Optional) If you use minifyEnabled true in your android/app/build.gradle file, open the android/unityLibrary/proguard-unity.txt and change the following:

+    -keep class com.xraph.plugin.** {*;}

6.5. Open the android/unityLibrary/src/main/AndroidManifest.xml and change the following:

-    <provider android:name="androidx.core.content.FileProvider" android:authorities="com.arway.sdkviewer.unitywebview.fileprovider" android:exported="false" android:grantUriPermissions="true"> 
-        <meta-data android:name="android.support.FILE_PROVIDER_PATHS" android:resource="@xml/unitywebview_file_provider_paths" /> 
-    </provider>

6.6. (Optional) If you want Unity in it's own activity as an alternative, open the android/unityLibrary/src/main/AndroidManifest.xml and change the following:

+    <activity
+        android:name="com.xraph.plugin.flutter_unity_widget.OverrideUnityActivity"
+        android:theme="@style/UnityThemeSelector"
+        android:screenOrientation="fullSensor"
+        android:launchMode="singleTask"
+        android:configChanges="mcc|mnc|locale|touchscreen|keyboard|keyboardHidden|navigation|orientation|screenLayout|uiMode|screenSize|smallestScreenSize|fontScale|layoutDirection|density"
+        android:hardwareAccelerated="false"
+        android:process=":Unity">
+    <meta-data android:name="com.xraph.plugin.flutter_unity_widget.OverrideUnityActivity" android:value="true" />
+    </activity>

iOS

6.1. Open the ios/Runner.xcworkspace (workspace, not the project) file in Xcode, right-click on the Navigator (not on an item), go to Add Files to "Runner" and add the ios/UnityLibrary/Unity-Iphone.xcodeproj file.

6.2. (Optional) Select the Unity-iPhone/Data folder and change the Target Membership for Data folder to UnityFramework.

6.3.1. If you're using Swift, open the ios/Runner/AppDelegate.swift file and change the following:

     import UIKit
     import Fluttergit
+    import flutter_unity_widget
     @UIApplicationMain
     @objc class AppDelegate: FlutterAppDelegate {
         override func application(
             _ application: UIApplication,
             didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
         ) -> Bool {
+            InitUnityIntegrationWithOptions(argc: CommandLine.argc, argv: CommandLine.unsafeArgv, launchOptions)

             GeneratedPluginRegistrant.register(with: self)
             return super.application(application, didFinishLaunchingWithOptions: launchOptions)
         }
     }

6.3.2. If you're using Objective-C, open the ios/Runner/main.m file and change the following:

+    #import "flutter_unity_widget.swift.h"

     int main(int argc, char * argv[]) {
          @autoreleasepool {
+             InitUnityIntegration(argc, argv);
              return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
          }
     }

6.4. Add the UnityFramework.framework file as a library to the Runner project

6.5 If you are using Xcode 14 or a newer version, and your Unity version is older than 2021.3.17f1 or 2022.2.2f1, there is a possibility that your app may crash when running from Xcode. To resolve this issue, you need to disable the Thread Performance Checker feature in Xcode. Follow these steps:

1. Open Xcode and navigate to Product > Scheme > Edit Scheme...

2. With the "Run" option selected on the left side, go to the Diagnostics tab.

3. Uncheck the checkbox for Thread Performance Checker.

6.6 Open the ios/Runner/Info.plist and change the following:

     <dict>
+        <key>NSCameraUsageDescription</key> 
+        <string>Used for AR Content and mapping</string> 
+        <key>NSLocationWhenInUseUsageDescription</key> 
+        <string>Used to attach maps with global coordinates and public map searching</string> 
+        <key>NSMicrophoneUsageDescription</key> 
+        <string>Used for creating audio content</string> 
+        <key>NSPhotoLibraryAddUsageDescription</key> 
+        <string>The app requires access to Photos to save media to it.</string> 
+        <key>NSPhotoLibraryUsageDescription</key> 
+        <string>The app requires access to Photos to interact with it.</string> 
     </dict>

Sample Dart Files

We have created sample Dart files to help you get started quickly with the project.

main.dart

main.dart

import 'package:flutter/material.dart';

import 'menu_screen.dart';
import 'arwaysdk_unity_screen.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My Flutter App',
      theme: ThemeData.dark(),
      initialRoute: '/',
      routes: {
        '/': (context) => MenuScreen(),
        '/unity': (context) => ARwayKitUnityScreen(),
      },
    );
  }
}

menu_screen.dart

menu_screen.dart

import 'package:flutter/material.dart';

class MenuScreen extends StatefulWidget {
  const MenuScreen({Key? key}) : super(key: key);

  @override
  // ignore: library_private_types_in_public_api
  _MenuScreenState createState() => _MenuScreenState();
}

class _MenuScreenState extends State<MenuScreen> {
  final String title = 'Open ARway SDK';
  final String route = '/unity';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('ARwayKit Flutter Demo'),
      ),
      body: Center(
        child: Column(
          children: [
            const SizedBox(
              height: 32,
            ),
            const Padding(
              padding: EdgeInsets.all(30),
              child: Text(
                'Example scene to show how to link "ARwayKit SDK" scenes with '
                'Flutter.',
                style: TextStyle(
                  fontSize: 24,
                  letterSpacing: 2,
                  wordSpacing: 5,
                  fontStyle: FontStyle.italic,
                ),
              ),
            ),
            const SizedBox(
              height: 96,
            ),
            Padding(
              padding: const EdgeInsets.all(30),
              child: ElevatedButton(
                onPressed: () {
                  Navigator.of(context).pushNamed(route);
                },
                style: ElevatedButton.styleFrom(
                  elevation: 10,
                  primary: Color(0xFF1AB146),
                  minimumSize: Size(192, 64),
                ),
                child: Text(
                  title,
                  style: const TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

arwaysdk_unity_screen.dart

arwaysdk_unity_screen.dart

import 'package:flutter/material.dart';
import 'package:flutter_unity_widget/flutter_unity_widget.dart';

class ARwayKitUnityScreen extends StatefulWidget {
  ARwayKitUnityScreen({Key? key}) : super(key: key);

  @override
  _ARwayKitUnityScreenState createState() => _ARwayKitUnityScreenState();
}

class _ARwayKitUnityScreenState extends State<ARwayKitUnityScreen> {
  static final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  late UnityWidgetController _unityWidgetController;

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    _unityWidgetController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        title: const Text('Home'),
      ),
      body: Card(
        margin: const EdgeInsets.all(8),
        clipBehavior: Clip.antiAlias,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20.0),
        ),
        child: Stack(
          children: [
            UnityWidget(
              onUnityCreated: _onUnityCreated,
              onUnityMessage: onUnityMessage,
              onUnitySceneLoaded: onUnitySceneLoaded,
              useAndroidViewSurface: true,
              borderRadius: const BorderRadius.all(Radius.circular(70)),
            ),
          ],
        ),
      ),
    );
  }

  void setRotationSpeed(String speed) {
    _unityWidgetController.postMessage(
      'Cube',
      'SetRotationSpeed',
      speed,
    );
  }

  void onUnityMessage(message) {
    print('Received message from unity: ${message.toString()}');
  }

  void onUnitySceneLoaded(SceneLoaded? scene) {
    print('Received scene loaded from unity: ${scene?.name}');
    print('Received scene loaded from unity buildIndex: ${scene?.buildIndex}');
  }

  // Callback that connects the created controller to the unity controller
  void _onUnityCreated(controller) {
    controller.resume();
    this._unityWidgetController = controller;
  }
}

How to use ARway SDK Scenes?

For how to use the scenes in the ARwayKit SDK, kindly look at the documentation for those scenes linked below.

ARWAY SDK

Build And Run:

Run the app on Android with the following command. For iOS, build an XCode project to deploy it to an iOS device from the IDE of your choice.

flutter run

The application must be run on a real device rather than an emulator.

Extras:

Here are some extra methods and APIs which you can implement to communicate to and from Unity using Flutter.

Props

• fullscreen (Enable or disable fullscreen mode on Android)

• disableUnload (Disable unload on iOS when unload is called)

API

• pause() (Use this to pause unity player)

• resume() (Use this to resume unity player)

• unload() (Use this to unload unity player)

• quit() (Use this to quit unity player)

• postMessage(String gameObject, methodName, message) (Allows you invoke commands in Unity from flutter)

• onUnityMessage(data) (Unity to flutter binding and listener)

• onUnityUnloaded() (Unity to flutter listener when unity is unloaded)

• onUnitySceneLoaded(String name, int buildIndex, bool isLoaded, bool isValid,) (Unity to flutter binding and listener when a new scene is loaded)

To see more details, check out the package's official documentation linked below.

https://pub.dev/documentation/flutter_unity_widget/latest/