How to Use 3D Models in Flutter

In this blog, we will learn how to use 3D Models in Flutter.

You may want to visit our page dedicated to our Flutter app development.

Introduction:-

Three-dimensional (3D) models have three dimensions: depth, breadth, and length. They are used in many ways to improve user experience.

A 3D model is a digital representation in three dimensions of a necessary object, which can be fictional or actual. The creation of 3D models takes place with the help of special software for digital model.

A Flutter widget for displaying interactive 3D models in glTF and GLB formats. The widget utilizes Google’s model-viewer web component within a WebView for smooth rendering.

Implementation:-

Step 1: Add the dependencies

dependencies:

  flutter:

    sdk: flutter

  model_viewer_plus: ^1.5.0

dependencies:

flutter:

sdk: flutter

model_viewer_plus: ^1.5.0

Now, run the command “flutter pub get” to add the dependencies.

To include the required package in your class, please add it using the appropriate method.

import 'package:model_viewer_plus/model_viewer_plus.dart';

1	import 'package:model_viewer_plus/model_viewer_plus.dart';

Step 1: AndroidManifiest.xml (Android 9+ only)

To use this widget on an Android device running version 9 or higher, your app must be permitted to establish an HTTP connection to http://localhost:XXXXX.

It’s worth noting that Android 9 (API level 28) has changed the default setting for android:usesCleartextTraffic from true to false.

To ensure proper functioning of your app, you must modify its AndroidManifest.xml file as shown below.

<application android:name="${applicationName}" 
android:icon="@mipmap/ic_launcher" 
android:label="example"
android:usesCleartextTraffic="true">

<application android:name="${applicationName}"

android:icon="@mipmap/ic_launcher"

android:label="example"

android:usesCleartextTraffic="true">

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

Change minSdkVersion to 21.

defaultConfig {
    minSdkVersion 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/>

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

Step 5: Add the assets

assets:
– lib/assets/Astronaut.glb

Step 6:How to use ModelViewer Widget

ModelViewer(
        backgroundColor: Color.fromARGB(0xFF, 0xEE, 0xEE, 0xEE),
        src: 'lib/assets/Astronaut.glb',
        alt: 'A 3D model of an astronaut',
        ar: true,
        autoRotate: true,
        disableZoom: true,
        autoPlay: true,
        cameraControls: true,
      ),

ModelViewer(

backgroundColor: Color.fromARGB(0xFF, 0xEE, 0xEE, 0xEE),

src: 'lib/assets/Astronaut.glb',

alt: 'A 3D model of an astronaut',

ar: true,

autoRotate: true,

disableZoom: true,

autoPlay: true,

cameraControls: true,

src: The 3D model parameter ‘URL’ or ‘path’ is required. Only glTF/GLB models are supported.
alt: Used to describe the model to viewers
autoPlay: An animation will automatically begin to play
autoRotate: Enables the auto-rotation of the model.
cameraControls: Enables controls via mouse/touch.

Completed Code:-

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

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Model Viewer')),
      body: const ModelViewer(
        backgroundColor: Color.fromARGB(0xFF, 0xEE, 0xEE, 0xEE),
        src: 'lib/assets/Astronaut.glb',
        alt: 'A 3D model of an astronaut',
        ar: true,
        autoRotate: true,
        disableZoom: true,
        autoPlay: true,
        cameraControls: true,
      ),
    );
  }
}

import 'package:flutter/material.dart';

import 'package:model_viewer_plus/model_viewer_plus.dart';

class MyHomePage extends StatefulWidget {

const MyHomePage({super.key});

@override

State<MyHomePage> createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title: const Text('Model Viewer')),

body: const ModelViewer(