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）
与 http-protocol-essentials	http/dio 包	fetch 原生
构建	flutter build	frontend-toolchain-essentials

后端仍可以是 Spring Boot REST；Flutter 客户端消费同一 JSON API。

何时学 Flutter

值得：移动端为主产品、追求一致 UI、团队接受 Dart。
暂缓：已有 Next/React 全栈、只需「能安装的 Web」——先 cpf-pwa 与 cpf-mobile。

练习

• 对照 React 函数组件，写三条 Flutter Widget 相似点与不同点
• 浏览 /roadmaps/frontend 中 flutter 节点前后依赖
• 安装 Flutter SDK，跑通 flutter create 与 flutter run（模拟器或 Chrome）

小结

Flutter = Dart + 自绘跨平台 UI；强在移动一致性与性能，弱在与现有 Web 组件直接复用。 下一课 Ionic：Web 技术进移动壳。