Before After Flutter, AR Kit Flutter Plugin And Flutter AR Core Plugin

1. Before After Flutter Package

A flutter package which makes it easier to display the differences between two images.

Installation

In the dependencies: section of your pubspec.yaml, add the following line:

dependencies:
  before_after: <latest version>

Usage

Import this class 

import 'package:before_after/before_after.dart';

before after 

   BeforeAfter(
     beforeImage: Image.asset('assets/after.jpg'),
     afterImage: Image.asset('assets/before.jpg'),
   ),

2. arkit_flutter_plugin

AR kit is a flutter plugin that is created using dart and flutter. It provides augmented reality support for flutter applications.

It is an awesome flutter package.

Note: ARKit is only supported by mobile devices with A9 or later processors (iPhone 6s/7/SE/8/X, iPad 2017/Pro) on iOS 11 and newer. For some features iOS 12 is required.

Usage
Depend on it

Update Info.plist

The plugin uses a native view from ARKit, which is not yet supported by default. To make it work add the following code to Info.plist:

    <key>io.flutter.embedded_views_preview</key>
    <string>YES</string>

Write the app

The simplest code example:

import 'package:flutter/material.dart';
import 'package:arkit_plugin/arkit_plugin.dart';
import 'package:vector_math/vector_math_64.dart';

void main() => runApp(MaterialApp(home: MyApp()));

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  ARKitController arkitController;

  @override
  void dispose() {
    arkitController?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => Scaffold(
      appBar: AppBar(title: const Text('ARKit in Flutter')),
      body: ARKitSceneView(onARKitViewCreated: onARKitViewCreated));

  void onARKitViewCreated(ARKitController arkitController) {
    this.arkitController = arkitController;
    final node = ARKitNode(
        geometry: ARKitSphere(radius: 0.1), position: Vector3(0, 0, -0.5));
    this.arkitController.add(node);
  }
}

UX advice

You might want to check the device capabilities before establishing an AR session. Review the Check Support sample for the implementation details.
Before you go to AppStore

The plugin supports TrueDepth API. In case you didn't use it, your app will be rejected by Apple. Hence you need to remove any TrueDepth functionality by modifying your Podfile file

post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      ... # Here are some configurations automatically generated by flutter

      config.build_settings['OTHER_SWIFT_FLAGS'] = '-DDISABLE_TRUEDEPTH_API'
    end
  end
end

AR with Flutter - The Sword of Damocles

Example On GitHub

Video Tutorials And Example Source Code

3. arcore_flutter_plugin

After seeing a new augmented reality plugin based on Apple’s ArKit, I decided to create a plugin based on Google’s ARCore.

This flowchart illustrates the logic in the preceding code sample:



This flowchart illustrates the logic in the preceding code sample:




For an Official Guide about AR Core Click the Below Icon.

Thanks to Oleksandr Leuschenko for inspiration and his precious code: arkit_flutter_plugin

Usage
I wrote 2 articles to setup your project and start with ARCore Flutter Plugin:

ARCore Flutter Plugin: configurations.

ARCore Flutter Plugin: add object on the plane.
Configure your app

To use this plugin, add arcore_flutter_plugin as a dependency in your pubspec.yaml file.

Add the Sceneform library to your app's build.gradle file:

android {
    // Sceneform libraries use language constructs from Java 8.
    // Add these compile options if targeting minSdkVersion < 26.
    compileOptions {
        sourceCompatibility 1.8
        targetCompatibility 1.8
    }
}

dependencies {
    …

    // Provides ArFragment, and other UX resources.
    implementation 'com.google.ar.sceneform.ux:sceneform-ux:1.8.0'

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

3. Import the Sceneform plugin into your project (OPTIONAL)

Example:

The simplest code example:

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

class HelloWorld extends StatefulWidget {
  @override
  _HelloWorldState createState() => _HelloWorldState();
}

class _HelloWorldState extends State<HelloWorld> {
  ArCoreController arCoreController;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Hello World'),
        ),
        body: ArCoreView(
          onArCoreViewCreated: _onArCoreViewCreated,
        ),
      ),
    );
  }

  void _onArCoreViewCreated(ArCoreController controller) {
    arCoreController = controller;

    _addSphere(arCoreController);
    _addCylindre(arCoreController);
    _addCube(arCoreController);
  }

  void _addSphere(ArCoreController controller) {
    final material = ArCoreMaterial(
        color: Color.fromARGB(120, 66, 134, 244), texture: "earth.jpg");
    final sphere = ArCoreSphere(
      materials: [material],
      radius: 0.1,
    );
    final node = ArCoreNode(
      shape: sphere,
      position: vector.Vector3(0, 0, -1.5),
    );
    controller.add(node);
  }

  void _addCylindre(ArCoreController controller) {
    final material = ArCoreMaterial(
      color: Colors.red,
      reflectance: 1.0,
    );
    final cylindre = ArCoreCylinder(
      materials: [material],
      radius: 0.5,
      height: 0.3,
    );
    final node = ArCoreNode(
      shape: cylindre,
      position: vector.Vector3(0.0, -0.5, -2.0),
    );
    controller.add(node);
  }

  void _addCube(ArCoreController controller) {
    final material = ArCoreMaterial(
      color: Color.fromARGB(120, 66, 134, 244),
      metallic: 1.0,
    );
    final cube = ArCoreCube(
      materials: [material],
      size: vector.Vector3(0.5, 0.5, 0.5),
    );
    final node = ArCoreNode(
      shape: cube,
      position: vector.Vector3(-0.5, 0.5, -3.5),
    );
    controller.add(node);
  }

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

3. See the example directory for a complete sample app.

Flutter AR Core

Full Guided Video Tutorials