Flutter 学习路线

这张路线适合谁

前置知识一句话说死:会任意一门主流语言(变量、函数、类、异步的概念清楚),会用命令行装东西,就能上路。Dart 不需要先学——路线里按需补,站内《Dart 语法要点》就是为此准备的。完全零编程基础的话,先去把任何一门语言的入门课过一遍再来,这条路线救不了零基础。时长口径:每天 1-2 小时业余学习,五个阶段合计 6-9 周。已经在写 React Native、Kotlin 或 Swift 的读者有捷径,直接拉到下面的对照节。

总览

阶段 目标 阶段产出 预估时长
一、工具链 跑通工程并理解 flutter 命令在干什么 doctor 全绿 + 模拟器里跑起官方计数器 2-3 天
二、语言与框架地基 Dart 核心语法 + Widget 心智模型过手 改造计数器为多页面待办雏形 2-3 周
三、查阅能力 建立”知道去哪查”的索引 自己的踩坑笔记十条 与阶段二并行
四、本地实战 独立完成状态、持久化、主题三个决策 日常真在用的本地优先待办应用 1-2 周
五、走向真机 构建签名产物,理解发布链路 装进自己手机的 release 包 1-2 周

这条路线的骨架就是本站 Flutter 系列的六篇里的五篇(第六篇就是本文),阶段产出全部是”做出一个小东西”,不是”看完了什么”。

阶段一:工具链(2-3 天)

学什么:Flutter SDK 与 Dart SDK 的关系、Android 工具链(JDK/Android SDK/模拟器)与 Xcode(仅 macOS)各自的坑位、flutter doctor 逐项排查、真机调试怎么开。资源就一篇:《Flutter 环境搭建与工具链》,照着做一遍,外部资源不需要——这个阶段的价值在动手,不在收藏教程。

产出与验收:doctor 全绿,模拟器与真机各跑起一次计数器。常见卡点两个:Windows 上 Android 许可协议没签(flutter doctor --android-licenses 过一遍);代理网络拉不动 SDK 组件,配环境变量走镜像,环境篇有现成做法。

阶段二:语言与框架地基(2-3 周)

这是整条路线最重的阶段,慢就是快。四组概念按这个顺序过,顺序本身是教学设计:

概念组 包含什么 为什么按这个顺序
Dart 最小集 类型与空安全、函数与可选参数、类与 mixin、Future 与 async/await Widget 报错信息里一半是语言错误,语言不熟时排错是双重负担
Widget 心智 Widget 是不可变配置、StatelessWidget/StatefulWidget、build 方法 Flutter 的一切 UI 都压在”配置树重建”这一个机制上,先立心智再背 API
布局与滚动 Row/Column/Stack、约束传递、ListView.builder 会布局才能把想法落成界面;滚动是移动端 UI 的主战场
导航与状态 Navigator 路由、setState、表单输入 放最后:多页面与状态共享是前三组的地基上才盖得起的楼

资源两篇:《第一个 Flutter 应用》把最小闭环走一遍,《Dart 语法要点》当字典随用随查。外部资源给一个:官方文档的 Widget 目录,布局阶段当图鉴翻,其他教程不用再加——加得越多,练习时间越少。

产出与验收:把计数器改造成待办雏形——两个页面(列表页 + 输入页)、能增能删、勾选状态能保持。验收标准:能对别人讲清”我点了一下按钮,屏幕为什么变了”(答案里要出现 build 与 setState,背不出来就回去补 Widget 心智)。

常见卡点两个。setState 之后界面不刷新:多半是在异步回调里改的是副本,或 Widget 树里用了 const 挡住重建——对照语法要点篇的空安全与引用语义读一遍。布局溢出黄黑条:约束传递没理解,Row/Column 里塞了不定宽内容,回去把”父约束子”那节读两遍。

阶段三:查阅能力(与阶段二并行)

学什么:不是读教程,是建立”遇到问题先查哪”的索引。资源:《Flutter 基础知识参考字典》,按”场景 → API → 坑”组织。产出与验收:自己的踩坑笔记十条,格式照字典的三列来。这条路线走完之后,这份按你的错误史排序的笔记,价值会超过任何教程。

阶段四:本地实战(1-2 周)

学什么:把语法变成架构决策——状态怎么管(setState/Provider/Riverpod 何时演进)、数据存哪里(sqflite/shared_preferences/drift 的边界)、主题与暗色怎么做、验收怎么测。资源:《用 Flutter 做一个本地优先的待办应用》,跟着做完后必须脱离文章做一个变体(读书清单、记账本),否则决策链还是作者的不是你的。

