Flutter – Adding 3D Objects

17 Feb, 2021
3D objects are those objects which have 3 dimensions length, width, and depth. These objects provide a great user experience when used for various purposes. And adding such type of visualization to your app will be very helpful for the user, which in turn helps your app to grow and attract a large audience as well.
So today we will be building a simple flutter based app to demonstrate how you can add 3D objects to your app project.
Step 1: Creating a new flutter application project and adding necessary dependencies
Open VS Code, press “Ctrl+Shift+P” and select “Flutter: New Application Project”
Select the folder where you want to add this flutter project to or create a new one
Then after selecting the folder, give a name to your project and hit “Enter”
Flutter will create a new project for you, then on the left bottom side click on the “pubspec.yaml” file
Add the following dependencies, which includes the flutter cube package for adding the 3D objects to your project
dependencies:
  flutter:
    sdk: flutter
  flutter_cube: ^0.0.6
Step 2: Creating the assets folder and adding the required assets.
On the left side look for the “New Folder” option, add a new folder and name it to “assets“
Right-click on the folder and click on “Reveal in File Explorer”.
Go to this link, download the folders, or you can choose your favorite 3D objects from here or from any other website which provides 3D models.
Copy these folders to the assets folder, open the “pubspec.yaml” file again, and add the following to the “flutter” section
flutter:
  uses-material-design: true
  assets:
      - assets/Astronaut/
      - assets/material/
      - assets/earth/
Step 3: Dart code for adding the 3D objects.
This is the code for the “main.dart” file in the “lib” folder
Dart
import 'package:flutter/material.dart';import 'package:flutter_3d/home_page.dart';  import 'home_page.dart';  void main() {  runApp(MyApp());}  class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      title: 'Flutter 3D',      debugShowCheckedModeBanner: false,      theme: ThemeData(        primarySwatch: Colors.blue,        visualDensity: VisualDensity.adaptivePlatformDensity,      ),      home: HomePage(),    );  }}
Step 4: Adding the Home page code to our project 
Right-click on the “lib” folder, add the new file and name it “home_page.dart“
The following is the code for the “home_page.dart” file
Dart
// Dart Program to add 3D objects to your project  // importing material.dartimport 'package:flutter/material.dart';   // importing flutter cube packageimport 'package:flutter_cube/flutter_cube.dart';  // creating class of stateful widgetclass HomePage extends StatefulWidget {  @override  _HomePageState createState() => _HomePageState();}  class _HomePageState extends State<HomePage> {      // adding necessary objects  Object earth;  Object astro;  Object material;  @override  void initState() {          // assigning name to the objects and providing the    // object's file path (obj file)     earth = Object(fileName: "assets/earth/earth_ball.obj");    astro = Object(fileName: "assets/Astronaut/Astronaut.obj");    material = Object(fileName: "assets/material/model.obj");    super.initState();  }    @override  Widget build(BuildContext context) {    return Scaffold(      extendBodyBehindAppBar: true,              // creating appbar      appBar: AppBar(        centerTitle: true,        title: Text(          "3D Objects in Flutter",          style: TextStyle(              color: Colors.greenAccent,              fontWeight: FontWeight.bold,              fontSize: 25),        ),        backgroundColor: Colors.transparent,        elevation: 0.0,      ),      body: Container(                  // providing linear gradient to the        // background with two colours        decoration: BoxDecoration(            gradient: LinearGradient(                colors: [Colors.blueAccent, Colors.greenAccent],                begin: Alignment.topLeft,                end: Alignment.bottomRight)),        child: Column(          children: [            Expanded(                              // adding the cube function to              // create the scene of our object              child: Cube(                onSceneCreated: (Scene scene) {                  scene.world.add(material);                  scene.camera.zoom = 10;                },              ),            ),                          // adding the earth object            Expanded(              child: Cube(                onSceneCreated: (Scene scene) {                  scene.world.add(earth);                  scene.camera.zoom = 10;                },              ),            ),                          // adding the astro object            Expanded(              child: Cube(                onSceneCreated: (Scene scene) {                  scene.world.add(astro);                  scene.camera.zoom = 10;                },              ),            ),          ],        ),      ),    );  }}
Step 5: Adding a new device and running the project
Add a new device to your project like any android mobile emulator, real device, or chrome(web)
After that press “Ctrl + F5” or go to “Run”>”Run Without Debugging” and see the output on your connected device
Output:
android
Flutter UI-components
Technical Scripter 2020
Dart
Flutter
Technical Scripter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
ListView Class in Flutter
Flutter - Search Bar
Flutter - Dialogs
Flutter - FutureBuilder Widget
Flutter - Flexible Widget
Flutter Tutorial
Flutter - Search Bar
Flutter - Dialogs
Flutter - FutureBuilder Widget
Flutter - Flexible Widget