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
|
1 2 3 4 5 6 7 |
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.
|
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.
|
1 2 3 4 |
<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.
|
1 2 3 |
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”.
|
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
|
1 2 3 4 5 6 7 8 9 10 |
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:-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
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, ), ); } } |
Output:-
How to Use 3D Models in Flutter
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 3D digital models. The concept of 3D models remains the same no matter the application.
Conclusion:-
That’s it! You’ve successfully used 3d model in your Flutter app.
You can also check other blogs from here.
Thanks for reading this blog ❤️
Hope this blog helped you to better understand how to use 3D model In Flutter.