Flutter for Web: Two Compilation Schemes and Their Implementation Details

Flutter, an open‑source high‑performance cross‑platform framework from Google, uses its own rendering engine to draw UI on the browser DOM, Android View, or iOS UIView. The article first introduces Flutter's layered architecture: the Framework layer (pure Dart SDK) with Foundation, Animation, Painting, Gesture, Rendering, and Widgets; the Engine layer (C++ SDK) containing Skia, Dart runtime, and text layout; and the Embedder layer that adapts the engine to specific platforms.

For web support, Flutter originally offered two approaches: (1) HTML + CSS + Canvas, which provides the best compatibility but suffers from pixel‑based performance issues when Canvas is used; and (2) the CSS Paint API (part of CSS Houdini), which allows developers to write custom painting code that runs in a worker‑like environment, though it currently lacks text support and has inconsistent browser adoption.

The article then details the two compilers Flutter provides for web output. dart2js compiles Dart code to JavaScript by first generating a .dill file (an AST representation), invoking dart2jsSnapshot, loading the .dill into a KernelResult, performing global type inference, and finally generating JavaScript via JSBuilder. The build flow, command‑line options, and sample snapshots are illustrated with images and code snippets.

--libraries-spec=/Users/beike/Flutter/bin/cache/Flutter Web_sdk/libraries.json 
--native-null-assertions 
-Ddart.vm.product=true 
-DFlutter Web_AUTO_DETECT=true 
--no-source-maps // whether to generate source maps 
-O1 
-o 
--cfe-only // only front‑end compilation, stop before back‑end 
/Users/beike/path_to_js/main.dart.js 
/Users/beike/path_to_dill/app.dill

Key backend steps include loading the .dill file with BinaryBuilder, computing a JsClosedWorld via computeClosedWorld(), performing global type inference, and finally calling generateJavaScriptCode() to produce the JavaScript output.

dartdevc is an incremental compiler that supports hot‑reload and generates source‑mapped JavaScript suitable for debugging. It is used during development, while dart2js is preferred for production builds because it applies tree‑shaking and other optimizations to produce smaller, faster code.

A small example Flutter widget is shown, demonstrating how the UI code is transformed into HTML canvas elements and CSS transforms during the web build process. The generated HTML snippet and the underlying drawing logic are presented.

Widget build(BuildContext context) { 
  return Scaffold( 
    appBar: AppBar( 
      title: Text(widget.title, style: TextStyle(color: Colors.white)), 
    ), 
    body: Center( 
      child: Column( 
        mainAxisAlignment: MainAxisAlignment.center, 
        children: <Widget>[ 
          Container( 
            width: 250, 
            height: 250, 
            color: Colors.orange, 
            child: Center( 
              child: Text("6", style: TextStyle(fontSize: 200.0, color: Colors.green, fontWeight: FontWeight.bold)), 
            ), 
          ) 
        ], 
      ), 
    ), 
  ); 
}

In conclusion, both compilers achieve the same goal of turning Flutter code into JavaScript, but dartdevc is ideal for rapid development with incremental builds, while dart2js yields optimized, production‑ready output. The article encourages further exploration of Flutter's web capabilities and hints at future improvements.