Flutter Integration in Anjuke App Using Magpie Open Source Projects

Background: Flutter is a cross‑platform UI framework offering consistent rendering on Android and iOS, hot‑reload, and future OS support.

Original problems: lack of guidance on building hybrid projects, integrating Flutter modules, importing UI specifications, reusing components, logging, and performance concerns.

Solution process:

Set up a hybrid project and display a HelloWorld page using Magpie Workflow (magpie create -n ...).

Integrate the Flutter module into the Anjuke app as a sub‑module, keeping the native architecture unchanged.

Register Magpie SDK and Flutter SDK in Android and iOS projects, then wrap the Flutter page in a FlutterFragment and add it to the host activity.

Use Magpie PageBuilder to register routes and enable navigation between native and Flutter screens.

Workflow toolchain: Magpie Workflow converts fixed commands into visual buttons, automates SDK packaging, and supports version‑controlled releases via Maven.

Mixed interface management: A Router Center maintains separate registration tables for Flutter and native pages; unknown routes fall back to native handling.

Theme management: A theme factory creates project‑specific themes based on app name and dark mode, and image resources are loaded dynamically per project.

UI component reuse (Magpie Fly): Reusable widgets such as SearchInput, HorizontalScrollView, BannerWidget, and RefreshHeader are combined to rebuild the “YouLiao” page quickly.

Logging with Magpie Log: The framework provides page‑view, card‑exposure, and click logging via Redux actions, manual logging via MagpieStatisticsHandler.instance.writeData({'data': '手动埋点数据示例'}); , and automatic exception capture using FlutterError.onError = (FlutterErrorDetails details) async { /* Magpie log */ }; . Zone‑based error handling captures both synchronous and asynchronous Dart exceptions.

Conclusion: By applying Magpie’s workflow, SDK, Fly components, and Log system, the team successfully migrated the “YouLiao” module to Flutter, achieving faster development, consistent UI across platforms, and a complete logging and error‑handling solution.