本文主要介绍

学习资料

网站和公众号

官网通常是最权威的学习资料来源,所以强烈推荐优先看 Flutter 官网。Flutter 基于 Dart 平台,所以了解和熟悉 Dart 是非常必要的。官方还会不定期在 medium 发一些技术文章,介绍 Flutter 的新特性,建议也关注。

考虑到 Flutter 官网内容是英文,英文不好的话浏览起来会比较吃力的,也可退而求其次看中文网站:

中文内容的好处,

  • 消除了语言障碍,方便快速浏览学习
  • 中文网站通常在国内,打开速度可能快得多

但也要注意其不足:

  • 访问可能不稳定 (通常不由官方支持,说不定哪天就没了)
  • 某些内容相当不准确
    • 一些新术语很难翻译
    • 大量内容由机器翻译,不靠谱
  • 内容更新不及时 (Flutter 和 Dart 都在快速更新中)

谷歌开发者公众号是 Google 中国官方账号,汇集 Android、Flutter、Chrome OS 以及 AI 等开发技术。2019 年以及随着 Flutter 的爆发,这个公众号上关于 Flutter 的内容明显增多,建议关注。

-w187

谷歌开发者公众号上曾推出过几期 《Flutter 您需要知道的知识点》,这里整理如下:

(谷歌知道大家学不过来,所以将 Flutter 重点知识做成了卡片,让大家好时不时复习巩固一下,早日写出优秀的 Flutter 应用)

另外,谷歌开发者公众号上的 Flutter 相关的内容汇总在 开发专栏 > 重点知识巩固 > UI框架

代码

官方代码

Talk is cheap, show me the code

如果你的学习习惯是多看代码,那么首推官方示例。官方示例分布在不同的仓库中:

不要小看 官方 examples,它使用最简短的代码演示了最丰富的基础功能,包括:

  • Hello, world 最经典的 “hello, world”,以及一个阿拉伯文版本的 “hello, world” (国际化?Flutter 能行!)
  • Image List 流行的网络图片列表界面 (这个 demo 还顺手写了个简单的 HTTP Sever)
  • Flutter gallery 演示了各种 Widget 的用法
  • Platform Channel 演示了 Flutter 如何跟 Android/iOS 交互

官方 samples 则演示了 Flutter 高级功能和最佳实践:

  • Animations
  • Isolate Example
  • Provider 状态管理

官方例子的优势是权威、内容丰富,更新及时,是我们学习的好资料。它的不足则在于往往非常理想化、代码过于”干净”,实际应用常遇到机型兼容问题、产品需求等情况导致”恶心”的代码,例子可以参考,遇到的坑还是要自己一点点填。

第三方代码

我们的大脑理解抽象内容很吃力,我们喜欢有形的事物。当事物是直接的而且是有形的时候,就显得容易理解。 乌尔里希·伯泽尔《有效学习》

很多第三方代码有类似这样的功能,能边看代码边看效果,有助于快速理解 Flutter UI。

视频和书籍

如果你的学习习惯是看视频,推荐如下几个视频:

个人感觉通过视频来学习的缺点是比较费时间,时不时得快进,也很难快速抓住重点,当然 Flutter Widget of the Week 除外 (它已经帮你划好重点)

如果你的学习习惯是看书,推荐如下几本书:

  • Flutter 实战

    由浅入深的介绍了 Flutter 技术和开发流程。该书包含不仅包含大量示例、图片,还有配套的示例源码,可帮助读者循序渐进的掌握 Flutter 开发技术。

    • 入门篇(第1章~第7章)- 常用的组件以及布局
    • 进阶篇(第8章~第14章)- 事件机制、动画、自定义组件、文件和网络、插件、国际化以及Flutter核心原理
    • 实例篇 (第15章)- 实现一个简版的 Github APP

如果你还知道其他不错的视频或书籍资源,欢迎在评论中分享出来。

其他

这里是几篇不错的文章:

开发工具

DartPad 是学习 Dart 语法和尝试 Dart 语言特性的最佳方式,还可以体验 Dart 核心库(除了 dart:io 库和依赖 dart:io 的库)。

VS Code 是一个轻量级编辑器。我使用它没别的原因,Android Studio 强虽强,笔记本性能有限,资源能省则省!

https://dartcode.org/ dart 和 flutter 插件

Android Studio

[TODO]

练习与实践

练习

纸上得来终觉浅,绝知此事要…

Dart cheatsheet codelab | Dart - 这个练习用于快速掌握 Dart 语言特性

  • 默写 demo
  • 实现 freecodecamp 上的练习

除了看例子,还可以跟着 Codelabs 动手

实践

  • [TODO] 集成和构建。关键问题:so 兼容问题
  • 从简单页面入手

为什么要从简单页面入手?

https://medium.com/flutter-community/add-flutter-to-existing-android-ios-app-ae8c4fb1582e

Flutter原理与实践 - 美团技术团队

经验

https://book.flutterchina.club/chapter1/flutter_intro.html