Flutter Adoption at 7FRESH: Architecture, State Management, Hybrid Development, Performance Comparison, and Future Plans

In December 2018, Flutter 1.0 was officially released, and 7FRESH began using Flutter for vertical business pages such as activity pages, clubs, and commissions, achieving shorter white‑screen times and better user experience compared with H5 implementations.

Basic Architecture – The system is divided into a business layer and a common component layer, the latter containing business components, UI components, and foundational components that provide reusable widgets, routing, image caching, and hot‑update capabilities.

Challenges Encountered – During Flutter integration the team faced issues like state management, hybrid development, page‑stack handling, image caching, native communication, and performance analysis.

State Management Solution – After evaluating options, Provider was chosen for its simplicity, performance, and Google endorsement. The implementation steps include adding the provider dependency in pubspec.yaml , defining a model with ChangeNotifier , registering the model via MultiProvider and ChangeNotifierProvider , and using Consumer for localized UI updates. Provider achieves granular refresh through InheritedProvider , StatefulWidget based ListenableProvider , and the publish‑subscribe nature of ChangeNotifier .

Hybrid Development & Engineering Management – Three separate Git repositories manage Android, iOS, and Flutter code. Two integration approaches are used: source‑dependency (embedding Flutter modules directly for easy debugging) and build‑artifact dependency (producing AAR or framework packages for seamless native integration). Configuration examples for Android settings.gradle and app/build.gradle , as well as iOS Podfile and Xcode script adjustments, are provided.

Mixed Page‑Stack Management – A shared Flutter engine and a WebView‑like stack management strategy are employed, using a global routing protocol for inter‑module communication across Native, H5, Flutter, and React‑Native.

Global Routing Management – The routing protocol, illustrated with diagrams, leverages MethodChannel to pass data, enabling decoupled navigation and native feature reuse without concern for the underlying technology stack.

Network Module – Network requests are delegated to native implementations (e.g., HTTPDNS, HTTPS verification) via the routing protocol, while Flutter can use libraries like Dio when appropriate.

Image Caching Strategy – After evaluating fade_in_image and cache_network_image , a custom solution based on fade_in_image was built, adding memory caching, a secondary cache, and an LRU eviction policy.

Performance Analysis – Using Android Profiler, Flutter showed lower CPU peaks (≈24.9% vs 33% for H5), comparable memory usage (≈302 MB vs 257 MB), and higher FPS, resulting in smoother rendering and better user experience.

Man‑hour Efficiency – Development effort for the same feature dropped from ~6 person‑days with native code to ~4 person‑days with Flutter, a 30% reduction, freeing resources for other projects.

Future Expectations & Planning – With Flutter 1.9.1 adding web support and ongoing collaboration with JD's ARES cross‑platform team, 7FRESH aims to enhance componentization, dynamic updates, and tooling to contribute to the broader Flutter ecosystem.