Implementing Magic with Flutter Unity Widget: A Complete Guide

You must already be familiar with Flutter and Unity's striking versatility. But what happens if they are pulled together in a single application? That's where the magic truly arises, and today, we're here to spell that out for you.

Embedded Wizardry is what we'll be pursuing in this guide, using the indispensable tool called Flutter Unity Widget. Our journey will span across both the realms of Flutter and Unity, showcasing the amalgamation of these two powerful platforms in an exemplary Flutter app development scenario.

What is the Flutter Unity Widget?

The Flutter Unity Widget handles most tasks under the 'Flutter and Unity' union. It's a magical vault that facilitates embedding Unity in a Flutter App. It's more than just a standard widget; it's a bridge connecting your 'flutter project' with a 'unity project',, leading to real interaction between the two ecosystems.

The wind under this widget's wings is the power to control the Unity view from the Flutter app. Its strong foundations of 'unity engine' and 'scripting backend' ensure a smooth connection with the Unity game, enabling specific features, such as pause unity player or resume unity player, with seamless precision within the Flutter app.

Flutter Unity Widget supports both Android and iOS and conveniently allows you to enable custom background behaviors on both platforms. Does the question of how to disable Unity fullscreen trouble you? Flutter Unity Widget also solves the problem by consistently allowing fullscreen and embeddable modes across devices.

Setting Up the Environment

Bare prerequisites to get us started include your existing Flutter project on the Flutter platform, Unity of a specified Unity version, Android Studio or any of your preferred Flutter-supported IDEs.

To include the flutter_unity_widget in your existing flutter project, navigate to your pubspec.yaml and insert the package declaration:

1dependencies:
2  flutter_unity_widget: ^ version

Remember to update the version with the latest one. After this, run Flutter packages and enter the terminal to import the package.

A heads up for Android enthusiasts: you may encounter an Android Studio error highlighting a form of version conflict in your Android app build.gradle related to the minSdkVersion. In this case, you should elevate the minSdkVersion to at least 19 if it is under.

Creating a Unity Project

Creating a Unity project is an essential waypoint on our journey. Let's start by opening our Unity editor. If this is your first Unity ride or you're dusting off some old Unity skills, don't worry. The Unity editor underneath the complex facade is friendly and intuitive.

Let's start a new project:

1. Select New
2. Specify a name for your Unity project
3. Select a location on your system for the Unity project folder
4. Select 3D or 2D based on your need
5. Finally, hit Create

Remember, the name you give to your Unity project will play a significant role when integrating Unity and Flutter; hence, keep it simple and accessible.

Feel free to explore the Unity editor, create interesting AR projects using Unity AR Foundation samples, or pull out an existing Unity project you'd like to incorporate into your Flutter app. Adding a Unity game at this stage will give your project a more profound sense of purpose and help scrutinize every aspect of the embedding process.

Configuring Flutter Platform

Post your adventurous journey in Unity, let's gear up for the next essential step, configuring your Flutter platform.

Working on the Android platform, make sure the Android project build.gradle file includes the following line:

1    packagingOptions {
2        pickFirst 'lib/armeabi-v7a/libunity.so'
3    }

This is necessary to avoid any conflicts when the compiled Unity project's .so file gets included in your Android app.

For the iOS scenario, the users need to add the path of their Unity projects to the Flutter project's iOS podfile just before the end:

1  flutter_additional_ios_build_settings(target)
2  system("ruby flutter_unity_widget/scripts/set_unity_ios_builds_path.rb '#{File.expand_path("<your unity iphone project path>")}'")
3end

While mentioning the path, replace <your unity iPhone project path> with your Unity iPhone Project path.

Adding Flutter Unity View Widget to the Code

The thrill intensifies as we include the Flutter Unity View Widget in our Flutter App. Make sure the embedding unity concept is evident as we dive deeper.

We'll need to create a Unity Controller Void to instantiate the widget. Flutter Unity Widget provides the 'Unity Controller Void onUnityCreated()' method that gets called once Unity gets fully loaded and is ready to play.

Firstly, let's import the Flutter Unity Widget package.

1import 'package:flutter_unity_widget/flutter_unity_widget.dart';

Now, let's create an instance of UnityWidget. We will assign it to a variable.

1 UnityWidget(
2   onUnityCreated: onUnityCreated,
3 ),

In the 'onUnityCreated' method, assign the instance to the Unity controller variable.

1UnityWidgetController _unityWidgetController;
2
3void onUnityCreated(controller) {
4 this._unityWidgetController = controller;
5}

Herein, the_unityWidgetController instance mentions Unity's lifecycle events like pausing the player, resuming the player, or even quitting the Unity player when you're shrugging off Unity from your Flutter app.

Exporting Unity Project

