skip to Main Content

Building an AR app with Flutter and Appwrite

Building an AR app with Flutter and Appwrite,

Photo by Sigmund on Unsplash

Augmented Reality is all set to create a more immersive world that will encompass most of our daily life. In this article, I share my experience building an AR project, how I decided on the idea, overcame certain challenges. There might be some important takeaways, hence be sure to read till the end.

Disclaimer : This article does not promote or demote any pacakge, tool, or technology, I am jotting down my experince and what worked for me so you can get some takeaways if you’re building using a similar techstack. The best tool is always the one that works best for you.

Introduction

This project is originally a part of my university curriculum, I essentially came up with the idea to build something unique as most projects were based on Machine learning. The initial idea was to build an AR app that could help us try out outfits, but after consideration of the complexity and the support of technology and time constraints, we decided to build an AR app that would show food instead. Hence, finally, we stuck to the idea of building a restaurant app that would show pizzas, burgers, and desserts as 3D models.

Getting Started

The initial tech stack for this was Flutter, Unity AR, and Firebase, but we soon had to switch to using the ar_core_flutter plugin and Appwrite for the backend. I’ll describe my decisions in further sections on why I switched the tech stack and the challenges and benefits I experienced.

Building the app with Flutter

I wanted to try new things I hadn’t tried before with this project. So I chose GetIt as a service locator, GetX for state management, and Beamer for routing and navigation. I had not used any of these in my projects before and was excited to try them out as they are quite popular within the community.

  • State Management

But, things didn’t work out, My Widget was not updating with GetX, which I know I might’ve been using wrong, the documentation is a bit mixed up as well as I referred to it several times and could not figure out the exact way to use certain things, it was also slightly confusing to use GetBuilderand GetX as they have similar functionalities. Overall, my widget did not update and I was very unclear why as I verified my work several times. Apart from this, coming from Riverpod and having used BloC, the entire structure of the files just felt like an anti-pattern, I felt much harder to organize my code and structure it. So in my opinion, if you are a Freezed + Riverpod user especially with flutter hooks, switching to anything else might not feel at home.

I had to migrate my entire project back to using Freezed + Riverpod, in my opinion, the way freezed maps states to widgets is one of the sweetest syntaxes that will keep your code clean combined with StateNotifier and Hooks, Riverpod is one the best combination of packages to architect and maintain your codebase.

Trending AR VR Articles:

1. How VR could bring transhumanism to the masses

2. How Augmented Reality (AR) is Reshaping the Food Service Industry

3. ExpiCulture — Developing an Original World-Traveling VR Experience

4. Enterprise AR: 7 real-world use cases for 2021

  • Navigation

Beamer is a wonderful package that tries to solve the complexities of using Navigator 2.0 in Flutter. Although it has amazing support to build complex navigation layouts, it was still hard to grasp some things as I was running out of time and didn’t get the chance to play around with the package more. Hence, I had to switch back to autoroute, which I had been using for a while, and AutoRoute does support Navigator 2.0 with a much simpler API.

Augmented Reality

  • Options

The first option was to use Unity AR with the help of the Flutter Unity Widget package. But there are certainly very few resources to using AR in unity and the whole integration simply more complex. And showing multiple objects from a remote database was still a tricky thing to think about as I was not much aware of it and the community around this is also quite small, flutter+unity is really cool support but unless you have worked with unity, it might not be the smoothest development experience.

I wish the flutter team officially supported use cases like this, but luckily there a lot of community effort and a nice package AR Core Flutter.

  • Challenges

Although I was able to integrate it successfully with a good result, it wasn’t without challenges. The biggest one was displaying high-quality 3D models from Blender. This might be a limitation of android, but also could’ve been caused by the limitations of the sceneform library which the package uses internally, sceneform is now deprecated by Google. There is a discussion within the repository to move the project to the latest AR core API soon.

The models appeared black, we had to export them into a specific format as gLTF and gLB formats did not work the best. And another big limitation we faced was showing the objects using a remote URL, although this is supported, it did not work for the models created, even though we tried the lowest quality render. it only supported very small files.

There is more hope, I recently discovered another package that aims to unify AR integration into flutter and provide the latest API support, checkout ar_flutter_plugin.

Backend and Appwrite

Firebase was the initial choice for the backend. But I had my eyes on appwrite.io for a while and realized it was the perfect time to use and test it out.

Appwrite is an open-source backend as a service. The only dependency appwrite has is docker and you can get started pretty much with one command.

  • Benefits

The most awesome thing about appwrite is the community. The appwrite community server is filled with supportive and welcoming interactions. The team is always available to provide help if you’re ever stuck. Appwrite showcases the true spirit of open source and open source communities.

Appwrite was really fun to use, it provides more control over specific features, such as session control. You can easily control multiple sessions of the user. This helps in building more complex applications. It also integrates an SMTP server, which you can easily integrate with Mailgun to communicate with your users using custom e-mails.
Another great feature is appwrite functions, with support for more than 5+ runtimes, including Dart. I was able to deploy functions without much of a hassle. Security is also a core feature built into Appwrite, as each query and document can be given a custom security ruleset.

The biggest benefit of appwrite has to be anti-vendor locking. Because appwrite is open source and you can deploy it on your favorite cloud provider using Docker Swarm or Kubernetes, you can hold onto all of your data and easily migrate cloud providers when required.

  • Challenges

Appwrite is still in its early phases of development and isn’t without challenges.

The primary challenge I faced was while using the database. Although Apwrite provides a NoSQL interface, the database does seem more like SQL, as you need to define your keys before you upload any data, and all data must follow the schema. Another challenge was storing nested documents and collections. A document can link to a collection, but each document cannot automatically have its separate collection nested within, it’ll only refer to the collection within the root level. This will seem like a disadvantage if you are coming from firestore, but it is most likely due to the underlying MariaDB database that appwrite uses.

Appwrite is currently working on a MongoDB adapter after which, these limitations could be overcome.

The second challenge might just be the ease of collaborating and developing locally, appwrite does provide a special teams API to manage and collaborate with your team on a deployed server. But you will have to maintain consistent data and schema to ensure all of your teammates are seeing the same output.

Appwrite definitely has great potential and it is leading a revolution in the open-source backend as service products that might be more viable as companies adopt more cloud-native technologies and require more flexibility.

Conclusion

This was one of the best projects I’ve built so far, experimenting with different approaches made it a better learning process. Augmented Reality is going to be a norm in future apps and since flutter is even supported newer operating systems such as Fuschia, more Native AR support on Flutter might be a game-changer that will help to build powerful AR experiences with the speed and portability of Flutter.

Appwrite will soon be an amazing alternative to quickly prototype applications locally and will help avoid the confusion of choosing cloud services. Appwrite is growing in popularity and provides awesome community work and efforts to bring people together to contribute. The most recent event #30DaysOfAppwrite was led with awesome content and encouragement.

Overall I’m excited to see how frameworks and tools will evolve to provide a better development experience to execute our awesome ideas.

Please check out the project, try it, and give it a star 😁

Sameerkash/FoodMagic

If you have any ideas on improving the project, feel free to raise an issue or PR, it’s open-source 😊

Check out some of my previous work and drop some claps, it’s free 🥴

Don’t forget to give us your 👏 !


Building an AR app with Flutter and Appwrite was originally published in AR/VR Journey: Augmented & Virtual Reality Magazine on Medium, where people are continuing the conversation by highlighting and responding to this story.

,
Go to Source
Author: Sameer Kashyap

Back To Top
Search