Flutter 概览

Flutter 用 Dart 编写 UI，通过 Skia/Impeller 自绘 在 iOS、Android、Web、Desktop 上保持一致像素——不是 WebView 套壳。路线图 flutter 节点指向这类 跨平台原生渲染 路线；与「Web 技术栈移动壳」的 Ionic 形成对照。

学习目标

• 理解 Widget 树、声明式 UI 与 React 的异同
• 知道 Flutter Web/Desktop 与移动端的定位差异
• 评估团队是否要引入 Dart 生态

核心概念

概念	说明
Widget	一切皆组件（布局、文本、手势）
Element / RenderObject	Widget 配置 → 实际渲染树（类比 React fiber 层）
State	StatefulWidget vs StatelessWidget
Hot Reload	开发时快速迭代 UI

极简示例：

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: TrackListScreen()));

class TrackListScreen extends StatelessWidget {
  const TrackListScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Tracks')),
      body: ListView(
        children: const [
          ListTile(title: Text('react-essentials')),
          ListTile(title: Text('html-css-essentials')),
        ],
      ),
    );
  }
}

react-essentials 读者会发现：声明式 + 组件化 思路相通，语法与布局模型不同（无 CSS 文件，用 Widget 属性与 Theme）。

平台覆盖

Mobile（iOS/Android） → Flutter 主战场，体验最接近「一套代码多端」
Web                   → 可用，SEO/首包体积需单独优化
Desktop               → 官方支持，与 Electron/Tauri 竞争场景

若团队 主栈是 React/Next，为 CodeRoadMap 再维护一套 Flutter 成本高——除非产品强需求原生滚动/动画或统一移动端 UX。

与 Web 栈的关系

维度	Flutter	Web + PWA / Ionic
语言	Dart	JS/TS
UI	自绘 Widget	DOM / Web Components
复用现有 React 组件	否	是（Ionic/Capacitor）
与