Flutter 学习路线

从零基础到独立开发，系统化学习 Flutter 跨平台应用开发

12
核心模块
80+
知识点
6
实战项目
3
阶段周期（月）
🗺️

学习路线总览

从环境搭建到独立交付，分阶段掌握 Flutter 全栈能力

第 1 阶段 · 第 1-2 周
Dart 语言基础
掌握 Dart 语法、类型系统、异步编程（Future/Stream）、集合操作，为 Flutter 开发打下根基
第 2 阶段 · 第 3-4 周
Flutter 基础与 UI 开发
理解 Widget 树、布局系统、Material / Cupertino 组件，能完成基础页面搭建
第 3 阶段 · 第 5-6 周
状态管理与路由
掌握 setState、Provider、Riverpod 等状态方案，学会声明式路由与页面跳转
第 4 阶段 · 第 7-8 周
网络请求与数据持久化
使用 Dio / http 进行 API 调用，集成 SQLite / Hive / SharedPreferences 本地存储
第 5 阶段 · 第 9-10 周
进阶技能
动画系统、Platform Channel、自定义绘制、性能优化与国际化
第 6 阶段 · 第 11-12 周
架构与工程化实战
应用 MVVM / Clean Architecture，CI/CD 集成，完成完整项目上架
🎯

Dart 语言基础

Flutter 的编程语言，先掌握 Dart 才能写好 Flutter

