Flutter

Embedding TutAR 3D viewer in a Flutter app

Prerequisites

• This guide expects a basic Flutter knowledge

• Get a Connect3D Vendor Account from TutAR by sending a mail at <[email protected]>.

• Generate an API key from the Connect3D dashboard

The 3D viewer can be embedded into a Flutter app using a web view, here we are using flutter_inappwebview as an example but it can be replaced with any web view library of your choice.

Getting User Permissions

In order to enable the AR functionality, Make sure to take camera permission from the user.

AndroidManifest.xml

<manifest>
<!--
rest of the code
-->
    <uses-feature android:name="android.hardware.camera" android:required="false" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.webkit.PermissionRequest" />
    <uses-permission android:name="android.permission.INTERNET" />

<manifest>

Info.plist

<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) needs access to your Camera.</string>

Embedding the Viewer

Render the webview component. mediaPlaybackRequiresUserGesture and allowsInlineMediaPlayback are the required options.

3d_viewer.dart

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

class TutARWebviewWithInAppWebviewPackageScreen extends StatefulWidget {
  const TutARWebviewWithInAppWebviewPackageScreen({super.key});

  @override
  State<TutARWebviewWithInAppWebviewPackageScreen> createState() =>
      TutARWebviewWithInAppWebviewPackageScreenState();
}

class TutARWebviewWithInAppWebviewPackageScreenState
    extends State<TutARWebviewWithInAppWebviewPackageScreen> {
  InAppWebViewController? webViewController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('Embedding with flutter_inappwebview'),
      ),
      body: InAppWebView(
              initialUrlRequest:
                  URLRequest(url: Uri.parse("https://web.tutar.app?api-key=<API-KEY>&user-id=<USER-ID>")),
              initialOptions: InAppWebViewGroupOptions(
                crossPlatform:
                    InAppWebViewOptions(mediaPlaybackRequiresUserGesture: true),
                ios: IOSInAppWebViewOptions(allowsInlineMediaPlayback: true),
              ),
              onWebViewCreated: (InAppWebViewController controller) {
                webViewController = controller;
              },
              androidOnPermissionRequest: (controller, origin, resources) async {
                return PermissionRequestResponse(
                    resources: resources,
                    action: PermissionRequestResponseAction.GRANT);
              },
            ),
      floatingActionButton: FloatingActionButton(
        mini: true,
        tooltip: 'home',
        onPressed: () {
          Navigator.pushNamed(context, "/home");
        },
        child: const Icon(Icons.home),
      ),
    );
  }
}