3D Model Viewer in Flutter

Published December 07, 2020

In this example we will create how to show interactive 3d Models in Flutter application. 

To view 3D models in flutter application we are using model_viewer library.

 

This is 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.

 

Let's get started

Step 1: Create a Flutter application

Step 2: Add required dependencies in pubspec.yaml file

dependencies:
  model_viewer: ^0.8.1

 

Step 3: Create dart file and import model_viewer package

import 'package:model_viewer/model_viewer.dart';

 

ModelViewer constructor

ModelViewer(
    {Key key,
    this.backgroundColor = Colors.white,
    @required this.src,
    this.alt,
    this.ar,
    this.arModes,
    this.arScale,
    this.autoRotate,
    this.autoRotateDelay,
    this.autoPlay,
    this.cameraControls,
    this.iosSrc})
    : super(key: key);

 

Step 4: Update dart file code 

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

class DViewer extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Model Viewer")),
        body: ModelViewer(
          src: 'https://modelviewer.dev/shared-assets/models/Astronaut.glb',
          alt: "A 3D model of an astronaut",
          ar: true,
          autoRotate: true,
          cameraControls: true,
        ),
      ),
    );
  }

}

 

Step 5: Run application

 

3D Model Viewer in Flutter

 

Tags: 3d Model Viewer, SceneViewer