进入学习
语法基础 入门
  • 变量声明：var、final、const、late
  • 基本类型：int、double、String、bool、List、Map、Set
  • 控制流：if/else、switch、for、while
  • 函数：箭头函数、可选参数、命名参数
  • 字符串插值 'Hello, $name'
  • 空安全（Null Safety）：?、!、??、?.`
面向对象编程 入门
  • 类与构造函数（命名构造函数、工厂构造函数）
  • 继承 extends 与多态
  • 抽象类 abstract 与接口 implements
  • Mixin 混入 with
  • 泛型 List<T>、泛型约束
  • 枚举增强（Enhanced Enums）
异步编程 重要
  • Future 与 async/await
  • Stream 与 StreamController
  • Isolate 多线程处理
  • 异步生成器 async* / yield
  • Completer 高级用法
  • 并发控制：Future.wait、Future.any
异步编程是 Flutter 开发的核心，务必熟练掌握
高级特性 进阶
  • 扩展方法 extension on String
  • 模式匹配（Pattern Matching）与 Records
  • Sealed Class 密封类
  • 集合操作：map / where / reduce / fold
  • 元数据注解 @override、自定义注解
  • 代码生成基础（build_runner）
🚀

Flutter 基础入门

理解 Flutter 框架核心概念，搭建开发环境

进入学习
环境搭建 入门
  • 安装 Flutter SDK（推荐 FVM 管理版本）
  • 配置 Android Studio / VS Code
  • 运行 flutter doctor 检查环境
  • 创建第一个项目 flutter create
  • 真机调试与模拟器使用
  • Hot Reload 与 Hot Restart 区别
核心概念 重要
  • 一切皆 Widget 的设计理念
  • Widget Tree → Element Tree → RenderObject Tree
  • StatelessWidget vs StatefulWidget
  • Widget 生命周期（initState / dispose 等）
  • BuildContext 的作用与传递
  • Key 的使用场景（ValueKey / GlobalKey）
理解三棵树是深入 Flutter 的关键，建议结合源码学习
项目结构 入门
  • lib/ 主代码目录与入口 main.dart
  • pubspec.yaml 依赖管理
  • android/ 与 ios/ 平台目录
  • test/ 测试目录
  • assets/ 静态资源管理
  • 包管理 pub.dev 与版本约束
🧩

核心 Widget 与布局

掌握常用组件与布局系统，构建精美 UI

进入学习
基础组件
  • Text / RichText 文本与富文本
  • Image 图片加载（asset / network / file）
  • Icon / IconButton 图标
  • ElevatedButton / TextButton / OutlinedButton
  • TextField / TextFormField 输入框
  • Container / DecoratedBox / Card
布局系统 重要
  • Row / Column 线性布局
  • Stack / Positioned 层叠布局
  • Flex / Expanded / Flexible 弹性布局
  • Wrap 流式布局
  • LayoutBuilder / MediaQuery 响应式
  • 约束传递模型：constraints go down, sizes go up
牢记布局约束规则，是解决 UI 溢出问题的关键
列表与滚动
  • ListView / ListView.builder 列表
  • GridView 网格布局
  • CustomScrollView / Sliver 系列
  • SingleChildScrollView 单子滚动
  • PageView 分页视图
  • RefreshIndicator 下拉刷新
Material & Cupertino
  • Scaffold / AppBar / Drawer
  • BottomNavigationBar / TabBar
  • AlertDialog / BottomSheet / SnackBar
  • Theme / ThemeData 主题定制
  • CupertinoApp iOS 风格组件
  • 自适应平台组件 .adaptive
⚡

状态管理

Flutter 开发的核心难题，选择合适的状态管理方案

进入学习
内置方案 入门
  • setState 局部状态管理
  • InheritedWidget 数据向下传递
  • ValueNotifier / ChangeNotifier
  • ValueListenableBuilder 精准重建
  • 状态提升（Lifting State Up）
  • 了解何时需要引入第三方方案
Provider 推荐
  • ChangeNotifierProvider 基础用法
  • Consumer / Selector 精准监听
  • MultiProvider 多 Provider 组合
  • ProxyProvider 依赖注入
  • FutureProvider / StreamProvider
  • Provider 最佳实践与 anti-patterns
Riverpod 推荐
  • Provider / StateProvider / StateNotifierProvider
  • ref.watch / ref.read / ref.listen
  • AsyncValue 异步状态处理
  • 自动 dispose 与 keepAlive
  • Family 与 autoDispose 修饰符
  • Riverpod Generator (注解式)
Riverpod 是 Provider 的进化版，新项目推荐使用
其他方案
  • BLoC / Cubit — 事件驱动、大型项目
  • GetX — 轻量全家桶（路由+状态+依赖注入）
  • Redux — 单一数据源、时间旅行调试
  • MobX — 响应式、自动追踪依赖
  • Signals — 新兴方案，细粒度响应式
  • 根据团队和项目规模选择方案
🌐

网络请求与数据持久化

与后端交互、本地数据存储

进入学习
网络请求
  • http 包 — 轻量 HTTP 客户端
  • Dio — 拦截器、取消请求、文件上传
  • JSON 序列化：json_serializable + freezed
  • RESTful API 封装与错误处理
  • WebSocket 实时通信
  • GraphQL 集成（graphql_flutter）
本地存储
  • SharedPreferences 键值对存储
  • sqflite / drift SQLite 数据库
  • Hive / Isar NoSQL 数据库
  • flutter_secure_storage 安全存储
  • 文件读写 path_provider
  • 缓存策略与离线优先设计
Firebase 集成 热门
  • Firebase Auth 用户认证
  • Cloud Firestore 实时数据库
  • Firebase Storage 文件存储
  • Firebase Messaging 推送通知
  • Firebase Crashlytics 崩溃收集
  • Firebase Analytics 数据分析
🔥

进阶技能

动画、原生交互、性能优化等高级能力

进入学习
动画系统 进阶
  • 隐式动画：AnimatedContainer / AnimatedOpacity
  • 显式动画：AnimationController + Tween
  • Hero 共享元素过渡
  • AnimatedBuilder / AnimatedWidget
  • 交错动画 Staggered Animation
  • 物理动画 SpringSimulation
原生交互
  • Platform Channel（Method / Event / Basic）
  • FFI 调用 C/C++ 代码
  • Plugin 开发与发布
  • PlatformView 嵌入原生视图
  • 权限管理 permission_handler
  • 调用相机、GPS、蓝牙等硬件
自定义绘制
  • CustomPaint / Canvas API
  • 绘制路径、贝塞尔曲线
  • ClipPath 裁剪与遮罩
  • Shader / ImageFilter 滤镜
  • 自定义 RenderObject
  • CustomPainter 性能优化（repaint boundary）
性能优化 进阶
  • DevTools 性能面板与 Widget Inspector
  • 减少不必要的 rebuild（const Widget）
  • RepaintBoundary 分层渲染
  • 图片缓存与懒加载 cached_network_image
  • 列表优化：ListView.builder + itemExtent
  • Isolate 隔离计算密集型任务
Profile 模式下分析性能，不要在 Debug 模式下测试
🏗️

架构模式

构建可维护、可扩展的应用架构

进入学习
架构选型
  • MVVM — Model-View-ViewModel，最常用
  • Clean Architecture — 分层解耦，大型项目
  • MVC — 简单项目快速开发
  • Repository Pattern — 数据源抽象
  • 依赖注入：get_it / injectable
  • 项目分层：presentation / domain / data
代码质量
  • 代码规范：flutter_lints / very_good_analysis
  • 单元测试 test
  • Widget 测试 flutter_test
  • 集成测试 integration_test
  • Mock 与 Fake：mockito / mocktail
  • 代码覆盖率与测试策略
⚙️

工程化与发布

从开发到上架的完整工程化流程

进入学习
多环境与构建
  • Flavor / 多环境配置（dev / staging / prod）
  • --dart-define 编译时变量
  • 代码混淆 --obfuscate
  • App Bundle / IPA 打包
  • 分渠道构建与版本号管理
  • Flutter Web / Desktop 构建
CI/CD 与发布
  • GitHub Actions / GitLab CI / Codemagic
  • Fastlane 自动化发布
  • Google Play Console 上架流程
  • App Store Connect 上架流程
  • 热更新方案（Shorebird）
  • 国际化 intl / easy_localization
💡

实战项目建议

从简到难，通过项目串联知识点

进入学习
🟢 计算器 App — 入门练手

技能点：布局、状态管理、事件处理

  • 使用 GridView 布局按钮
  • 用 setState 管理计算状态
  • 实现加减乘除、清零、退格功能
  • 支持连续运算与小数点处理
🟢 Todo 待办应用 — 基础 CRUD

技能点：列表、本地存储、状态管理

  • 增删改查 + 完成/未完成切换
  • 使用 Hive 或 SharedPreferences 持久化
  • 引入 Provider 管理全局状态
  • 添加分类筛选与搜索功能
🟡 天气预报 App — 网络请求

技能点：HTTP 请求、JSON 解析、动画

  • 调用天气 API（如 OpenWeatherMap）
  • 使用 Dio + freezed 请求与序列化
  • GPS 定位获取当前城市天气
  • 天气动画效果（Lottie / CustomPaint）
  • 支持多城市切换与缓存
🟡 电商 App — 综合实战

技能点：架构设计、状态管理、路由、支付

  • 商品列表、详情、购物车、订单流程
  • 使用 Riverpod + go_router
  • Clean Architecture 分层设计
  • 用户登录注册 + Token 管理
  • 搜索、筛选、分页加载
🔴 社交聊天 App — 高级挑战

技能点：实时通信、推送、多媒体

  • WebSocket / Firebase 实时消息
  • 图片、语音消息发送
  • 消息本地缓存 + 离线支持
  • 推送通知 firebase_messaging
  • 联系人列表、群聊功能
🔴 完整上架项目 — 全流程

技能点：全栈能力，从 0 到商店上架

  • 选择一个你真正会用的 App 作为项目
  • 完整 UI 设计、交互方案
  • 后端 API 对接或 BaaS 集成
  • 多语言、深色模式、无障碍适配
  • CI/CD 自动化 + App Store / Google Play 上架
  • 崩溃收集、数据分析、用户反馈
📚

学习资源

精选官方文档、教程与社区资源

📘

Flutter 官方文档

最权威的学习资料，Cookbook 非常实用
📗

Dart 官方文档

语言规范、API 参考、代码风格指南
📦

pub.dev 包仓库

Flutter/Dart 官方包管理平台
🍳

Flutter Cookbook

常见场景的实用代码示例
🧪

Flutter Samples

官方示例项目集合
🎬

Flutter YouTube

Widget of the Week 等官方视频系列
⭐

Awesome Flutter

社区整理的 Flutter 资源合集
📖

Flutter by Example

通过示例学习 Flutter 的教程网站
✅

学习进度清单

勾选已掌握的内容，跟踪学习进度

第 1 阶段：Dart 基础
  • 掌握变量、类型与空安全
  • 掌握函数、类与面向对象
  • 掌握 Future / async / await
  • 掌握 Stream 基本用法
  • 掌握集合操作（map/where/reduce）
第 2 阶段：Flutter 基础
  • 环境搭建 & 第一个 App 运行
  • 理解 Widget 树与生命周期
  • 掌握 Row / Column / Stack 布局
  • 使用 ListView 构建列表
  • 完成计算器项目
第 3 阶段：状态 & 路由
  • 理解 setState 与状态提升
  • 掌握 Provider 基本用法
  • 学会 go_router 路由
  • 完成 Todo 应用
  • 了解 Riverpod 或 BLoC
第 4 阶段：网络 & 进阶
  • 使用 Dio 调用 REST API
  • JSON 序列化与数据模型
  • 本地数据库集成
  • 完成天气 App 项目
  • 学会隐式/显式动画
第 5 阶段：架构 & 实战
  • 学习 Clean Architecture 分层
  • 编写单元测试 & Widget 测试
  • 掌握 CI/CD 构建发布
  • 完成电商 App 项目
  • 独立完成一个上架 App

Happy Fluttering! 💙

持续学习，持续进步 · 建议配合官方文档实践