1. Flutter Web Architecture
At present, in addition to supporting Android and iOS mobile cross-platform development, Flutter also supports the development of multiple cross-platforms such as macOS, Windows, Linux and Web. It can be said that as an advanced cross-platform development framework, Flutter has truly realized the beautiful vision of "write once, run everywhere".
As we all know, the Dart language has supported direct compilation into JavaScript since the beginning of its existence, and has been optimized for the tool chain of development and production environments. Many important applications already run in production using Dart-compiled JavaScript, including Google Ads' advertiser tools. Since the Flutter framework is written in Dart, compiling it to JavaScript is relatively simple.
However, the Flutter engine, written in C++, is designed to interface with the underlying operating system, not a web browser. So we need to find another way. Flutter reimplements the engine on the web platform with the browser's standard API. Currently we have two options for rendering content on the web: HTML and WebGL. In HTML mode, Flutter uses HTML, CSS, Canvas, and SVG for rendering. In WebGL mode, Flutter uses a version of Skia compiled to WebAssembly called CanvasKit. HTML mode provides optimal code size, and CanvasKit provides the fastest path to browser graphics stack rendering and higher graphical fidelity for native platform content5. The layered architecture diagram of the Flutter web version is shown below.
Compared to other platforms running Flutter,