Flutter 入门之开篇

发表于 更新于 评论： 阅读次数：

开篇。这是 Flutter 入门系列的第一篇，列出了最近收集的学习资料。Flutter 和 Dart 都在快速更新中，所以学习资料尽可能以官方为准，以保证权威和及时更新。

[TOC]

俗话说，兵欲善其事必先利其器。学习 Dart 前如何”利器”呢？我认为无非这几个方面：

  • 优秀的学习资料
  • 称手的开发工具
  • 反复实践和练习

具体见下图：

-w724

学习资料

网站和公众号

官网通常是最权威的学习资料来源，所以强烈推荐优先看 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