跪拜 Guibai
← All articles
Frontend · Flutter · React.js

A Frontend Developer's Map to Flutter and Cross-Platform Reality

By Wilson王艺谋 ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Frontend developers moving into mobile often underestimate that rendering and native build pipelines are where the analogy to the web breaks. The design-token pipeline is the most practical, high-leverage first step—it is standardized, tooled, and immediately reduces drift between Web and App without forcing a shared component library that would collapse under platform differences.

Summary

The leap from React to Flutter is not a simple API swap. Language syntax, state management, and package management map cleanly—Dart feels familiar, and pub mirrors npm—but the rendering model is a different species. Flutter's Impeller engine draws every pixel on a GPU canvas, unlike the browser's DOM or React Native's bridged native controls. This distinction is the biggest cognitive trap for migrating frontend developers.

Design tokens are the highest-leverage win for cross-platform consistency. The W3C Design Tokens Community Group's 2025.10 format provides a stable, vendor-neutral JSON spec, and tools like Style Dictionary can generate CSS variables, Dart constants, and native XML from a single source. Sharing token values is now a mainstream, standardized practice; sharing UI components across Web and Flutter is not, because their rendering, event, and styling models are fundamentally incompatible.

The real weight of cross-platform work lands in the build and release pipeline. iOS demands a Mac, Xcode, paid developer accounts, and certificate provisioning. Android requires navigating Gradle version matrices and keystore signing. A single developer can realistically unify design tokens and build a moderate app, but long-term store compliance, OS adaptation, and release cadence constitute an independent, ongoing maintenance burden that frontend skills alone do not eliminate.

Takeaways
Flutter and React share a declarative, component-based mental model, and Dart's syntax and async patterns are close enough to TypeScript that 70–80% of frontend muscle memory transfers.
pub.dev is a direct analogue to npm with a pubspec.yaml manifest and semver, but its ecosystem is tens of thousands of packages, not millions—some small utilities will need to be written from scratch.
Design tokens are the cross-platform asset worth sharing; the W3C DTCG 2025.10 format provides a stable JSON spec, and Style Dictionary automates output to CSS, Dart, Swift, and XML.
Sharing UI components between Web and Flutter is not recommended because DOM + CSS and Flutter's widget tree + Impeller engine have incompatible rendering, event, and styling models.
Flutter's Impeller engine, the sole iOS renderer since version 3.44, draws every pixel on a GPU canvas—this self-drawing approach is fundamentally different from React Native's native-control bridging or a WebView.
In a Flutter release build, all Dart code—including dependency packages—is AOT-compiled into ARM machine code and welded into the app binary; nothing is fetched at runtime.
iOS builds require a Mac running Xcode, a paid Apple Developer account ($99/year), and certificate provisioning; CocoaPods is entering read-only maintenance, with Swift Package Manager as the successor.
Android builds run on any OS but demand navigating a compatibility matrix of Gradle, AGP, JDK, and Kotlin versions; Google Play registration is a one-time $25 fee.
One person can realistically unify design tokens and build a moderate app, but long-term dual-platform store compliance, OS adaptation, and release cadence is an independent, continuous maintenance burden.
React Native's New Architecture (Fabric, TurboModules, JSI) is mandatory from version 0.82 onward; Kotlin Multiplatform focuses on sharing business logic while keeping UI native per platform.
Conclusions

The article's central warning—that rendering models cannot be analogized—is a genuinely under-discussed trap. Many frontend developers assume Flutter is 'just React with different syntax' and then hit a wall when layout, painting, and platform channels behave nothing like the DOM.

Standardizing design tokens while explicitly rejecting cross-platform component sharing is a pragmatic, mature stance that cuts against the 'write once, run anywhere' fantasy still sold by some cross-platform tooling vendors.

The Flutter ecosystem's 2024 layoff scare and the Flock fork are presented neutrally, but the fact that the project maintained four stable releases per year afterward is a stronger signal of health than any corporate reassurance.

The iOS build constraint—a Mac is non-negotiable—is framed not as a technical limitation but as a licensing and business reality. This is a cost that no framework can abstract away, and it is often the real blocker for solo developers.

Kotlin Multiplatform's philosophy of sharing logic but not UI is positioned as a legitimate third way, not a weaker compromise. For teams with existing native expertise, it avoids the lowest-common-denominator problem that plagues unified UI frameworks.

Concepts & terms
Design Tokens
Platform-agnostic, named design decisions (e.g., `color.brand.primary`) that store values like colors, spacing, and radii. They are organized into primitive (raw values), semantic (usage-named), and component (context-specific) layers, enabling a single source of truth to generate platform-specific code.
DTCG Format (Design Tokens Community Group)
A stable, vendor-neutral JSON specification released in October 2025 by the W3C Design Tokens Community Group. It defines a standard structure for design tokens using fields like `$value`, `$type`, and `$description`, and is supported by tools like Figma, Style Dictionary, and Tokens Studio.
Style Dictionary
An open-source build tool (originally from Amazon) that transforms a single design-token JSON file into platform-specific outputs—CSS variables, Dart constants, Swift code, and Android XML—enabling a 'define once, generate everywhere' pipeline.
Impeller
Flutter's next-generation rendering engine that replaced Skia. It pre-compiles shaders at build time to eliminate runtime jank, and as of Flutter 3.44 (2026), it is the sole renderer on iOS and the default on Android 10+.
AOT (Ahead-of-Time) Compilation
A compilation strategy where Dart code is translated into native ARM machine code before the app is packaged, rather than at runtime. Flutter uses AOT for release builds (fast startup, stable performance) and JIT during development (enabling hot reload).
Kotlin Multiplatform (KMP)
A cross-platform approach by JetBrains that shares business logic written in Kotlin across iOS and Android, while each platform retains its own native UI layer (Jetpack Compose on Android, SwiftUI on iOS). Compose Multiplatform extends this to optionally share UI via self-drawing on iOS.
Source: juejin.cn ↗ Google Translate ↗ Backup ↗