Using Flutter Web for Cross‑Platform Deployment in the Liquid Development System

Flutter Web can solve the problem of external projection of native pages, allowing the Liquid development system to achieve one‑time development for three platforms while preserving the best client experience.

Performance comparisons among Flutter Web pages in UC Browser, Flutter Web in the Taobao app, and native pages in the Meipingmeiwu app show occasional stutter for Flutter Web, stable frame rates in the Taobao app, and near‑full frame rates for native pages.

Conclusions: Flutter Web performance already meets production requirements; in the Taobao app it outperforms ordinary browsers, likely due to native‑bridged JS libraries. However, native pages still provide the best client experience.

From a client perspective, native remains the preferred choice, while Flutter Web adds significant value for web and external‑projection scenarios.

Business background: Meipingmeiwu operates multiple channels (App, store guide App, Taobao mini‑app, WeChat mini‑program) that require extensive cross‑App reuse and external projection. Native is used for optimal user experience, while front‑end development is favored for flexibility in external projection.

Integration of Flutter Web with the Liquid system: Liquid consists of the LDF client SDK, LMS BFF framework, and LMC development platform. By replacing the client SDK with a Dart implementation, the same backend services can be reused for web deployment.

Overall design after introducing Flutter for Web (FFW) includes a Dart version of the LDF SDK, integration with the front‑end engineering platform DEF, and connection to common dependencies such as mtop, monitoring, and DX.

Detailed design: the Dart LDF SDK mirrors native functionality; the build process uses a custom Bash script: #! /bin/bash export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn flutter build web --web-renderer=html --release --no-sound-null-safety rm ${BUILD_WORK_DIR}/build/web/.last_build_id rm ${BUILD_WORK_DIR}/build/web/flutter_service_worker.js mv ${BUILD_WORK_DIR}/build ${BUILD_DEST} . Front‑end dependencies are injected via script tags: <script src="//g.alicdn.com/mtb/lib-mtop/2.3.14/mtop.js"></script> <script src="//g.alicdn.com/mtb/lib-login/2.2.0/login.js"></script> , or dynamically in Dart: html.document.body!.append(html.ScriptElement() ..src = 'https://g.alicdn.com/mtb/lib-mtop/2.3.14/mtop.js' ..type = 'application/javascript' ); . A unified API layer uses conditional imports and kIsWeb checks to isolate platform‑specific code.

Next steps: the minimal Liquid‑FFW integration is complete; future work will continue to refine the Liquid system, improve FFW integration, and conduct deeper performance optimizations.