Flutter Adding 3D Objects (original) (raw)

Last Updated : 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.dart import 'package:flutter/material.dart';

// importing flutter cube package import 'package:flutter_cube/flutter_cube.dart';

// creating class of stateful widget class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState(); }

class _HomePageState extends State {

// 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: