Migrating a Mobile App from Unity to Flutter

Protone App is an application by the Atom brand, which develops a well-known electric car. Protone is the first step in Atom's loyalty program, motivating users to complete beneficial tasks through gaming mechanics. Users can complete online and offline missions to earn points — protons and atoms. Protons can be exchanged for real rewards like merchandise, service subscriptions, and more, while atoms are used to upgrade their virtual avatar.

Initially, the app was built on the Unity game engine, but over time, the technology no longer met the requirements. Since the client was already familiar with using Flutter to develop a game, it was decided to migrate the app to this new platform.

The Challenge

The main issue with Unity was minor problems that significantly affected the game user experience: slow inertial scrolling, delayed animations, pixelated UI components, and non-native prompts when interacting with text fields. Unity is excellent for 3D and 2D game development, but its performance for 2D applications falls behind other options. To address this, the client considered migrating to Flutter, which their team successfully used when designing HMI interfaces for the electric car. The framework provides near-native performance and could potentially solve these issues.

Evrone's specialists were given a test task — to create two screens that most clearly demonstrated the usability problems, using Flutter. These were the AI assistant chat and the mission list. However, the biggest challenge wasn’t just creating these screens but showing them in action. Redesigning the entire app was too large a task for the test scope. We needed to find a local solution that allowed us to integrate Flutter with Unity, maintaining the app’s performance and overall functionality.

Our team found such a solution. We focused on the fact that both building Flutter and Unity run as native apps where the framework renders the necessary elements. We created a bridge using native languages, enabling calls to Flutter screens from the Unity app or data transfer between them. This approach had some limitations but was perfect for our task.

Implementation

The client's feedback on the performance of Flutter was positive, so we decided to fully develop the mobile game with Unity and Flutter, gradually replacing one screen at a time. Only the user’s 3D avatar and virtual city map would remain on Unity.

Due to the gradual transition, one of Flutter game development services — Hot Reload — could not be fully utilized. Hot Reload allows developers to instantly test code changes and see how the app behaves with those modifications. This feature was only usable within Flutter GameDev screens, such as for layout adjustments.

When changes affected the flow or platform interactions, such as authentication or photo uploads, the process became much more complex. First, we had to compile the Flutter modules, integrate them into the Unity project, build the app, launch it, and then check the results.

Flutter renders the entire UI, enabling full control over every pixel on the screen and offering almost limitless design possibilities. It works seamlessly with vector graphics using additional libraries and excels at rendering complex effects like gradients and blurs, which were highly relevant for game's UX/UI. Unity’s layout was more limited, lacked vector graphic support, and showed noticeable pixelation in UI elements. Complex layout elements were exported as images from Figma.

Now, all new screens are designed for Flutter, including their visual design. The app's design is universal for both Android and iOS, and our Flutter game development services allow customization of specific interface elements like pop-up windows and notifications. With the Material Design widgets for Android and Cupertino widgets for iOS, these can be styled to match each platform’s native look. By simply declaring an adaptive component, the rest happens automatically.

In addition to migrating existing screens, Evrone’s specialists are developing entirely new flows. For instance, events periodically occur in the app, and we create new pages and elements for them within the main application.

Future Plans

The main goal of our team for this project is to fully migrate the app to Flutter, retaining only the integrations with Unity for the 3D avatar and virtual city map. We are working on this in collaboration with the client’s team. In the near future, we plan to optimize the loading of Flutter screens: currently, a new Flutter Engine class is created for each screen, but we aim to cache it at the initial launch and then refer to the cache.

A redesign of the current mission flow is also planned. The design is gradually being updated, aligning more closely with Atom’s branding in terms of colors and fonts.

Looking for a team to help you with cross-platform game development or migrate your app to Flutter? Evrone’s experts are ready to assist you in building engaging UI/UX in mobile games and creating great user experiences. Fill out the form below to discuss your project!