Why Flutter Could Be the Next Big Thing for Frontend Developers

Introduction

Tencent OED's client team adopted Flutter in early 2019 for the Penguin Tutor product and later attended the 2019 Google I/O conference, sparking interest in using Flutter for cross‑platform development.

Why Flutter?

Before Flutter, many teams used React Native (RN) for its acceptable performance, efficient development, and hot‑update capabilities. However, RN still requires native iOS and Android code for custom components, incurs maintenance costs due to platform differences, and faces performance bottlenecks in complex animations and rendering.

These limitations motivated the emergence of self‑draw engine solutions, with Flutter representing a modern approach that draws UI directly using the Skia graphics library, enabling true cross‑platform consistency.

Flutter Technical Architecture

Embedder : The OS adaptation layer that handles surface rendering, threading, and platform plugins.

Flutter Engine : A pure C++ SDK containing the Skia engine, Dart runtime, and text layout engine. It runs Dart code in JIT, JIT‑snapshot, or AOT mode and manages VSync, GPU data, and event propagation.

Flutter Framework : A pure Dart SDK that provides foundational libraries for animation, painting, gestures, and a widget library styled for Material and Cupertino designs.

Foundation – low‑level utilities.

Animation – tween and physics‑based animations.

Painting – drawing APIs for images, shadows, borders.

Gesture – gesture recognition.

Rendering – layout, paint, and compositing stages.

Application Language: Dart

Flutter uses Dart, which supports both JIT (fast development cycles) and AOT (high‑performance releases). Dart offers a strong type system, tree‑shaking for smaller binaries, a rich standard library, and a single‑threaded event‑loop model with isolates for concurrency.

Implementation Idea

Flutter’s self‑draw UI, powered by Skia, eliminates reliance on native UI toolkits, allowing a single codebase to run on iOS, Android, and Web with consistent visual fidelity.

UI Rendering Pipeline

Flutter’s rendering pipeline mirrors React’s concepts with three core abstractions: Widget (declarative UI description), Element (instantiated mutable object, similar to Virtual DOM), and RenderObject (responsible for layout, paint, and compositing).

The pipeline consists of:

Layout – depth‑first traversal to compute size and position.

Paint – drawing each node onto layers.

Composite – merging layers into a scene.

Flutter introduces Relayout Boundary and Repaint Boundary to limit the scope of layout and repaint operations, improving performance by isolating changes.

Widget Lifecycle

Creation : constructor → initState → didChangeDependencies → build.

Update : triggered by setState, didChangeDependencies, or didUpdateWidget, leading to rebuild.

Destruction : deactivate (temporary removal) → dispose (final cleanup).

App Lifecycle

State transitions are logged as:

Foreground → background:

AppLifecycleState.resumed → AppLifecycleState.inactive → AppLifecycleState.paused

Background → foreground:

AppLifecycleState.paused → AppLifecycleState.inactive → AppLifecycleState.resumed

Flutter to Web

Flutter can be compiled to Web using the Flutter‑to‑Web toolchain. While still experimental for production, it demonstrates the ability to render UI via Canvas and DOM, with Dart compiled to JavaScript. Certain platform‑specific features (e.g., local storage, native networking) must be adapted.

References

Flutter official site: https://flutter.dev

Flutter Chinese community: https://flutterchina.club

Flutter book: https://book.flutterchina.club

Technical blogs: https://www.yuque.com/xytech/flutter