Flutter Web Architecture and Implementation Overview

Flutter for Web was first demonstrated at the Flutter 1.0 London launch in winter 2018, where product manager Tim Sneath showed a sliding‑puzzle example. The project, originally called HummingBird, was later renamed flutter_web and merged into the master branch.

Flutter Web aims to provide web support for Flutter applications from a single code base, allowing Dart‑written apps to be deployed to any web server or embedded in a browser without special plugins.

As of Flutter 1.9.x, Flutter Web is still in technical preview and not yet ready for production.

Design Overview

Flutter Web works by re‑implementing the dart:ui library using standard web technologies. The framework is written in pure Dart and split into rendering and logic layers. Rendering ultimately produces TextBox, Picture, Image objects that are drawn via Skia (C++) on native platforms, while on the web the same primitives are mapped to HTML/CSS/Canvas.

Two implementation strategies were considered:

HTML + CSS + Canvas (high compatibility, but Canvas rasterizes images which can cause pixelation and performance issues).

CSS Paint API (a Houdini feature that allows direct CSS rendering without Canvas, but lacks text support and has inconsistent browser adoption).

Flutter Web currently uses the first approach (HTML + CSS + Canvas).

Environment Setup

Typical Flutter environment checks: flutter doctor -v Enable web support: flutter config --enable-web The configuration is stored in .flutter_settings under the user’s home directory.

dart2js Configuration

When building the Gallery example, the generated JavaScript (main.dart.js) is heavily minified (≈2.2 MB) due to O4 optimizations. Switching to O0 disables most optimizations, improving readability at the cost of larger file size.

Implementation Details

Image Rendering

Flutter Web translates image drawing calls to CanvasRenderingContext2D.drawImage. Example Dart code:

import 'package:flutter/material.dart';
void main() => runApp(Image.asset('assets/1.png'));

The corresponding engine method:

void drawImageRect(ui.Image image, ui.Rect src, ui.Rect dst, ui.PaintData paint) {
  final HtmlImage htmlImage = image;
  ctx.drawImageScaledFromSource(htmlImage.imgElement, src.left, ... , dst.height);
}

In the compiled JavaScript this becomes a drawImageRect$4 function that eventually calls drawImageScaledFromSource and finally CanvasRenderingContext2D.drawImage.

Text Rendering

Text is rendered by creating HTML elements with CSS styles. Example: void main() => runApp(Text('Hello Flutter!')); The engine’s drawParagraph creates an element via html.Element, clones the paragraph element, applies CSS positioning, and appends it to the DOM.

Shape Rendering

Shapes such as rectangles are drawn by generating custom HTML tags (e.g., <draw-rect>) and styling them with CSS. Example Dart code:

void main() => runApp(Container(decoration: BoxDecoration(color: Colors.red)));

The engine method drawRect creates an element, sets its style, and appends it to the current DOM node.

Gesture Handling

Gesture detectors are compiled to JavaScript that registers pointer events via the Dart SDK’s sdk.js. The events flow through PointerBinding to WidgetsFlutterBinding.handlePointerDataPacket, mirroring the native Flutter pipeline.

Pros and Cons

Advantages

High compatibility thanks to HTML + CSS + Canvas; zero‑cost conversion of Flutter code to standard web output.

Disadvantages

Large bundle size (e.g., a simple gesture app produces a 560 KB JavaScript file).

Incomplete feature support (e.g., missing icons on Safari).

Performance concerns when many bitmap canvases cause DOM rasterization overhead, especially during scaling.

Conclusion

Flutter Web presents a solid design that leverages mature web APIs ( dart:html, dart:js) and re‑implements dart:ui for the browser. Developers can write Flutter code once and obtain a web version without modifications. Although the technology is still maturing—bundle size and performance need improvement—the layered architecture gives confidence that these issues will be resolved as the ecosystem evolves.