Introducing Flutter into an Existing Mobile App: Process, Challenges, and Solutions

The team began using Flutter for the "Home Assistant" app in August 2019, eventually reaching about 70% of the app’s pages, and wrote this guide to share the adoption process and lessons learned.

Flutter, Google’s cross‑platform UI framework, enables rapid creation of high‑quality native interfaces on iOS and Android; since its 1.0 release in December 2018 it has amassed over 68,000 GitHub stars, approaching React Native’s popularity.

When choosing a cross‑platform solution, the article compares React Native (RN) and Flutter across maturity, performance, debugging efficiency, and UI consistency. Flutter scores higher on performance due to its 120 fps rendering target and JIT‑based hot‑reload, while RN lags in rendering complex view hierarchies. Flutter also offers better UI consistency because it handles rendering internally, unlike RN which relies on native bridges.

However, Flutter has limitations: increased app bundle size (≈10 MB for iOS, 6 MB for Android), a steep learning curve, a relatively weaker third‑party ecosystem, and some native feature gaps (e.g., push, maps, Bluetooth).

To address the learning curve, the team created a staged training plan focusing first on core widgets, networking, storage, project management, and packaging, followed by testing, debugging, and operations. After a month of training, all members could develop Flutter features.

Project rollout required solving three key problems: collaborative development across Dart, Android, and iOS codebases; hybrid development mixing native and Flutter pages; and disaster‑recovery fallback to native pages when Flutter fails.

For collaborative development, two repository modes were evaluated: a mixed mode (both native and Flutter code in one repo) and an artifact mode (separate build outputs). The mixed mode was chosen initially, with a future move to artifact mode for stable modules.

iOS integration steps include creating a Flutter module, adding scripts to the Podfile, running $ pod install , and inserting Flutter build scripts into Xcode’s Build Phases, then disabling Bitcode. Sample commands: $ cd ~/integratedFlutter flutter create -t module my_flutter platform :ios, '8.0' target 'integratedFlutter' do flutter_application_path = '../my_flutter/' eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding) end

Android integration involves creating a Flutter module, adding the module to settings.gradle , and declaring the Flutter dependency in the app module’s build.gradle . Example snippets: flutter create -t module --org com.example my_flutter // MyApp/settings.gradle include ':app' setBinding(new Binding([gradle: this])) evaluate(new File(settingsDir.parentFile, 'my_flutter/.android/include_flutter.groovy')) dependencies { implementation project(':flutter') }

The hybrid stack uses FlutterBoost to manage a single visible Flutter navigator that synchronizes its lifecycle with native containers, avoiding multiple Flutter engine instances and reducing memory consumption. The article outlines the creation, registration, and navigation flow between native and Flutter pages.

Disaster‑recovery is implemented by fetching a remote Flutter configuration at app startup; if a Flutter page fails (e.g., data parsing error), the app falls back to the native implementation, ensuring business continuity.

Results show that Flutter helped balance the team’s Android‑to‑iOS developer ratio (previously 2:1) and enabled unified code reviews across platforms, improving development speed and consistency. Screenshots demonstrate both simple and complex Flutter pages within the app.

In summary, the guide presents the full lifecycle of introducing Flutter—training, integration, hybrid architecture, and fallback strategies—providing practical insights for teams considering cross‑platform mobile development.