Transcript for:
Integrating AR in Flutter Apps

AR augmented reality you might think that AR is too confusing or complex to implement in our mobile apps that it is only for those who are into deep Tech or for Zuckerberg himself well today we will see how simply we can integrate AR functionality like Instagram filters or SnapChat filters into our flutter app so let's dive into the implementation let's begin by accessing developer. deep. and logging in after logging in navig to new project provide a project name and select the desired number of users per month for this demonstration let's choose 10 users proceed by clicking continue to create the project next add our Android and iOS apps by clicking on add app and entering the app ID this completes the initial project setup process you can get your app ID from the build.gradle file located in the app folder of Android directory now copy the SDK key for future use head to the downloads section and Acquire The Deep AR filter pack here you will find multiple folders having the preview images and the Deep R files we have already simplified these folders by moving the previews and deep R files in separate folders you can download these folders from the link displayed on your screen next let's incorporate the downloaded filters into our project's assets create two directories named filters and previews place the Deep AR extension file files in the filters directory and the preview images in the previews directory open the pub spec. yaml file and include the Deep AR flutter package import the filter and preview assets as required proceed to the Android manifest file and add the necessary permissions create directories named Pages models and data along with a constant doart file in the models directory create a filters. dart file containing a simple filters class with image and filter path attributes within the data directory create a filter data. Dart file housing a list of filters move to the Pages directory and open the homepage. dart file create a deep AR controller and Define and initialize controller function this function initializes the controller with necessary parameters such as Android and iOS license keys and resolution settings next Implement a build buttons function to display camera control buttons create a row containing icon buttons for camera flipping picture taking and Flash toggling each calling respective functions from the deep AR controller Implement a build camera preview function returning a sized box with the Deep AR preview wrapped in a transform. scale widget pass the Deep AR controller to the preview Define a build filters function to display a list of filters set the ontap property to call the switch effect method of the deep AR controller passing the path of the effect file associated with the selected filter in the main widget build method return a future Builder with the future set to initialize controller in the Builder check the connection state if it's done display a column containing the camera preview buttons and filters otherwise display a circular progress indicator now let's see our app in action and here you can see how we achieved this using deep AR you can find the code for this app in the description below just play around with it and have fun if you are interested in developing apps websites or backend servers using flutter hey flutter is the perfect solution with over 7 years of expertise and a track record of crafting numerous applications and websites we have got the experience you need we're here to turn your ideas into reality our team of professionals is dedicated to delivering top-notch Solutions tailored to your needs simply go to hey.com apppp provide your details and let's begin building together