3D Models In Flutter

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 3D Models In Flutter. We will implement a 3d model demo program and show 3D models in the glTF and GLB formats using the model_viewer_plus package in your Flutter applications.

• For Model Viewer Plus

model_viewer_plus | Flutter package
A Flutter widget for rendering interactive 3D models in the glTF and GLB formatspub. dev

If you’re looking for the best Flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.

---

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 3d model in a flutter. It shows how the 3d model will work using the model_viewer_plus package in your Flutter applications. It shows 3D models in the glTF and GLB format and rotates 360° degrees by mouse, hand touch, and auto-rotate. It will be shown on your device.

Features:

There are features of the model viewer plus:

• > 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 for the URL or path to the 3D model. This parameter is required. Only glTF/GLB models are supported.
• > alt: This parameter is utilized to design the model with custom content that 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 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 control 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: ^0.8.1

Step 2: Add the assets

assets:
- assets/

Step 3: Import

import 'package:model_viewer_plus/model_viewer_plus.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="${applicationName}" 
android:icon="@mipmap/ic_launcher" 
android:label="example"
android:usesCleartextTraffic="true">

Step 6: app/build.gradle (Android only)

Change minSdkVersion to 21.

defaultConfig {    minSdkVersion 21}

Step 4:Info.plist (iOS only)

To enable the widget on iOS, add a boolean property named “io.flutter.embedded_views_preview” to your app’s ios/Runner/Info.plist file with the value “YES”.

<key>io.flutter.embedded_views_preview</key>  <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 means 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 means it enables the auto-rotation of the model. We will add cameraControls which 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_plus/model_viewer_plus.dart';

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

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

class _DemoViewState extends State<DemoView> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Flutter 3D Model Viewer Demo"),
        automaticallyImplyLeading: false,
        backgroundColor: Colors.black,
        centerTitle: true,
      ),
      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 3D Model basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to 3D Model On User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information to try up the 3D Model in your flutter projects. We will show you what the Introduction is?. Some model viewer plus features, and parameters, make a demo program for working 3D Models and show 3D models in the glTF and GLB format and rotate 360° degrees by mouse, hand touch, and auto-rotate using the  model_viewer_plus 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.

---

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.

---