Flutter 入门

---

前言

以下是一份系统的 Flutter 入门与进阶学习指南，涵盖从基础到高级的核心知识点，并附上学习建议和资源推荐：

一、Flutter 入门篇

1. 环境搭建

• 安装 Flutter SDK（https://flutter.dev）

• 配置 IDE：VS Code（轻量）或 Android Studio（功能全）

• 插件：Flutter、Dart、Pubspec Assist

• 运行 flutter doctor 检查环境

2. Dart 语言基础

• 核心语法：变量、类型（int, String, List, Map）、函数

• 面向对象：类、继承、接口（implements）、混入（mixin）

• 异步编程：Future、async/await、Stream

• 空安全（Null Safety）：?、!、late

3. 第一个 Flutter 应用

• 项目结构：lib/、pubspec.yaml（依赖管理）

• 入口文件：main() 和 runApp()

• 基础组件：MaterialApp、Scaffold、AppBar、Text、Button

• 热重载（Hot Reload）与热重启（Hot Restart）

4. 核心组件与布局

• 常用组件：

• 容器：Container、Padding、Row、Column、Stack

• 列表：ListView、GridView

• 交互：GestureDetector、InkWell

• 布局模型：约束（Constraints）→ 尺寸（Size）→ 布局（Layout）

• 响应式设计：MediaQuery、LayoutBuilder

5. 状态管理（基础）

• StatefulWidget 与 setState()

• 数据传递：InheritedWidget、Theme、Navigator 传参

二、Flutter 进阶篇

1. 深度状态管理

• 推荐方案：

• Provider（官方推荐，易上手）

• Riverpod（Provider 升级版，更安全）

• Bloc / Cubit（适合复杂逻辑）

• GetX（轻量级，集成路由/依赖注入）

• 状态管理原则：业务逻辑与UI分离、不可变数据

2. 路由与导航

• 原生路由：Navigator.push() / pop()

• 命名路由：routes 配置

• 高级路由库：

• go_router（声明式路由，支持深链接）

• AutoRoute（代码生成路由）

3. 网络与数据持久化

• HTTP 请求：dio（强大）或 http（轻量）

• JSON 解析：json_serializable + build_runner

• 本地存储：

• shared_preferences（键值对）

• sqflite（SQLite 数据库）

• hive（高性能 NoSQL）

4. 动画与自定义绘制

• 基础动画：AnimationController、Tween、AnimatedBuilder

• 高级动画：Hero 动画、PageRouteBuilder 转场

• 自定义绘制：CustomPaint 与 Canvas 绘制图形

5. 插件与平台交互

• 使用插件：从 https://pub.dev 安装（如 camera, location）

• 编写自定义插件：

• MethodChannel（Flutter ↔ 原生通信）

• 平台特定代码（Kotlin/Swift）

6. 性能优化

• 关键工具：

• DevTools：性能面板、内存分析

• flutter run --profile（性能模式）

• 优化点：

• 避免 build() 中重复计算

• 使用 const 组件

• 列表优化：ListView.builder + itemExtent

• 减少重绘：RepaintBoundary

7. 测试与调试

• 单元测试：test 包（业务逻辑）

• 组件测试：flutter_test（UI 交互）

• 集成测试：integration_test（全流程）

• 调试技巧：debugPrint、断点、Flutter Inspector

三、高级实战技巧

1. 架构设计

• 流行架构：

• Clean Architecture（分层解耦）

• MVVM（ViewModel + 数据绑定）

• BLoC 分层（Data ↔ Domain ↔ Presentation）

2. 跨平台适配

• 响应式布局：MediaQuery、Flexible、Expanded

• 平台差异处理：
if (Platform.isIOS) { /* iOS 特定代码 */ }

3. 混合开发

• 在现有原生应用中嵌入 Flutter（FlutterFragment / FlutterViewController）

• Flutter 调用原生功能（通过插件）

4. 国际化与无障碍

• 国际化：flutter_localizations + intl 包

• 无障碍：Semantics 组件、屏幕阅读器支持

四、学习资源推荐

1. 官方文档：https://flutter.dev/docs（必看！）

2. 实战课程：
   • 《Flutter 实战·第二版》（开源电子书）

   • Udemy：《The Complete Flutter Development Bootcamp》

3. 社区：
   • GitHub 热门项目（如 https://github.com/flutter/samples）

   • Stack Overflow

   • 国内：掘金、CSDN Flutter 专栏

4. 进阶书籍：
   • 《Flutter in Action》

   • 《Dart Apprentice》

五、学习建议

1. 动手为先：每个知识点都写 Demo（如“TODO 列表”练状态管理）。
2. 阅读源码：查看 Flutter 内置组件（如 MaterialButton）的实现。
3. 参与开源：贡献文档或修复简单 Issue。
4. 关注更新：Flutter 版本迭代快（如 Impeller 渲染引擎、Web3 支持）。