3D in Flutter: Using flutter_3d_controller and Integrating with Unity

Flutter is renowned for its powerful 2D UI capabilities, but integrating 3D elements enhances app possibilities for product visualization, interactive animations, or even 3D game overlays. This article explores using flutter_3d_controller and Unity integration to incorporate 3D content into Flutter projects.

In this article, we'll dive into two powerful approaches to bring 3D content into Flutter apps:

• Using the flutter_3d_controller package (great for embedding and controlling 3D models like .obj)
• Integrating Unity into Flutter (ideal for advanced 3D scenes, real-time interactions, or AR/VR apps)

Option 1: Using flutter_3d_controller Overview

The flutter_3d_controller package is a lightweight tool that allows you to render and manipulate simple 3D models (like .obj files) directly inside Flutter. It's good for basic 3D visualization and supports rotation, zoom, and panning gestures.

📦 Step 1: Add Dependency

Add the package to your pubspec.yaml:

dependencies:

flutter:

sdk: flutter

flutter_3d_obj: ^1.0.1

Note: The most active and commonly used package for  .obj rendering is flutter_3d_obj.

📁 Step 2: Add a 3D Model

Place your .obj and .mtl files (plus associated textures) in your Flutter project's assets/ directory. Declare the files in pubspec.yaml:

flutter:

assets:

- assets/3d/model.obj

- assets/3d/model.mtl

- assets/3d/texture.png

🧑‍💻 Step 3: Displaying the 3D Model

Here’s a complete example using flutter_3d_obj:

import 'package:flutter/material.dart';

import 'package:flutter_3d_obj/flutter_3d_obj.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(home: ModelViewer());

}

}

class ModelViewer extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title: Text('3D Model Viewer')),

body: Center(

child: Obj3D(

size: const Size(300, 300),

path: 'assets/3d/',

asset: 'model.obj',

zoom: 1,

rotateX: true,

rotateY: true,

rotateZ: false,

),

),

);

}

}

🎮 What You Get

• Rotate on X and Y axes
• Simple zoom and scaling
• Lightweight and mobile-friendly

Option 2: Integrating Unity with Flutter

If you need real-time rendering, AR/VR support, or advanced physics, Unity is the way to go. You can integrate Unity into Flutter using a Unity-Flutter bridge.

📦 Step 1: Use flutter_unity_widget

The most popular solution is flutter_unity_widget.

Add this to your pubspec.yaml:

dependencies:

flutter:

sdk: flutter

flutter_unity_widget: ^2022.1.0

🧰 Step 2: Unity Setup

Create a new Unity project. Add the Flutter Unity Integration plugin from the GitHub repo . Build your Unity project for Android or iOS using the FlutterUnityIntegration export target.

🔗 Step 3: Setup Flutter Side

import 'package:flutter/material.dart';

import 'package:flutter_unity_widget/flutter_unity_widget.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(home: UnityViewScreen());

}

}

class UnityViewScreen extends StatefulWidget {

@override

_UnityViewScreenState createState() => _UnityViewScreenState();

}

class _UnityViewScreenState extends State {

late UnityWidgetController _unityWidgetController;

void onUnityCreated(UnityWidgetController controller) {

_unityWidgetController = controller;

}

void sendMessageToUnity() {

_unityWidgetController.postMessage(

'GameManager', // Unity GameObject

'SetText', // Method on that GameObject

'Hello from Flutter!',

);

}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title: Text('Unity in Flutter')),

body: UnityWidget(

onUnityCreated: onUnityCreated,

fullscreen: false,

),

floatingActionButton: FloatingActionButton(

child: Icon(Icons.send),

onPressed: sendMessageToUnity,

),

);

}

}

🔄 Unity Side

In Unity, add this script to a GameObject:

using UnityEngine;

public class GameManager : MonoBehaviour

{

public void SetText(string message)

{

Debug.Log("Message from Flutter: " + message);

// You can update UI or objects here

}

}

🆚 flutter_3d_controller vs Unity Integration

🎯 When to Use What?

Use flutter_3d_controller or flutter_3d_obj if:

• You only need simple model rendering (e.g., for a product showcase)
• Performance and app size are a concern
• You don’t need interactivity or physics

Use Unity integration if:

• You need full 3D interactivity, animations, or AR/VR
• You’re building a game or immersive experience
• You’re already comfortable working with Unity

🧠 Bonus: Combine Both!

You can use Flutter for your UI and basic 3D previews (flutter_3d_obj), and load Unity only for complex tasks. This keeps your app lightweight and modular.

📦 Wrapping Up

Flutter is not a full-fledged 3D engine, but with tools like flutter_3d_controller and Unity integration, you can confidently bring 3D content into your mobile apps. Choose the method that fits your project's scale and complexity.

If you’d like example projects for either approach or help setting up Unity scenes, just let me know — I’ll walk you through it.