Flutter for Web: Two Compilation Approaches and Their Internals

Introduction: The article introduces Flutter, a Google‑originated high‑performance cross‑platform UI toolkit that renders via its own engine rather than native DOM or views.

Flutter architecture: It explains the layered structure – Framework (Dart SDK with Foundation, Animation, Painting, Gesture, Rendering, Widgets), Engine (C++ core with Skia, Dart runtime, text layout) and Embedder (platform integration).

Web support options: Two strategies are described – HTML + CSS + Canvas for compatibility and CSS Paint API (Houdini) for advanced rendering, each with pros and cons.

Two compilers for Flutter Web: dart2js and dartdevc. The article details the dart2js workflow, including generation of .dill files, snapshot compilation, kernel loading, closed‑world analysis, type inference, and final JavaScript generation. Example command line:

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

dartdevc is an incremental compiler supporting hot‑reload and source‑maps, suitable for development. Example Flutter widget code is shown:

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),),),),],),),); }

Low‑level drawing implementation is also illustrated, showing how Dart drawing calls are translated into canvas elements and HTML output.

Conclusion: dart2js is preferred for production builds due to its aggressive optimizations, while dartdevc is ideal for rapid development with incremental compilation; both share the same underlying compilation pipeline.