1 Introduction
Flutter currently supports multiple platforms including macOS, Windows, Linux, Android, iOS, and Web. Among these, the Web platform is somewhat unique because, unlike the others, it is not an operating system; rather, web applications run in a browser, which operates on top of an operating system. Therefore, the term "platform" refers to a type of "runtime environment" and is not synonymous with "operating system." Both browsers and operating systems serve as environments for running applications.
Traditional web applications are developed using JavaScript, HTML, and CSS, which gives them a natural cross-platform advantage. Flutter aims to be a high-performance cross-end UI framework, so supporting the Web platform will help expand the use cases of Flutter technology, achieving the goal of "write once, run anywhere." Since version 1.0, the Flutter team has been working on supporting the Web platform, with the first stable version for Web being 2.0. After version 2.0, Flutter's support for the Web platform has continued to improve, and some companies are now deploying Flutter applications in production environments.
2 Special Characteristics of Web Applications
Since web applications run in a browser, which operates above the operating system, they cannot directly call operating system APIs. What system capabilities a web application can access depends on whether its host—the browser—exposes the relevant operating system APIs. For security reasons, browsers provide a sandbox environment that allows certain secure and controlled system capabilities while restricting sensitive operations. This is reflected in the following ways:
Browsers allow web applications to access the network, but impose strict "same-origin policy" restrictions.
Browsers permit JavaScript to read user-selected local files (e.g., in file upload scenarios) but do not allow JavaScript to access the local file system proactively. Additionally, under no circumstances can JavaScript directly write files to the local file system, which means that the
dart:iopackage cannot be used in web applications.Browsers have their own policies regarding web applications' access to system hardware permissions, such as accessing Wi-Fi, GPS, and cameras.
Therefore, when developing web applications with Flutter, these limitations will apply, leading to inconsistencies with other platforms. Two common scenarios are: the inability to initiate cross-origin requests in web applications and the inability to directly read files in web applications.
The "same-origin policy" is a restriction that browsers impose for security reasons on web applications accessing the network. "Same-origin" means that the protocol, domain, and port of the address from which JavaScript initiates a network request must all be identical to those of the current web page. If any of these differ, it is considered "cross-origin," and the browser will prohibit cross-origin requests unless specific measures are taken. Readers can find detailed information about the "same-origin policy" and how to access cross-origin requests through online searches, as this is a fundamental topic in web development, with abundant resources available.
3 Web Renderers
Flutter provides two different renderers for running and building web applications: the HTML renderer and the CanvasKit renderer.
3-1. HTML Renderer
Since browsers have their own layout standards (HTML + CSS), Flutter can compile web applications into files that conform to these standards, including using HTML, CSS, Canvas, and SVG elements for rendering.
The advantage of using the HTML renderer is that the application size is relatively small. However, a downside is that most UI elements are not rendered by the Flutter engine, which can lead to inconsistencies across different browsers.
3-2. CanvasKit Renderer
Flutter's strength lies in providing a self-drawing UI framework that ensures UI consistency across platforms. When supporting other platforms, Flutter compiles the engine's C++ code into the code for the respective platform (running on the operating system). However, for the web platform, web applications run in a browser, and modern browsers support WebAssembly. Simply put, earlier W3C specifications required only that browsers support JavaScript, which meant that code written in other languages had to be rewritten as JavaScript to run in the browser. WebAssembly is a standardized, portable binary file format specification with a .wasm extension. Since browsers now support WebAssembly, this means that applications compiled according to the WebAssembly specification can run in the browser! Therefore, Flutter compiles the engine into WebAssembly format and uses WebGL for rendering; this rendering method is officially referred to as the CanvasKit renderer.
The CanvasKit renderer guarantees consistency in UI rendering across platforms, offers better performance, and reduces the risk of inconsistent rendering across different browsers. The downside is that the application size increases by about 2MB.
4 Running in the Browser
Command Line Arguments
--web-renderer has optional values of auto, html, or canvaskit.
auto (default) - Automatically selects the renderer. Mobile browsers choose HTML, while desktop browsers choose CanvasKit.
html - Forces the use of the HTML renderer.
canvaskit - Forces the use of the CanvasKit renderer.
This option applies to both the run and build commands. For example:
flutter run -d chrome --web-renderer html flutter build web --web-renderer canvaskit
If the target for running/building is a non-browser device (i.e., mobile or desktop), this option will be ignored.
5 Use Cases for Flutter Web
Web development has a complete and robust development and ecosystem, and Flutter Web is not suitable for all web development scenarios. Currently, Flutter Web mainly focuses on the following three application scenarios:
Progressive Web Applications (PWA).
Single Page Applications (SPA) - generally an application with only one HTML file, requiring just one load while dynamically exchanging data with the server thereafter.
Extending existing Flutter mobile applications to the Web, sharing code between the two platforms.
Note: PWA and SPA are two basic application types in web development that web developers are usually familiar with. If readers are unfamiliar with these concepts, they can search online for more information.
At this stage, Flutter is not very suitable for rich text and waterfall-type web pages, such as blogs. These represent a typical "document-centric" model rather than the "application-centric" services that a UI framework like Flutter can provide. Document-centric applications usually have independent pages that rarely relate to each other, thus not requiring cross-page state sharing. In contrast, application-centric services typically have state-related connections between pages, with different pages forming a complete function.
For more information on using Flutter on the web, please refer to the official Flutter documentation.
