Contents
    Eugene Saturow Head of Flutter

    When Is It Worth Adding Flutter to an Existing App?

    To integrate  the Flutter module into an existing native app is another possible way to make use of this framework. It can help you improve the UX and UI of your Android and iOS apps or start a seamless migration to cross-platform. 

    We at Surf have been creating applications with this SDK since 2019 and have been working with native products for over 12 years. We strive to try new tools and adopt innovations that will help our clients achieve competitive advantage. We have successful cases of adding Flutter to an existing Android app for our clients, so we know this feature from the inside out. Today, we’re going to share our findings and tell you what such integration can help you with and what to consider if you want to embed the framework into your application.

    flutter and native apps

    Why does the business choose Flutter?

    The official showcase page is replete with dozens of examples of successful SDK implementation for a wide range of companies, from niche mental health and habit-tracking applications to world-famous projects like eBay and Toyota. Let’s find out why businesses of various industries and sizes choose this framework.

    Advantages and disadvantages

    The main benefits of this framework for business are high development speed, more attractive development price compared to native applications, and excellent quality at the same time. It allows you to create high-performance and secure applications with a native look and feel. This is enabled by the following features:

    • Single codebase for various platforms. Once written, the code can be run on almost any platform: on the web, on mobile and desktop OS (iOS, Android, Windows, MacOS, Linux). All modifications are simultaneously applied to all platforms, which saves a lot of effort, time and up to 40% of the budget compared to native development.
    • Well-designed architecture. It’s based on the SOLID principles and consists of 3 separate layers: framework, engine and platform specific embedders. Each layer has its own specific functions so they don’t interfere with each other. This provides excellent application stability, easy testing and maintenance, as well as good code readability and, consequently, higher speed of work and handover to the client’s in-house team.
    • UI-related merits. The framework’s platform widgets and libraries provide a lovely native look and feel that fully matches Human Interface and Material guidelines. Its own powerful graphic engines — Skia and the more modern Impeller — in turn provide up to 120 FPS animations and flawless video playback.

    Among the drawbacks of this SDK is still the relatively large size of the project file and the application itself, which, however, can be reduced easily with the ready-made tools of the framework.

    Success stories

    google pay

    Google Pay

    At one point, the service was expanding to new countries, and in some of them the vast majority of the population were iOS users. Google chose to go the unconventional way: instead of hiring more iOS developers the company decided to develop a new framework — Flutter. First, they wanted to embed the framework into the project through the Add-to-app feature, and then decided to rebuild the whole application. It reduced engineering effort by 70% and the amount of code by 35%, and enabled much faster and more resource-efficient scaling.

    kfc erp

    KFC ERP system by Surf

    KFC turned to Surf in seek for help with handling the management paperwork. The company wanted to provide quick access to the documents — reports, shift schedules, checklists — and create a convenient digital management system. Moreover, they needed all of these to be available on any device, both mobile and desktop. The Google-developed SDK  allowed us to create an overwhelming project, which provided role separation, a backend-driven UI and met all security standards. 

    xianyu app

    Alibaba

    Alibaba Group chose the framework for their largest second-hand marketplace with over 300 million users, Xianyu. They were one of the first companies who trusted in the new-born technology in 2018. This SDK became the main development tool for the Xianyu team. It allowed them to improve team management, and provided a beautiful UI and smooth performance.

    Want to see more successful Flutter projects examples?

    Read our case studies

    How to add Flutter to an existing app

    Adding Flutter into your existing native applications is a perfect option if you want to add a new functionality or improve a current one. The add-to-app feature makes it possible to simultaneously embed the framework components into both mobile platforms. The process is considerably faster and money-saving than adding similar elements using native technologies. This is also a great opportunity to test-drive the framework and see whether it works for your project. The process is quick and doesn’t bring any inconveniences to users. However, there are some platform-specific details. Let’s see what exactly the integration of the SDK looks like for each OS.

    Android applications

    Developers can embed Flutter components into the existing native application either automatically via Android Studio plugin, or manually by writing a few lines of code and creating AAR and POM repos.

    iOS applications

    The integration process is quite similar to that of Android. First, a developer creates a Flutter module, to which plugins and packages can be added later. Then they embed it into native code either automatically using CocoaPods or manually by adding frameworks to the Xcode project.

    In both cases, when using the application, the added screens or elements are launched via FlutterEngine, previously connected to the native project through the API. The SDK’s code can be easily edited in Android Studio or VSCode, and after each update the whole project needs to be recompiled to see the changes.

    Learn more about Flutter workflow at Surf

    Get the info

    Things to consider about integration

    Apparently, all tools have certain limitations. The add-to-app feature has a few as well. For iOS, for example, it’s only available to integrate the entire application screen. However, Android is much more flexible in this regard: it also supports embedding fragments (menu tabs bar, onboarding slides and so on) and single elements.

    The SDK may also have some difficulty with heavy components like AR, maps, and background playback. In these cases the framework needs to refer to a native component to make the screen work. For instance, if you decide to make a product card using this framework and embed an AR product demonstration there, the AR solution will most likely require a native plugin. However, these flaws are quite solvable.

    However, if you prefer to stick with native development, Surf’s here for you. We have vast experience in this field as well and have already successfully implemented complex solutions like AR

    Final word

    Flutter has already gained a certain fame in the field of creating apps from scratch. But in fact its field of use is wider than most people believe it is. The SDK may be used to modify and improve your existing native applications as well. It doesn’t take much effort to embed if it’s done by a skilled team. As a result, you get a more attractive and user-friendly application.