Integration of Augmented Reality (AR) in Flutter Applications

Introduction

• AR might seem complex, but it can be easily integrated into mobile applications, like Instagram or SnapChat filters, in Flutter.
• We will see how to integrate AR into a Flutter application.

Initial Project Setup

1. Access developer.deep.ar and log in.
2. Create a new project:
   • Provide a name for the project.
   • Select the desired number of users per month (e.g., 10 users).
   • Click continue to create the project.
3. Add Android and iOS applications:
   • Click on add application and enter the application ID.
   • Obtain the application ID from the build.gradle file in the Android directory.
4. Copy the SDK key for future use.
5. Download the Deep AR filter package from the download section.
   • You will find multiple folders with preview images and Deep AR files.

Incorporation of Downloaded Filters

1. Create directories named filters and previews:
   • Place the Deep AR extension files in the filters directory.
   • Place the preview images in the previews directory.
2. Open the pubspec.yaml file and include the Deep AR Flutter package.
3. Import the filter and preview resources as needed.
4. Modify the Android manifest file to add the necessary permissions.

Project Structure

1. Create directories: Pages, models, data, and a constant.dart file.
2. In the models directory:
   • Create a filters.dart file with a simple Filters class with image and filter path attributes.
3. In the data directory:
   • Create a filter_data.dart file with a list of filters.
4. In the Pages directory:
   • Open the homepage.dart file.

Implementation

1. Create a Deep AR controller.
2. Define and initialize the controller function:
   • Initialize the controller with necessary parameters (Android and iOS license keys and resolution settings).
3. Implement the buildButtons function to display camera control buttons:
   • Create a row with IconButtons to flip the camera, take photos, and toggle flash.
4. Implement the buildCameraPreview function that returns a SizedBox with the Deep AR preview wrapped in a Transform.scale widget.
5. Pass the Deep AR controller to the preview.
6. Define the buildFilters function to display a list of filters:
   • Set the onTap property to call the switchEffect method of the Deep AR controller, passing the effect file path of the selected filter.
7. In the main widget's build method:
   • Return a FutureBuilder with the future set to initialize the controller.
   • In the builder, check the connection state:
     • If ready, show a column with the camera preview, buttons, and filters.
     • Otherwise, show a circular progress indicator.

Conclusion

• On running the app, you can see how the integration was achieved using Deep AR.
• Code available in the description for experimenting and having fun.
• Hey.com app to start custom projects with experts in Flutter.