Flutterexperts

3D models are those model which has 3 measurements length, width, and depth. These models give an incredible user experience when utilized for different purposes. What’s more, adding such a sort of perception to your application will be extremely useful for the user, helping your application develop and attract an enormous crowd.

In this article, we will Explore Model Viewer In Flutter. We will implement a model viewer demo program and show 3D models in the glTF and GLB formats using the model_viewer package in your flutter applications.

model_viewer | Flutter Package
This is a Flutter widget for rendering interactive 3D models in the glTF and GLB formats. The widget embeds Google’s…pub. dev

Table Of Contents ::

Introduction

Features

Parameters

Implementation

Code Implement

Code File

Conclusion

---

---

Introduction:

A Flutter widget for delivering interactive 3D models in the glTF and GLB designs. The widget inserts Google’s <model-viewer> web part in a WebView. The 3D model shows a 3D picture, and the user ought to turn toward any path for the watcher.

Demo Module :

This demo video shows how to create a model viewer in a flutter. It shows how the model viewer will work using the model_viewer package in your flutter applications. It shows 3D models in the glTF and GLB format and rotates 360° degree by mouse, hand touch, and auto-rotate. It will be shown on your device.

Features:

There are features of the model viewer:

• > It renders glTF and GLB models. (Also, USDZ models on iOS 12+.)
• > It Supports animated models with a configurable auto-play setting.
• > It optionally supports launching the model into an AR viewer.
• > It optionally auto-rotates the model with a configurable delay.
• > It supports a configurable background color for the widget.

Parameters:

There are some parameters of the model viewer are:

• > src: This parameter is used to the URL or path to the 3D model. This parameter is required. Only glTF/GLB models are supported.
• > alt: This parameter is utilized to designs the model with custom content that utilized will portray the model to watchers who utilize a screen reader or, in any case, rely upon an extra semantic setting to comprehend what they are seeing.
• > autoRotateDelay: This parameter is utilized to sets the deferral before auto-revolution starts. The configuration of the worth is a number in milliseconds. The default is 3000.
• > iosSrc: This parameter is used to the URL to a USDZ model, which will be used on supported iOS 12+ devices via AR Quick Look.
• > arScale: This parameter is utilized to controls the scaling conduct in AR mode in Scene Viewer. Set to “fixed” to incapacitate the model’s scaling, which sets it to be at 100% scale consistently. Defaults to “auto,” which permits the model to be resized.

Implementation:

Step 1: Add the dependencies

Add dependencies to pubspec — yaml file.

model_viewer: 

Step 2: Add the assets

assets:
  - assets/

Step 3: Import

import 'package:model_viewer/model_viewer.dart';

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

Step 5: AndroidManifest.xml (Android 9+ only)

android/app/src/main/AndroidManifest.xml

To utilize this widget on Android 9+ devices, your application should be allowed to make an HTTP association with http://localhost:XXXXX. Android 9 (API level 28) changed the default forandroid:usesCleartextTrafficfrom true to false.

<application
    android:name="io.flutter.app.FlutterApplication"
    android:label="flutter_model_viewer_demo"
    android:icon="@mipmap/ic_launcher"
    android:usesCleartextTraffic="true">

How to implement code in dart file :

You need to implement it in your code respectively:

Create a new dart file called demo_view.dart inside the lib folder.

In the body, we will add ModelViewer(). Inside, we will add a backgroundColor for the model viewer; src means the user adds URL and assets only glTF/GLB models are supported.

ModelViewer(
  backgroundColor: Colors.teal[50],
  src: 'assets/table_soccer.glb',
  alt: "A 3D model of an table soccer",
  autoPlay: true,
  autoRotate: true,
  cameraControls: true,
),

We will add alt mean configures the model with custom text that will describe the model to viewers who use a screen reader; autoplay means if this is true and a model has animations, an animation will automatically begin to play when this attribute is set. The default is false. We will add autoRotate mean it enables the auto-rotation of the model. We will add cameraControls mean it enables controls via mouse/touch when in flat view. When we run the application, we ought to get the screen’s output like the underneath screen capture.

Code File:

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

class DemoView extends StatefulWidget {
  @override
  _DemoViewState createState() => _DemoViewState();
}

class _DemoViewState extends State<DemoView> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Model Viewer Demo"),
        automaticallyImplyLeading: false,
        backgroundColor: Colors.black,
      ),
      body: ModelViewer(
        backgroundColor: Colors.teal[50],
        src: 'assets/table_soccer.glb',
        alt: "A 3D model of an table soccer",
        autoPlay: true,
        autoRotate: true,
        cameraControls: true,
      ),
    );
  }
}

Conclusion:

In the article, I have explained the Model Viewer basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Model Viewer On User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information in Trying up the Model Viewer in your flutter projects. We will show you what the Introduction is?. Some model viewer features, parameters, make a demo program for working Model Viewer and show 3D models in the glTF and GLB format and rotate 360° degree by mouse, hand touch, and auto-rotate using the model_viewer package in your flutter applications. So please try it.

❤ ❤ 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.

find the source code of the Flutter Model Viewer Demo:

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

---

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.

---