Augmented reality can be implemented in flutter applications using the stunning ARcore plugin. One of the recently introduced new technologies is this one With this plugin we’ll talk about the various features that the flutter plugin offers. so let’s get started.
In this tutorial, you’ll discover how to leverage augmented reality in Flutter to enhance the app’s user experience.
Augmented reality is used in mobile applications to enhance the user experience. Customers may see items in front of them thanks to the usage of several mobile apps for product display.
An augmented reality app is a piece of software that incorporates digital visual content—occasionally audio and other kinds as well—into the user’s physical environment.
This technology is mainly focused on this two tasks :
1)detecting the position of the mobile device as it travels and creating
2)real-world understanding,according to Google’s description on ARCore.
You must take the following actions in Android Studio in order to make
Activate AR & set up
Activate AR & set up
You must take the following actions in Android Studio in order to make
ARCore functionality available:-
Step 1): Add entries to the manifest that are AR Required or AR Optional.
AR Required :
<uses-permission android:name="android.permission.CAMERA" /> <uses-feature android:name="android.hardware.camera.ar" /> <application …> <meta-data android:name="com.google.ar.core" android:value="required" /> </application>
AR Optional :
<uses-permission android:name="android.permission.CAMERA" />
<uses-sdk android:minSdkVersion="14" />
<application>
<meta-data android:name="com.google.ar.core" android:value="optional" />
</application>
Step 2): the following to build.gradle
allprojects {
repositories {
google()
}
}
dependencies {
implementation 'com.google.ar:core:1.16.0'
}
Step 3): The following dependencies should be added to your app’s build.gradle file.
android {
compileOptions {
sourceCompatibility 1.8
targetCompatibility 1.8
}
dependencies {
implementation 'com.google.ar.sceneform.ux:sceneform-ux:1.8.0'
implementation 'com.google.ar.sceneform:core:1.8.0'
}
Following the steps listed below, we will integrate augmented reality into Flutter.
Step 1): Integrating the AR Core Plugin
Add the arcore_flutter_plugin package to your pubspec.yaml file:
arcore_flutter_plugin: ^any
For my project.. I am using this plugin.
Step 2): Run the flutter packages and then package installed.
Step 3): In your Flutter application import the arcore_flutter_plugin package:
import 'package:arcore_flutter_plugin/arcore_flutter_plugin.dart';
ArCoreView
The ARview type is returned by this class, It contains two different types of views.
i) AUGMENTEDFACE
ii) STANDARDVIEW
It contains 4 properties:
i) onArCoreViewCreated
ii) enableTapRecoginzer
iii) enableUpdateListener
iv) type
i) onArViewCreated
It accepts an ARObjectManageras a parameter. ARObjectManagerwill be covered in our later section.
ii) enableTapRecoginzer
Set to false at first. It is utilized by the MethodChannel as an argument.
iii) enableUpdateListener
Set to false at first. It is utilized by the MethodChannel as an argument.
iv) type
It is a view type; one of AUGMENTEDFACE, STANDARDVIEW is available. By default, it is set to STANDARDVIEW .
ArController
Using the addArNode, addArNodeWithAncher, and removeNode functions, this controller could add an ArNode, an ArNode with an anchor, and remove a node.
new augmented reality scene
You must include an ArView widget in your app in order to create a brand-new AR scene. The main interface for interacting with the ARCore platform is this widget. Here an illustration of how to make a fresh AR scene:
ArCoreController? arCoreController;
body : ArCoreView(
onArCoreViewCreated: _onArCoreViewCreated,
),
void _onArCoreViewCreated(ArCoreController controller) {
arCoreController = controller;
}
Step 5): Insert 3D models
Using the ArCoreReferenceNode widget, you can include 3D models in your AR scene. With the help of this widget, you can position and load 3D models into your scene. To add a 3D model to your scene, follow these steps:
ArCoreReferenceNode( name: "node name", objectUrl: "object value", position: Vector3(0, 0, -1), rotation: Vector3(0, 180, 0), scale: Vector3(0.2, 0.2, 0.2), ),
Step 6): Control your AR experience.
ArCore can be used to manage an AR experience. With this controller, you can change the camera angle and add or remove nodes from the AR view, among other things. Below is an example of managing an AR experience.
void _onArCoreViewCreated(ArCoreController controller) {
arCoreController = controller;
// Move the camera to a new position
arCoreController?.moveCamera(
CameraUpdate.newPosition(
Vector3(0, 0, -2),
),
);
}
main.dart file
void main() async {
WidgetsFlutterBinding.ensureInitialized();
runApp(
MyApp(),
);
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
color: Colors.blue,
title: "Ar implementation in flutter app",
home: ArItemScreen(),
);
}
}
Create a dart file with name ar_item_screen and set this code
Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(title: const Text("AR in flutter")),
body: SafeArea(
child: Padding(
padding: const EdgeInsets.all(15),
child: Container(
height: 100,
alignment: Alignment.center,
padding: const EdgeInsets.only(left: 10, right: 10, top: 15),
decoration: const BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.only(
topRight: Radius.circular(30),
topLeft: Radius.circular(30)),
),
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ARViewScreen(
itemImg: "assets/items/img_chair.jpg",
itemName: "Eula Modern Accent Dining Chair",
),
),
);
},
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
SizedBox(
width: 80,
height: 80,
child: Image.asset(
"assets/items/img_chair.jpg",
width: 60,
),
),
Padding(
padding: const EdgeInsets.only(left: 20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"EDining Chair",
style: TextStyle(fontSize: 16, color: Colors.blue.shade900),
),
Text(
"Eula Modern Accent Dining Chair",
style:
TextStyle(fontSize: 10, color: Colors.blue.shade900),
),
],
),
),
SizedBox(
width: 60,
child: Text(
"5,000",
style: TextStyle(fontSize: 14, color: Colors.blue.shade900),
),
)
],
),
),
),
),
));
Complete Source Code – AR Core – Augmented Reality in flutter
Click here to access this example app code……
https://github.com/kevalv001/ar_application.git
You can modify this code with your needs.
Conclusion..
Flutter offers a strong framework for creating augmented reality (AR) applications that work flawlessly on both Android and iOS devices. Developers can easily create immersive and interesting augmented reality (AR) experiences thanks to the combination of ARKit, ARCore, and Flutter.
Developers can quickly iterate and test their AR applications thanks to Flutter’s widget-based approach and hot-reload function. Flutter’s support for 2D and 3D graphics, animations, and interactivity also contributes to the development of rich and interesting AR experiences.
The development process is further streamlined by the availability of plugins and packages for incorporating AR functionality into Flutter applications. Developers can quickly access the AR capabilities of the underlying platform and incorporate them into their Flutter apps by using plugins like Apple’s ARKit Plugin and Google’s ARCore Plugin.
Thanks for reading this article
Have such a wonderful day………..
