Exploring Flutter for Web: Architecture, Implementation, and Performance Insights

When business demands grew, JD.com's frontend team sought to improve development efficiency by unifying iOS, Android, and Web code using Flutter. After successfully merging mobile platforms, they faced the challenge of handling page downgrades when native pages were no longer maintained, prompting the exploration of converting Flutter pages directly to Web.

Google introduced Flutter for Web (FFW) at I/O 2019, later merging it into the main Flutter repository. FFW shares most Dart APIs with Flutter for App (FFA) but differs in rendering: FFA uses Skia and C++ while FFW compiles Dart to JavaScript, generating standard HTML and Canvas elements, which introduces some performance overhead.

The team evaluated FFW's feasibility, noting that while simple pages render comparably to native Web, complex pages suffer from slower DOM generation and rendering. Optimizations such as refactoring Dart ListView structures and tree‑shaking unused code can mitigate these issues.

JD.com's FFW architecture introduces a three‑platform adaptation layer that abstracts service interfaces across iOS, Android, and Web. The adaptation layer uses federated plugins to provide platform‑specific implementations, and the team replaced MethodChannel communication with direct JavaScript bridges to reduce bundle size and eliminate dead code.

Key code snippets illustrate the abstract service interface, plugin configuration in pubspec.yaml, and JavaScript interop using the package:js library. The article also discusses common pitfalls such as platform detection errors, unsupported gradients, third‑party package compatibility, large bundle sizes, navigation bar duplication, and the coexistence of FFW and native code.

After implementing the adaptations, the team successfully converted a ListView‑based page, achieving functional parity between the original Flutter page and the generated Web page. Performance tests show acceptable latency for downgrade scenarios, though native Web remains faster for highly complex UI.

In conclusion, converting Flutter code to Web is viable for downgrade pages and cross‑platform consistency, but developers must address library support, performance gaps, and build‑size concerns. Ongoing optimization and automation efforts aim to further bridge the gap between Web and App platforms, moving toward a single codebase for three targets.