This article mainly focuses on ARCore and their handling in flutter apps. ARCore is Google’s platform for building augmented reality apps to be made that brings capabilities to millions of cellular devices utilizing extraordinary APIs. It permits your device to locate its surroundings, recognize the arena, and communicate with them. After the arrival of arcore 1.6 with further improvement to assist us with building a more realistic and more compelling augmented reality experience with a lot of updates. A part of the APIs is to be had throughout Android and iOS to permit shared AR reviews. We will integrate ARCore in a flutter with a demo example.

ARCore Uses:

There are three uses to combine digital substance with the present actual world as observed through your device’s camera:

• Motion trace:- permits the phone to realize and observe with its role comparative with the sector.
• Surroundings comprehension:- lets in the phone to distinguish the size and place of all forms of surfaces: horizontal, vertical, and calculated surfaces like the ground, a footstool, or walls.
• Brightness approximation:- allows the device to appraise the surroundings present lights circumstances.

Implementation:

Step 1: Add the dependencies

Add dependencies to pubspec — yaml file.

dependencies:

arcore_flutter_plugin: latest version

Step 2: Import

import 'package:arcore_flutter_plugin/arcore_flutter_plugin.dart';

Step 3: Run flutter packages get in the root directory of your app.

Minimum Version Requirement:

minSdkVersion to 24 and compileSdkVersion to 28 change in your android/app/buld.gradle file.

Step 4: Enable ARCore

Enable ARCore in the main/Androidmanifest.xml file.

An app that helps AR capabilities may be configured in two methods are:

For AR Required apps

If you want to Playstore to download ARCore whilst the application has established:-

• The Google Play Store makes AR Required apps available only on devices that assist ARCore.
• At the point when clients introduce an AR Required application, the Google Play Store consequently introduces Google Play Services for AR. Be that as it may, your app needs to, anyhow, play out extra runtime checks on the off risk that Google Play Services for AR has to be refreshed or has physically uninstalled.

<uses-sdk android:minSdkVersion="24"/>
<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>

For AR Optional apps

If you don’t want Playstore to download ARCore whilst the application has established:-

• AR Optional applications can be established and run on devices that do not support ARCore.
• At the factor, when clients introduce an AR Optional application, the Google Play Store won’t consequently introduce Google Play Services for AR with the app.

<uses-permission android:name="android.permission.CAMERA" />

<!-- "AR Optional" apps must declare minSdkVersion ≥ 14. -->
<uses-sdk android:minSdkVersion="14" />

<application …>
    <meta-data android:name="com.google.ar.core" android:value="optional" />
</application>

Step 5: Add the Sceneform library

Add this to your app’s build. Gradle file.

android {
   
    compileSdkVersion 28
...
  compileOptions {
    sourceCompatibility 1.8
    targetCompatibility 1.8
  }
  defaultConfig {
...
    minSdkVersion 24
... 
  }
}

dependencies {

implementation 'com.google.ar.sceneform.ux:sceneform-ux:1.11.0'

// Alternatively, use ArSceneView without the UX dependency.
implementation 'com.google.ar.sceneform:core:1.11.0'
implementation 'com.google.ar:core:1.11.0'
}

Step 6:Enable AndriodX

Add this to your gradle.properties file:

org.gradle.jvmargs=-Xmx1536M
android.useAndroidX=true
android.enableJetifier=true

Supported devices:

A record of the unique phone that is currently supported is indexed proper right there:

• Android (Google Play)
• Android (China)
• iOS

Code Implementation:

In the body part, you will add ArCoreView().

body: ArCoreView(
  onArCoreViewCreated: _onArCoreViewCreated,),

Create Controller and use in this_onArCoreViewCreated() method.

ArCoreController arCoreController;

Create _onArCoreViewCreated() method and add all shape in this methods.

_onArCoreViewCreated(ArCoreController _arCoreController){
  arCoreController = _arCoreController;
  _addSphere(arCoreController);
  _addCube(arCoreController);
  _addCylinder(arCoreController);
}

In all shape methods, you will add arcore shape and arcore node with position and materials, and you will view on arcore.dartfile.

import 'package:flutter/material.dart';
import 'package:arcore_flutter_plugin/arcore_flutter_plugin.dart';
import 'package:vector_math/vector_math_64.dart' as vector;

class ARCore extends StatefulWidget {
  ARCore({Key key, this.title}) : super(key: key);

final String title;

@override
  _ARCoreState createState() => _ARCoreState();
}

