3D Models in Flutter

A Flutter Package To Show A 3D Model Viewer In Your Flutter App.

3D models are those with three dimensions — length, width, and depth. When used for various purposes, these models provide an excellent user experience.

In this guide, we look into Flutter’s Model Viewer. Using the model_viewer_plus package in your flutter applications and display 3D models in the glTF and GLB formats.

model_viewer_plus | Flutter Package

Introduction

A Flutter widget for rendering interactive 3D models in the glTF and GLB formats. The widget embeds Google’s <model-viewer> web component in a WebView.

demo :

Implementation

Step 1: Add the dependencies

model_viewer_plus: ^1.5.0

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

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="flutter_model_viewer_demo"
    android:icon="@mipmap/ic_launcher"
    android:usesCleartextTraffic="true">

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

change minSdkVersion to 19.

defaultConfig {
    applicationId "com.example.test"
    minSdkVersion 19
    targetSdkVersion flutter.targetSdkVersion
    versionCode flutterVersionCode.toInteger()
    versionName flutterVersionName
}

Step 4: Add the assets

assets:
  - assets/3d/space.glb

Step 5: Import package

import 'package:model_viewer/model_viewer.dart';

How to use ModelViewer Widget

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

• src: The URL or path to the 3D model. This parameter 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.

output

Full 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(
      body: Center(
        child: ModelViewer(
          src: 'assets/3d/space.glb',
          alt: "A 3D model",
          autoPlay: true,
          autoRotate: false,
          cameraControls: true,
        ),
      ),
    );
  }
}

🥰Thanks for reading this article 💖

Clap 👏 If this article helps you.

Read my other blogs :

How to create a Notched Bottom Navigation Bar Flutter

Neubrutalism UI design pattern with Flutter

Slide To Widget Flutter Tutorial

Blur AppBar in Flutter