Develop AR Apps with Flutter
Hello everyone!
In this article, I talked about what AR is and how we can AR experiences with Flutter projects.
Let’s start it to what Augumented Reality(AR) is.
Augmented Reality(AR)
Augmented Reality is a technology that combines the real world with virtual elements. This technology combines computer-generated virtual objects with real-world images in real time.
Therefore, the perception of the real world is enhanced and consolidated by the addition of virtual elements.
Also, I would like to about AR vs VR topics shortly because they always mix or are sometimes confusing for people.
Augmented Reality(AR) vs Virtual Reality(VR)
AR: Users view virtual objects superimposed on them while still seeing the physical world.
VR: It prevents seeing the real world and puts the user in a completely virtual world.
The devices required for AR are: smartphones, tablets or special AR glasses.
The devices required for VR are: special VR glasses or headset, computer or game console.
Augmented Reality(AR) Usage Areas
It is used in education, entertainment, business, health, tourism, industrial design and many other areas.
We can see one of the best mobile app examples by watching this video from Polaroid. Users can interact with these photos by scanning Polaroid photos or QR codes on Polaroid brand products. Photos can come to life, play videos or provide interactive content.
Developing AR apps in Flutter
Before moving on to developing AR applications with Flutter, I would like to explain the logic by touching on the concepts of ARCore and ARKit.
ARKit is an augmented reality software developed by Apple for mobile devices running the IOS operating system.
ArKit augmented reality software is active on devices with IOS 11 and above.
ARCore is augmented reality software developed by Google.
ArCore augmented reality software is active on mobile devices with Android processors and Android operating system devices with versions above Android Nougat.
In Flutter, we can add these to our project thanks to libraries. Now let’s see how we can develop AR projects in Flutter.
Flutter ARKit and ARCore plugins: Flutter provides plugins compatible with ARKit and ARCore.
Using these plugins, you can develop AR applications on iOS and Android devices.
ArCore-Flutter-Plugin: ArCore-Flutter-Plugin provides Flutter developers with access to the ARCore API. Thanks to this plugin, you can develop AR applications on Android devices.
ARKit-Flutter: ARKit-Flutter can be used to develop AR applications on iOS devices. This plugin provides access to the ARKit API and integrates with Flutter.
Vuforia Engine: Vuforia is an AR engine.
Using visual recognition technology, Vuforia can identify real-world objects and combine virtual objects with the real world.
We can use Vuforia on many platforms. We can see the supported platforms in the picture below, and when we pay attention, we cannot see Flutter directly.
Although it does not support Flutter directly, we can see that it supports Android and iOS. So we can use vuforia engine in our Flutter project with platform channel. Another method could be to use webview.
Assets
When developing AR projects, our assets are not normal image formats. We use different assets for AR.
.gltf veya .glb
It is a standard file format for 3D scenes and models.
I would like to give a great GitHub address is for example this format assets. From here you can examine the assets you want and make your 3D assets.
My favorite website is Sketchfab. We can find so many interesting assets.
Demo
Let’s start by adding the ar_flutter_plugin: ^0.7.3 package to the project. In the project, we will display assets from both internet and locally.
Let’s show the menu with a gridview on the homepage. When we click on these menus, they are added to the image opened in that camera.
We created an object class like in below screen.
On the AR page, when the first camera is opened, we add a 3D coordinate system to see where to place our object.
Then we can choose whether to show an object locally or from the internet with FloatingActionButton.
What changes here is actually only the type parameter in the ARNode widget.
Thus, we can add the object we want wherever we want in the camera. We can rotate around it 360 degrees.
You can access the entire code from this repo on my GitHub address.