class _ARCoreState extends State<ARCore> {
  ArCoreController arCoreController;

_onArCoreViewCreated(ArCoreController _arCoreController){
    arCoreController = _arCoreController;
    _addSphere(arCoreController);
    _addCube(arCoreController);
    _addCylinder(arCoreController);
  }

_addSphere(ArCoreController _arCoreController) {
    final material = ArCoreMaterial(color: Colors.deepPurple, );
    final sphere = ArCoreSphere(materials: [material], radius: 0.2,);
    final node = ArCoreNode(
      shape: sphere,
      position: vector.Vector3(
          0, -0.3, -1
      ),
    );

_arCoreController.addArCoreNode(node);
  }

_addCylinder(ArCoreController _arCoreController) {
    final material = ArCoreMaterial(color: Colors.green, reflectance: 1);
    final cylinder =
    ArCoreCylinder(materials: [material], radius: 0.3,
      height: 0.1,);
    final node = ArCoreNode(
      shape: cylinder,
      position: vector.Vector3(
          -0.3, -1, -1.0
      ),
    );

_arCoreController.addArCoreNode(node);
  }

_addCube(ArCoreController _arCoreController) {
    final material = ArCoreMaterial(color: Colors.pink, metallic: 1);
    final cube = ArCoreCube(materials: [material], size: vector.Vector3(0.5, 0.5, 0.5));
    final node = ArCoreNode(
      shape: cube,
      position: vector.Vector3(
          0.5, -3, -3
      ),
    );

_arCoreController.addArCoreNode(node);
  }

@override
  void dispose() {
    arCoreController.dispose();
    super.dispose();
  }

@override
  Widget build(BuildContext context) {

return Scaffold(
      appBar: AppBar(

title: Text(widget.title),
      ),
      body: ArCoreView(
        onArCoreViewCreated: _onArCoreViewCreated,

),
    );
  }
}

You will see a full code on a GitHub, and this is a small demo example to integrate with ARCore, and this below video shows how ARCore will work and 3d Object shown.

Conclusion:

I hope this blog will provide you with sufficient information in Trying up ARCore in your flutter projects. Well, there are various options out there for ARCore, and its a fascinating topic for developers.

Thanks for reading this article ❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

Click the GitHub link below to find the source code of the Flutter ARCore Demo.

flutter-devs/flutter_arcore_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

ember 4, 2023.

Flutter has been Quintessential choice among the Developers Fraternity as a reason of the Language’s Ability to Develop Wonderful User Interfaces designs at the Desired frame per second. In this Blog, we’ll try to give you a quick Overview of Flutter and Instruct you to build your flutter app with Custom Paint Design which basically enhance the User Interface of the Application.

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

For Getting Accustomed with the Flutter basics , You can always go through the video made by google about its Magnificent Framework:

What is the Dire Need to use Custom Paint in Flutter:

Custom Paint basically ensure the UI designing of those components that cannot be derived from the regular shapes provided by Flutter . This widget shows the customizability of flutter from its peers .Custom Painter is :

A widget that provides a canvas on which to draw during the paint phase.

:To paint in Flutter you can use the CustomPaint widget which basically takes size of its parent if not given the child .

• The CustomPainter subclass overrides two methods: paint() and shouldRepaint().

How to Install Flutter :

Installing Flutter SDK into your device is easily done through with the help of going through the official flutter doc and following the steps provided for your respective windows , Linux, macOS at flutter.dev.

Create a new flutter app

1. Firstly, Create a new project and then clear all the code in the main.dart file. Type below command in your terminal:-

flutter create yourProjectName

Code Implementation:

First, create a class that will be landing page of the module a.k.a CustomPaintExample class.

So, let me walk you through the code to give better understanding of whats happening here. As you can see the UI we’re going to achieve so accordingly, I created a class CustomPaintExample which contains the code for the UI. There are two main elements, the shape and the button animation. The button when pressed increases the value of percentValue by 10 and accordingly the progress on the button border can be seen increasing. The widget is also broken down into two elements CustomPainterExample.buildShape() and CustomPainterExample.buildButtonAnimation() which I created in different class CustomPainterExampleWidgets.

In the Class CustomPainterExampleWidgets, The element CustomPainterExample.buildShape() returns a ClipPath which consists of clipper CustomShapeClass and the other element CustomPainterExample.buildButtonAnimation() consist of a Container with Custom Paint as its child displayed at the Centre of screen .The CustomPaint first asks its painter to paint on the current canvas, then it paints its child, and then, after painting its child, it asks its foregroundPainter to paint. The Percentage increase is shown by the onPressed method at the Raised Button.Let’s understand what foregroundPainter implies. This also illustrate that on choosing painter instead of the foregroundPainter will do the exact opposite.

import 'package:flutter/material.dart';

