How to Use 3D Models in Flutter?

Last Updated : 10 May, 2025

Flutter has recently developed into the realm of 3D graphics, expanding its capabilities beyond just 2D applications. In this article, we will explore the exciting process of creating 3D objects in Flutter using the flutter_cube library.

Steps to Implement 3D Models in Flutter

Step 1: Create a new Flutter Application

Create a new Flutter application using the command Prompt. To create a new app, write the following command and run it.

flutter create app_name

To know more about it refer this article: Creating a Simple Application in Flutter

Step 2: Adding the Dependency

To add the dependency to the pubspec.yaml file, add flutter_cube as a dependency in the dependencies part of the pubspec.yaml file, as shown below:

Dart

dependencies:
     flutter:
       sdk: flutter
     flutter_cube: ^0.1.1

Now, run the command below in the terminal.

flutter pub get

Run the below command in the terminal.

flutter pub add flutter_cube

Step 3: Import dependencies

To use libraries, import all of them in the main.dart file,

Dart

import 'package:flutter_cube/flutter_cube.dart';

Step 4: Import assets

Create a folder named "assets" in the "lib/" path and download the below-provided folders, and put them in the assets folder.

jet
shark

After that, give their paths in pubspec.yaml.

flutter:
      uses-material-design: true
      assets:
             - assets/jet/
             - assets/shark/

Step 5: Working with main.dart

Add the boilerplate code below in main.dart to create a basic structure with an AppBar and body using a Scaffold.

Dart

import 'package:flutter/material.dart';
import 'package:flutter_cube/flutter_cube.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,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        foregroundColor: Colors.white,
        title: Text("Flutter 3D"),
      ),
      body: Container(
       // Code Here
      ),
    );
  }
}

Step 6: Initialize variables

Initialize the required variables in the _HomePageState class.

Dart

// Declare a variable to hold the 3D model of the jet
late Object jet;

// Declare a variable to hold the 3D model of the shark
late Object shark;
  
@override
void initState() {
    
    // Load the 3D model of the jet
    jet = Object(fileName: "assets/jet/Jet.obj");
    
    // Load the 3D model of the shark
    shark = Object(fileName: "assets/shark/shark.obj");
    
    // Rotate the shark model
    shark.rotation.setValues(0, 90, 0);
    
    // Update the transformation of the shark model
    shark.updateTransform();
    super.initState();
}

Step 7: Create 3D Objects

Let's delve into the code of creating 3D objects using flutter_cube.

Shark

 Expanded(
  child: Cube(
    onSceneCreated: (Scene scene) {
      
      // Add the shark model to the scene
      scene.world.add(shark);
      
      // Set the camera zoom level
      scene.camera.zoom = 10;
    },
  ),
),

Jet

Expanded(
  child: Cube(
    onSceneCreated: (Scene scene) {
      // Add the jet model to the scene
      scene.world.add(jet);
      // Set the camera zoom level
      scene.camera.zoom = 10;
    },
  ),
),

Step 8: Develop UI

- Column: Wrap both shark and jet in a column.

Dart

Column(
  children: [
    Expanded(
      child: Cube(
        onSceneCreated: (Scene scene) {
          
          // Add the shark model to the scene
          scene.world.add(shark);
          
          // Set the camera zoom level
          scene.camera.zoom = 10;
        },
      ),
    ),
    Expanded(
      child: Cube(
        onSceneCreated: (Scene scene) {
          
          // Add the jet model to the scene
          scene.world.add(jet);
          
          // Set the camera zoom level
          scene.camera.zoom = 10;
        },
      ),
    ),
  ],
),

Complete Source Code

main.dart:

Dart

import 'package:flutter/material.dart';
import 'package:flutter_cube/flutter_cube.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,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  
  // Declare a variable to hold the 3D model of the jet
  late Object jet;
  
  // Declare a variable to hold the 3D model of the shark
  late Object shark;

  @override
  void initState() {
    
    // Load the 3D model of the jet
    jet = Object(fileName: "assets/jet/Jet.obj");
    
    // Load the 3D model of the shark
    shark = Object(fileName: "assets/shark/shark.obj");
    
    // Rotate the shark model
    shark.rotation.setValues(0, 90, 0);
    
    // Update the transformation of the shark model
    shark.updateTransform();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        
        // Set the background color of the app bar
        backgroundColor: Colors.green,
        
        // Set the foreground color of the app bar
        foregroundColor: Colors.white,
        
        // Set the title of the app bar
        title: Text("Flutter 3D"),
      ),
      body: Container(
        child: Column(
          children: [
            Expanded(
              child: Cube(
                onSceneCreated: (Scene scene) {
                  
                  // Add the shark model to the scene
                  scene.world.add(shark);
                  
                  // Set the camera zoom level
                  scene.camera.zoom = 10;
                },
              ),
            ),
            Expanded(
              child: Cube(
                onSceneCreated: (Scene scene) {
                  
                  // Add the jet model to the scene
                  scene.world.add(jet);
                  
                  // Set the camera zoom level
                  scene.camera.zoom = 10;
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Click Here to access the whole application code.

Output :

Conclusion

With Flutter's ongoing advancements, app development is reaching new creative heights. It is opening doors to incredibly immersive experiences for users everywhere. So, jump into the exciting world of 3D and let your imagination run wild.

Flutter - How to Use SVG Image

rn540

Improve

Article Tags :

How to Use 3D Models in Flutter?

Steps to Implement 3D Models in Flutter

Step 1: Create a new Flutter Application

Step 2: Adding the Dependency

Step 3: Import dependencies

Step 4: Import assets

Step 5: Working with main.dart

Step 6: Initialize variables

Step 7: Create 3D Objects

Step 8: Develop UI

Complete Source Code

Conclusion

Similar Reads

Thank You!

What kind of Experience do you want to share?