Having laid the groundwork for our Flutter app, it's time to capture Unity's magic. This magic, bundled up as an Android or iOS library, is what we'll extract and transport to our Flutter app. Let's get our hands dirty with Unity Export!

This requires defining the output path in the Unity project. But remember, it's not the project path; it's the path to the folder named 'unity' in your Flutter project directory. Set this as the expected path.

Prepare the Unity project for export by choosing 'File > Build Settings' from the Unity editor menu. Select Android or iOS, depending on your preference, match Unity releases, and hit the 'Export' button.

In the case you face a unity error, don't panic. The most likely culprit will be the mismatch in Unity versions of your Flutter and Unity platforms. In any case, successfully resolving errors at this point is important as we aim for the smooth functioning of the 'Unity to Flutter' interaction.

Implementing the Flutter-unity widget in the Flutter app

Now that we have our Unity project exported as well as the Flutter platform prepped up, let's mix these ingredients to conjure up our dream project rushing toward the finish line.

First, we'll call our 'Unity Project' from our 'Flutter App' using Flutter's friendly 'Flutter Unity widget'. Amidst the number of widgets Flutter has in its arsenal, the flutter-unity widget stands out for its unique capability of enabling Unity functionality in a Flutter app.

Before diving in, ensure that you've integrated Unity correctly. A quick thumb rule is to avoid Unity freezes and especially iOS crashes.

Here's a small dart code snippet that gives you a fair idea of how to use the widget in your code:

1import 'package:flutter_unity_widget/flutter_unity_widget.dart';
2
3class UnityDemoScreen extends StatefulWidget {
4 @override
5 _UnityDemoScreenState createState() => _UnityDemoScreenState();
6}
7
8class _UnityDemoScreenState extends State<UnityDemoScreen> {
9 UnityWidgetController _unityWidgetController;
10
11 void onUnityCreated(UnityWidgetController controller) {
12   this._unityWidgetController = controller;
13 }
14
15 @override
16 Widget build(BuildContext context) {
17   return UnityWidget(
18     onUnityCreated: onUnityCreated,
19   );
20 }
21}

Use unityWidgetController to invoke commands at your disposal. For instance, unityWidgetController.pause(), unityWidgetController.resume(), or unityWidgetController.quit().

With this final step, we bring our Unity game into the cozy embrace of our Flutter app, showcasing communication between these two platforms and thus shaping the concept of 'Unity and Flutter' under the same roof.

Hands-On Example: Flutter Unity Widget

Having learned the foundational concepts, let's put everything together in a sample application implementing all the essentials we've learned.

In essence, our goal is to set up a Flutter Unity Widget on the main screen of the Flutter application that enables the pause, resume, and quit functionality of a Unity game. For this purpose, we'll utilize an existing Unity game sample.

1import 'package:flutter/material.dart';
2import 'package:flutter_unity_widget/flutter_unity_widget.dart';
3
4class GameScreen extends StatefulWidget {
5  @override
6  _GameScreenState createState() => _GameScreenState();
7}
8
9class _GameScreenState extends State<GameScreen> {
10  UnityWidgetController controller;
11
12  void onUnityCreated(UnityWidgetController controller) {
13    this.controller = controller;
14  }
15
16  @override
17  Widget build(BuildContext context) {
18    return Scaffold(
19      appBar: AppBar(title: Text('Game Screen')),
20      body: UnityWidget(
21        onUnityCreated: onUnityCreated,
22      ),
23      floatingActionButton: Row(
24        mainAxisAlignment: MainAxisAlignment.end,
25        children: [
26          FloatingActionButton(
27            onPressed: () {
28              controller.pause();
29            },
30            child: Icon(Icons.pause),
31          ),
32          SizedBox(width: 10,),
33          FloatingActionButton(
34            onPressed: () {
35              controller.resume();
36            },
37            child: Icon(Icons.play_arrow),
38          ),
39          SizedBox(width: 10,),
40          FloatingActionButton(
41            onPressed: () {
42              controller.quit();
43            },
44            child: Icon(Icons.stop),
45          )
46        ],
47      ),
48    );
49  }
50}

This simple Flutter app gives you a Unity game controlled by the pause, resume, and quit functionalities directly in the Flutter UI.

Conclusion

We've discovered endless possibilities in exploring the powerful combination of Flutter and Unity. Flutter's flutter_unity_widget package smooths integrating a Unity game into a Flutter app. This enticing combination promises an immersive app experience, whether you plan to create an engaging AR project or a simple animation game.

Although the process might seem daunting initially, with consistent persistence and a little help from this guide, you can blend Flutter and Unity to produce remarkable applications beautifully. Despite potential errors you might encounter, remember each challenge is an opportunity to learn and grow.

So go ahead and unleash your creativity with the potent duo of Unity and Flutter! Let this be the beginning of your many successful Flutter-Unity application developments.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.