class CustomShapeClass extends CustomClipper<Path> {
  @override
  getClip(Size size) {
    // TODO: implement getClip
    var path = new Path();
    path.lineTo(0, size.height / 4.25);
    var firstControlPoint = new Offset(size.width / 4, size.height / 3);
    var firstEndPoint = new Offset(size.width / 2, size.height / 3 - 60);
    var secondControlPoint =
    new Offset(size.width - (size.width / 4), size.height / 4 - 65);
    var secondEndPoint = new Offset(size.width, size.height / 3 - 40);

    path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
        firstEndPoint.dx, firstEndPoint.dy);
    path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
        secondEndPoint.dx, secondEndPoint.dy);

    path.lineTo(size.width, size.height / 3);
    path.lineTo(size.width, 0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper oldClipper)
  {
    return true;
  }
}

The CustomShapeClass extending CustomClipper is illustrated above .In this control points and end points are defined in which the quadratic bezier curve is drawn .Now let’s declare the core of the App, ButtonPainter class.

import 'dart:math';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ButtonPainter extends CustomPainter
{
  Color buttonBorderColor;
  Color progressColor;
  double percentage;
  double width;
  ButtonPainter({this.buttonBorderColor,this.progressColor,this.percentage,this.width});
  @override
  void paint(Canvas canvas, Size size) {
    Paint line = Paint()
      ..color = buttonBorderColor
      ..strokeCap = StrokeCap.round
      ..style = PaintingStyle.stroke
      ..strokeWidth = width;
    Paint complete =  Paint()
      ..color = progressColor
      ..strokeCap = StrokeCap.round
      ..style = PaintingStyle.stroke
      ..strokeWidth = width;
    Offset center  = Offset(size.width/2, size.height/2);
    double radius  = min(size.width/2,size.height/2);
    canvas.drawCircle(
        center,
        radius,
        line
    );
    double arcAngle = 2*pi* (percentage/100);
    canvas.drawArc(
        Rect.fromCircle(center: center,radius: radius),
        -pi/2,
        arcAngle,
        false,
        complete
    );
  }
  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

Here we get the different properties lineColor, which means the color for the track, on which the progress would be drawn, completeColor for the progress finished,completePercent for the level of the progress finished. From its parent widget, we send down this property, here we simply draw.

ButtonPainter extends the class CustomPainter and we need to override its paint method to draw the graphics. To draw, from the start, we need to announce something called Paint, it typifies all the properties that are expected to draw something on the screen. So we have two Paint objects; the first one is a line that speaks to the track line on which the progress would be drawn. We give it a color, that is provided as a property, the strokeCap is round, and we tell the style to be PaintingStyle.stroke as, we don’t need a filled circle we simply need a stroke, at that point set the width to the provided one. So additionally, we announce the complete Paint object for the progress finished.

Thus, from the start, we have to draw a full circle and afterward an arc on it, that is finished.

Offset center  = Offset(size.width/2, size.height/2);
double radius  = min(size.width/2,size.height/2);

In these two lines, we calculate the directions for the center of the circle and the radius, its basic, the center is width, and the height of the container divided by 2. We need the center of the circles exactly in the middle. size Is what we get as a parameter in the paint function, which is the size of the container. radius It is the minimum of the half of the width and the height, and now we are taking a minimum of both as the container might not be a square always.

canvas.drawCircle(center,radius,line);

Now we just draw with the drawCircle function called on the provided canvas object, where we go in the center, the radius, and the Paint object.

canvas.drawArc(Rect.fromCircle(center: center,radius: radius),
    -pi/2,arcAngle,false,complete);

Now, we figure the angle for the completed arc, which it appeared. I am not going into the geometric calculation. To call drawArc, we need to specify a Rect, which is the bounding box of the arc, we get the Rect encompassing the circle parameters we drew earlier. At that point, we give a beginning angle, which is -pi/2 radians, remember its not 0. The top is -pi/2, 0 is the right-most purpose of the circle. We supply the arcAngle at that point, which is how much the arc should extend as well. We pass in false after that to tell that we don’t want the finish of the arc to be connected back to the center and at last we send in the Paintobject, complete. That’s all we expected to draw using CustomPaint.

Now, let add the animations.

percentageAnimationController = new AnimationController(vsync: this,
    duration: new Duration(milliseconds: 1000))
  ..addListener((){setState(() {
      percentage=lerpDouble(percentage,newPercentage,
      percentageAnimationController.value);});});

We add the animation on HomePagescreen in initState() method. Then, we have added a listener on the AnimationController which is called at each step of the animation, and we change the percentage. To change the percentage, we get an inserted value with the help of lerpDoublefunction, the value is within percentage and newPercentage which is ten more than the original value, we interpolate it based on the AnimationController’svalue.

We add this line in the onPressed of the button to kick off the animation.

percentageAnimationController.forward(from: 0.0);

You will see a full code on a GitHub, and this is a small circular progress example to integrate with custom paint, and this below video shows how Custom Paint will work.

Hope this blog will provide you with sufficient information in Trying up Custom Paint in your flutter projects .Thanks for reading this article ❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

Click the GitHub link below to find the source code of the Custom Paint Demo.

flutter-devs/Custum_Paint_Demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.