产出与验收:一个自己日常真在用的本地工具。验收标准照实战篇的表来:飞行模式可用、杀进程数据不丢、主题记忆、迁移安全——每一条都带怎么测。常见卡点:用热重载验证持久化——热重载保留 State,测出来的是内存不是磁盘,这个坑的完整解释在实战篇第六节。

阶段五:走向真机(1-2 周)

学什么:debug 与 release 的差别(为什么 release 才是真实性能)、Android 签名(keystore 生成与 gradle 配置)、iOS 证书与设备描述文件(仅 Apple 生态)、构建产物结构。这个阶段站内暂无独立成篇,以官方文档的构建发布章节为准,官方这块的中文文档质量够用。产物结构值得花半天:知道 APK/IPA 里装的是什么,将来做包体瘦身、资源裁剪才知道从哪下手。产出与验收:一个签名的 release 包,装进自己手机,日用一周不掉链子——能日用,前面四个阶段才算闭环;顺手把 keystore 备份进密码管理器,丢 keystore 等于丢掉应用的升级权,这是每个平台都有新人踩的坑。

移动端其他路线的对照承接

本站移动端已经有三条成体系的路线,和 Flutter 不是竞争关系,是同一块地盘的三种打法:

维度 Flutter React Native Kotlin / Compose Swift / SwiftUI
语言 Dart JavaScript / TypeScript Kotlin Swift
渲染方式 自绘引擎(iOS 端已默认 Impeller,Android 端可选开启) 桥接系统原生控件 系统原生渲染 系统原生渲染
双端成本 一套代码两端一致 一套代码,观感贴各端 深耕 Android,iOS 另写 深耕 Apple 平台
什么时候更优 要品牌 UI 高度一致、快速双端交付 团队是 React 底子,复用 Web 心智 要第一时间吃 Android 新能力 要 iOS 级体验与系统能力

已经写过其中一条的读者学 Flutter 是降维打击:声明式 UI、组件状态、列表按需渲染这些心智全部平移,重点只补 Dart 与自绘渲染两块。三条路线本站均有专文:React Native 学习路线、Kotlin / Compose 学习路线、Swift / SwiftUI 学习路线。

避坑清单

五条全是常见反模式,每一条的代价都写在后面——判断标准很简单:代价是否发生在你还没写出任何东西的时候。

  • 不要跳过 Dart 直接写 Flutter。代价是每个 Widget 报错里都叠着一层语言错误,空安全、Future、mixin 分不清的时候,排错时间翻倍,最后误判为”Flutter 难学”。
  • 不要把”Widget 是不可变配置”当口号背。这个心智没建立,所有”为什么界面不刷新”都是玄学;建立了,setState 与重建范围就是自然推论。阶段二宁可慢一周。
  • 不要第一个项目就纠结状态管理选型。代价是一周耗在 Provider/Riverpod/Bloc 的横评文章里,一行界面没写出来。先 setState 写到痛,痛点会告诉你该上什么——实战篇整篇就在讲这条演进线。
  • 不要在低配电脑上同时开模拟器、IDE 和浏览器调试。内存耗尽整台机器卡成幻灯片,然后误以为是 Flutter 卡。开发用真机(USB/WiFi 调试),模拟器按需再开。
  • 不要用 debug 模式的帧率判断性能。debug 带大量检查,帧时间天然不可信;要看性能用 --profile 模式,这四个词在实战篇性能节有展开。

学完之后

这条路线的终点是一个你能日用、敢给别人装的本地应用。再往前走,三个方向按兴趣挑:状态管理与架构深入(Riverpod 生态)、平台通道(Platform Channel,把原生能力桥给 Dart 用,对照 RN 的原生模块概念)、以及给应用配后端——要自托管又想省内存的话,本站热榜聚合系列那套”小机全限额”的打法可以直接抄。

版本核实(撰写时检索,2024-05-20):当前 Flutter 稳定版为 3.22 系列(2024-05-14 发布,配套 Dart 3.4;本文内容在 3.19 上同样适用);Impeller 目前在 iOS 端默认、Android 端可选开启;Riverpod 当前稳定系列为 2.x(最新 2.5)。各阶段涉及的命令与 API 均不钉版本号,以 docs.flutter.dev 与 pub.dev 当前文档为准。

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