Flutter 3D Model With ModelViewer

Some time ago there was a package for displaying 3D models in Flutter.

Flutter 3D modeling is the process of creating realistic three-dimensional objects or surfaces, using three-dimensional modeling techniques in the Flutter framework. It involves digital representation of an object in three dimensions for a more immersive visual experience in the application.

Introduction

The package we will use to display 3D models is model_viewer_plus, this package will display 3D models with glTF and GLB formats.

Implementation :

Step 1: Add the dependencies

model_viewer_plus: ^1.5.0

Step 2: Change AndroidManifest

This step is for (Android 9+ only), add or change : android:usesCleartextTraffic=”true” to android:usesCleartextTraffic=”false”

Step 3: Change minSdkVersion (Android only)

go to app/build.gradle and change minSdkVersion to 19

applicationId "com.example.ecommerce3d"
minSdkVersion 19
targetSdkVersion flutter.targetSdkVersion
versionCode flutterVersionCode.toInteger()
versionName flutterVersionName

Step 4: Manage Assets

create assets and configuration folders in pubspec.yaml.

  assets:
    - assets/3d/space.glb

What you need to know is that 3D assets are different from other assets, you can look for the assets on the related site. For example, you can search for 3D assets on this site to learn. Assets Sample.

Step 5: Implement in UI

We will use ModelViewer class to implement the 3D Model View, so first import the package:

import 'package:model_viewer/model_viewer.dart';

and then use ModelViewer class:

ModelViewer(
                src: 'assets/3d/nike.glb',
                alt: "A 3D model",
                autoPlay: true,
                autoRotate: false,
                cameraControls: true,
              )

You can design the UI according to what you want,

Output

Thank you for reading this article ❤. I hope it will help you or we can use this as learning new things.

Design that inspired me
#Flutter #Flutter3DModel #FlutterAnimation #Flutter3Danimation