Flutter – Adding 3D Objects

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