Understanding Flutter Architecture, UI Rendering, and Development Practices

Author Introduction Duan Tianzhang, a core Android developer at Ctrip Payment Center, focuses on Android payment modules and contributes to open‑source mobile technology.

Flutter Overview Flutter, open‑sourced for three years and gaining community traction recently, enables a single codebase to run on iOS and Android, offering fast development, high‑quality UI, and a permissive license.

1. Flutter Layers Inspired by Ian Hickson (HTML spec author), Flutter is organized into four layers: dart:ui (low‑level UI), Rendering (abstract layout), Material, and Widgets. The Rendering layer abstracts pixel‑level calculations, improving update efficiency compared to the original coordinate‑based approach.

2. UI Rendering Process Flutter renders UI through three parallel trees: Widget tree, Element tree, and Rendering tree. When setState() modifies a Widget, the change propagates to the Element tree, which then updates the Rendering tree, causing only the affected parts to repaint. This selective update yields performance comparable to native and superior to React Native.

Rendering Example In a Row with fixed‑width and flexible children, Flutter first layouts the fixed‑width widget, then the flexible ones, and finally renders them in the order of the Element tree.

3. Dart Language Dart, developed by the V8 team lead Lars Bak, features C‑like syntax and memory‑allocation optimizations that allow short‑lived objects to be allocated quickly, enabling 60 ms frame rendering. Dart's dart:mirrors provides reflection, but Flutter disables it to keep binary size small.

4. UI Development Style Flutter adopts a declarative, tag‑like syntax similar to HTML. A typical Scaffold example looks like:

new Scaffold(
  appBar: new AppBar(title: new Text(widget.title)),
  body: new Center(
    child: new Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children:
[
        new Text('You have pushed the button this many times:'),
        new Text('$_counter', style: Theme.of(context).textTheme.display1),
        new FlatButton(color: Colors.blue),
      ],
    ),
  ),
  floatingActionButton: new FloatingActionButton(
    onPressed: _incrementCounter,
    tooltip: 'Increment',
    child: new Icon(Icons.add),
  ),
);

5. Plugin, Dependency, and Package Management Flutter uses its own pub package manager; dependencies are declared in pubspec.yaml . Because Google’s package mirrors are blocked in some regions, developers must set environment variables PUB_HOSTED_URL and FLUTTER_STORAGE_BASE_URL to use Chinese mirrors.

6. Common Issues Flutter lacks built‑in reflection, making automatic JSON‑to‑model conversion difficult; developers often write manual mapping code, e.g.:

class ExchangeResult {
  final String status;
  final String scur;
  final String tcur;
  final String ratem;
  final String rate;
  final String update;

  ExchangeResult(this.status, this.scur, this.tcur, this.ratem, this.rate, this.update);

  ExchangeResult.fromJson(Map
json)
    : status = json['status'],
      scur = json['scur'],
      tcur = json['tcur'],
      ratem = json['ratem'],
      rate = json['rate'],
      update = json['update'];
}

When handling HTTP responses, the charset may include a trailing semicolon (e.g., charset=utf-8; ), causing the Dart HTTP client to misinterpret the body. The fix is to decode manually:

var dataURL = "http://api.k780.com?app=finance.rate&scur=CNY&tcur=GBP&appkey=35134&sign=...&format=json";
var response = await http.get(dataURL);
print(Utf8Codec().decode(response.bodyBytes));

7. Dart SDK Version Binding Flutter bundles a specific Dart SDK version; changing the SDK to fix a bug requires rebuilding the entire Flutter SDK because the versions are tightly coupled.

Conclusion Although Flutter still faces challenges such as larger binary size and limited plugin ecosystem, its rendering performance surpasses React Native, and its cross‑platform capabilities make it a promising choice for future mobile development.