Now that you are successfully able to stream 3D content into Flutter and know how to make custom adjustments, its time to add AR capabilities to your project.
To add AR capabilities we will integrate Unity as a library into our Flutter project.
Unity provides a framework purpose-built for AR development called AR Foundation. It allows you to build across multiple mobile and wearable AR devices, such as Android with ARCore and iOS with ARKit.
Clone our open-source Flutter + Unity + AR Foundation + echoAR example project.
Add a 3D model to the console.
Create a new Unity project.
Install the echoAR Unity SDK.
Open the sample scene under echoAR/Examples/sample.unity
.
Set the API key in the Inspector of the echoAR game object.
Open the Build Settings window by clicking File > Build Settings....
Select Android and click Switch Platform.
Check Export Project
Open the Player Settings window by clicking Player Settings...
Configure the folowing:
Other Settings > Rendering > Graphics APIs: OpenGLES3
Other Settings > Configuration > Scripting Backends: IL2CPP
Other Settings > Configuration > Target Architectures: ✔ ARMv7, ✔ ARM64
Notice what is your Minimum API Level. You may need it later.
Close the Player Settings window
Click Add Open Scenes
Click Export and save as unityExport
Open the Build Settings window by clicking File > Build Settings....
Select iOS and click Switch Platform.
Click Add Open Scenes
Click Export and save as unityProject
Import the project dependecies by running flutter pub get
from your terminal
Copy your unityExport folder to <your_flutter_project>/android/unityExport
Run flutter pub run flutter_unity:unity_export_transmogrify
in your terminal
Open <your_flutter_project>/android/app/build.gradle
and make sure your project minSdkVersion equals to the one you defined for your Unity Project as Minimum API Level.
Open <your_flutter_project>/android/build.gradle
and, inside allprojects { repositories {} }
, add the following:
flatDir {dirs "${project(':unityExport').projectDir}/libs"}
so it will look something like this:
allprojects {repositories {google()jcenter()flatDir {dirs "${project(':unityExport').projectDir}/libs"}}}
Open <your_flutter_project>/android/settings.gradle
and add the following at the end of the file:include ':unityExport'
Copy your UnityProject folder to <your_flutter_project>/iOS/UnityProject
Open <your_flutter_project>/iOS/Runner.xcworkspace
in Xcode
Go to File > Add Files to "Runner", and add <your_flutter_project>/ios/UnityProject/Unity-iPhone.xcodeproj
Select Unity-iPhone/Data
, and, in the Inspectors pane, set the Target Membership to UnityFramework
Select Unity-iPhone
, select PROJECT : Unity-iPhone, and, in the Build Settings tab, configure the following:
Build Options > Enable Bitcode: No
Linking > Other Linker Flags: -Wl,-U,_FlutterUnityPluginOnMessage
Select Runner, select TARGETS : Runner, and, in the General tab, configure the following:
Frameworks, Libraries, and Embedded Content: UnityFramework.framework -> Embed & Sign
Open Runner/Runner/Info.plist
, and configure the following:
Key | Type | Value |
io.flutter.embedded_views_preview | Boolean | YES |
Open your main.dart
file
Find and replace the value <YOUR-PROJECT-KEY>
with your API key and uncomment the code line
Find and replace the value <YOUR-ENTRY-ID>
with your model's entry ID and uncomment the code line
Save the file and run the project on an phone.