How to get started with Flutter and VisionOS / Apple Vision Pro
Yesterday I had the chance to participate in a VisionPro Hackathon hosted by https://twitter.com/_florianbauer here in Austria.
Florian wrote an article about it here:
https://medium.com/@florian_4237/highlights-apple-vision-pro-hackathon-2c1fe76a17e3
Because we were some of the first people here in Austria and we did not find a lot of really helpful information and content, I wanted to share the first insights and learnings from this day.
This small guide will focus on how to prepare and get up and running with the simulator and device to run your flutter app on it, but I also noted down some of my learnings, experiences and suprises in the following article:
# How complicated is it to make flutter apps for the vision pro?
Before I get started, here is a quick summary. ;)
It is really simple to get started because Apple prepared the workflows in the same way as for iPhone, iPad or the Apple Watch.
I was able to get rather big and complicated existing apps to run on the vision pro within 5–10 minutes. (just some really ios specific SDKs had to be removed)
To be honest, I was really suprised how easy and fast it was to set everything up, so you could really give it a try.
Also, the simulator works quite well. Keep in mind, though, that the apps you can build in flutter (at least, as far as I know) are not the “world” or immersive apps, but rather the “floating window” apps that just work like a big monitor for your ipad/iphone.
Also I have tried around, but did not get vision hover effects to work on flutter, which could be a problem, because they are quite important for the UX of your app.
(more on that in the article https://simonauer.medium.com/my-learnings-running-flutter-on-the-apple-vision-pro-048eb7d4c209 )
## Setting up XCode & Simulator
To get started, you need to install Xcode 15 beta 2 to be able to work with visionos. Also install the visionos Simulator, when asked to do so.
### Prepare your flutter project
Create a new flutter app ( `flutter create vision-demo` ) or use your existing one.
### Open projecct in XCode
Open the ios/Runner.workspace file in XCode to configure it to use visionos.
### Add vision pro as supported Devices for your app
Next we need to make sure visionos is added to the devices supported by our app.
For that, just:
- click on “Runner” (left bar)
- Select the Target “Runner” (left bar in the white middle section)
- “General” (Top Tab in the middle)
- click on the plus in the section “Supported Destinations”
- here you should now be able to select “Apple Vision” -> “Designed for iPad”)
The designed for ipad apps, are the ones we are able to make using Flutter because they are basically iPad apps within a floating window in our living room. At least for now, it seems like you really need SwiftUI or RealityKit to make immersive apps.
If you don’t see the “Apple Vision” entry in the dropdown, make sure you have the correct XCode version ( Xcode 15 beta 2 ).
### Run the app on your simulator
Now, the final step for getting your first app running in the visionOS simulator is to just select the “Apple Vision pro (Designed for iPad)” as your Run Target and click the “Run” (Play) button.
## Setting up for real device
If you have a real Apple Vision Pro and want to test run your app on that, you just need to pair the Vision Pro with your XCode.
Sidenote: Just because we were curious at the Hackathon — yes, it is possible to run your app in Vision Pro guest mode without a cable and with different Apple Ids on the glasses and your XCode.
You just need to make sure you are in the same Wifi and you need to add the device to your XCode and verify it using the Code you get insisde of the headset.
To do that, you just
- have to put the Vision Pro in to pairing mode
(On the Vision Pro: Settings -> General -> Remote Devices) - In XCode: Windows -> Devices & Simulators
- Select the Vision Pro and click the “pair” button
- Now you have to enter the code you see inside of the headset
- After that, you can just select and run your app on the vision pro
- On first run, it XCode will tell you to enable some privacy permissions on the headset, to be able to connect to the debugger and push code to the device (Settings → Privacy & Security → Developer Mode)
Bare in mind, that (at least for now and as far as we have tried), hot reloading did not work and you always to rerun the app.
(if you know how to avoid that, let me know in the comments. would love to hear it)
## Publishing a release version on the device
Running a test app on the device is nice and works quite well with the steps above. However as soon as you stop XCode the app would crash on the device of course. Because we wanted to show our app around without the risk of it crashing, because it cannot connect to the debugger, we ran the app in release mode.
To do this, you simply have to
- Select the scheme at the top and choose “Manage Schemes”
- Select your app “Configurations” and click it
- Now on the left side, make sure “Run” is selected
- On The right side set “Build Configuration” to “Release”
- And uncheck the checkbox “Debug executable”
- Start your app again (run/play button)
That’s it. Now your flutter app will run on the vision pro even if you debugger disconnects.
As you can see, it is super easy to get up and running with your flutter apps on visionOS.
This article just focused on making everything work, but I also wrote a bit about my experience and impressions on the Vision Pro (especially with Flutter).
So if you are interessted in that, check out:
I read and write a lot about flutter & tech. I think it always helps to get some insights and share knowledge. So if you are interested in these topics as well, follow me here on medium or on twitter.
Thanks for reading :)
