What is the Model Viewer in Flutter?

• General

3D models are those model which has 3 measurements length, width, and depth. So, in this article, we will see what is the Model Viewer in Flutter. We will also see how to implement model viewer in your program.

What is the Model Viewer in Flutter?

The Model Viewer is a Flutter widget to create interactive 3D models. This widget inserts Google <model-viewer> web part into the WebView. There are few attributes of Model Viewer which are:

1. src: It is the URL or path to the 3D model. It only supports glTF/GLB models.
2. alt: It configures the model with custom text that will be used to describe the model to viewers who use a screen reader. Otherwise, it depends on additional semantic context to understand what they are viewing
3. poster: It displays an image instead of the model. It is useful for showing the user something before a model is loaded and ready to render. If you use a poster with transparency, you may also want to set –poster color to transparent so that the background shows through.
4. loading: An attribute that describes under what conditions the model should be preloaded. The supported values are “auto”, “lazy” and “eager”. Auto is equivalent to lazy. It loads the model when it is near the viewport for reveal=”auto”, and when interacted with for reveal=”interaction”. Eager loads the model immediately.
5. reveal: This attribute controls when the model should be revealed. It supports three values: “auto”, “interaction”, and “manual”.

• If reveal is set to “interaction”, <model-viewer> will wait until the user interacts with the poster before loading and revealing the model.
• If reveal is set to “auto”, the model will be revealed as soon as it is done loading and rendering.
• At last, if the reveal is set to “manual”, the model will remain hidden until dismissPoster() is called.

Implementation:

Firstly, Add the dependencies to pubspec.yaml file

model_viewer: ^1.7.2

After that add the assets to your file:

assets:
- assets/

Then Import the package:

import 'package:model_viewer_plus/model_viewer_plus.dart';

To use this widget on Android 9+ devices, your app must be permitted to make an HTTP connection to http://localhost:XXXXX. Android 9 (API level 28) changed the default for android:usesCleartextTraffic from true to false, so you will need to configure your app’s android/app/src/main/AndroidManifest.xml as follows:

<application
    android:name="io.flutter.app.FlutterApplication"
    android:label="model_viewer_example"
    android:icon="@mipmap/ic_launcher">
    android:icon="@mipmap/ic_launcher"
    android:usesCleartextTraffic="true">
    <activity
        android:name=".MainActivity"
        android:launchMode="singleTop"

To use this widget on iOS, you need to opt-in to the preview of the embedded view. This is done by adding a boolean property to your app’s ios/Runner/Info.plist file, with the key io.flutter.embedded_views_preview and the value YES:

<key>io.flutter.embedded_views_preview</key>
<true/>

How to implement code in dart file:

Create a new dart file called demo_view.dart inside the lib folder. After that, 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,
),

Moreover, we will add alt which will configure the model with custom text that will describe the model to viewers who use a screen reader. Also, 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 means it enables the auto-rotation of the model. We will add cameraControls which enable controls via mouse/touch when in flat view. Below is the complete code file which shows the implementation.

Code file:

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

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

class _DemoViewState extends State {
  @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

Thanks for being with us on a Flutter Journey!

So, in this article, we have been through what is the Model Viewer in Flutter. Feel free to comment and provide your valuable suggestion.

Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

Flutter Agency is one of the most popular online portals dedicated to Flutter Technology. Daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.