老司机教你阅读Flutter官方文档

【前言】在 2017年的谷歌 I/O大会上，Google推出了Flutter ---- 一款新的用于创建移动应用的开源库。在2018年初世界移动大会上发布了 Flutter的第一个Beta版本，2018年5月的 I/O大会上更新到了Beta3版本，向正式版又迈进了一步。一时间业内对Flutter的关注度越来越高。谷歌官方也提供了Flutter官方文档 https://flutter.io/docs/  

思考几个问题：

    ●  另外全篇是英文的，该如何去查看，英文不好怎么办？

    ●  这么多内容，内容之间又有相互关联，到底如何学习才是最有效的呢？

    ●  有没有比较好的中文文档让新手可以直接上手学习的呢？

    

很多人可能会有以上这些疑问，没关系，下面我就针对这几个问题，给出一些独特的见解，希望可以帮助大家快速掌握Flutter官方文档的学习方式，让大家在学习Flutter的路上一马平川，让大家少走弯路，快速成长。

1、英文不可怕，可怕的是没有正确利用工具。

程序猿必备谷歌浏览器就是一个很好的工具，当你打开英文网页的时候，会自动帮你翻译成中文，虽然翻译有一些不准确的地方，但是至少减少了你手动翻译的时间。部分句子如果不通顺的地方建议复制到谷歌翻译手动翻译一下。

多用几个不同的翻译工具，可以减少翻译的误差。比如你同时打开谷歌翻译、百度翻译、有道翻译，通过这三者之间的对比，你会发现翻译误差会逐渐减少。这样做比较耗费时间，适用于少量英文句子需要翻译的情况去使用。

2、来说说我们的正题Flutter官网文档那么多内容如何去看？

建议大家不要从前往后去看，应该有选择的去看。因为官网的讲述顺序不一定是从简单到复杂的，它是一个混合在一起讲述某一个内容的。

01

从安装开始说起

在最Flutter官方文档一开始就是Get Started，前面3点都是讲的如何安装工具，这些都可以按照官网流程走。

第4点就教你如何引入开源包，添加有状态组件，创建无限滚动的ListView。这一点说实话，对于那些不了解有状态组件和无状态组件的人来说，理解起来有些吃力，根本不知道讲什么。就算照着写一遍，还是不理解为什么这么写。

第5点是了解更多，这里面连接了很多相关的文档。

【建议】“Get Started” 这一章节的前面的3点提到的安装可以先了解，把工具装起来，至于第4点第5点不推荐现在去看，应该从基础组件去了解再回头来看效果更好。

02

然后我们应该先了解原理。

我们把目光转移到底下，找到More details（更多详情），首先看Technical Overview（技术概述），了解一下Flutter是一个什么样的东西。

然后再看FAQ（问答），看看Flutter的使用需要注意哪些问题？提前把一些疑问都了解一下。

然后我们把目光放到中间的Build UIs（构建UI），现在需要关注的是与你所从事的岗位有关的文档，因为很多开发者在接触Flutter之前可能从事的其他岗位的，比如Web开发，Android开发，iOS开发，.net开发等，所以有必要了解一下：如果你之前是Web开发者，建议你看看Flutter for Web devs（给Web开发者看的文档），有哪些注意事项和变化，文档上都写的很清楚，帮助你快速熟悉Flutter，从Web开发转移到Flutter开发。其他岗位的也是一样的，都有对应的文档帮你快速熟悉和上手Flutter：比如Android,iOS,React Native，以及Xamarin.Forms开发者。

03

看看构建UI有关的内容

我们把目光切换到中间的Build UIs（构建UI），Build layouts -Tutorial（构建布局教程），看完之后你基本对静态布局有个大致了解了。

然后可以了解一下其他的UI布局，Widget catalog（组件目录），这里面是常用的组件分类，里面有Material Design的组件，也有Cupertino风格的组件，也有其他分类的组件，可以大概了解一下用法，基本上熟悉了一个组件的用法，其他的就差不多了。组件太多了，不可能每个都记得住，当我们要用到的某个组件的时候再来这里寻找组件。这个页面上方有一个链接 https://flutter.io/widgets/widgetindex/，意思是查看所有组件的索引，它是根据首字母顺序排列的，点击每一个组件进去就是详细的API文档。有兴趣的话可以去研究研究。

接下来就依次点击Gestures（手势）、Animations（动画）、Box constraints（框约束）、Assets and images（资产和图像）、Internationalization（国际化）、Accessibility（无障碍）这些文档进行阅读。

最后我们再来看如何构建可交互的UI，我们找到中间的Build UIs（构建UI）标题下面的Add interactivity Tutorial（添加交互性--教程），这篇文档教你如何构建可交互的UI，然后我们再去看

Tour the framework（框架之旅），可以查看如何从一个静态页面到可交互页面的完整的开发过程。现在就可以很清楚的了解页面如何构建的了。

04

看看问题描述方案以及示例代码。

我们把目光切换到中间的Build UIs（构建UI），我们看一下Cookbook（菜单），Simple catalog（示例目录），Codelabs（代码库）。

Cookbook（菜单）里面描述了编写Flutter中常见的问题。

Simple catalog（示例目录） 展示了使用Flutter构建常见的一些UI功能模块。

Codelabs（代码库）主要是一些构建UI的示例教程。

05

看看测试以及原生交互。

关于测试这一部分，在Developments and tools（开发工具）这一章节下面有详细的讲解，我们可以根据实际情况去看其中的章节。比如Test your app讲解了如何进行单元测试，Inspect your api描述了如何使用Flutter Inspector工具对组件进行可视化的检测。还有Android和iOS的构建和发布的文档，有这方面需要的小伙伴们可以去看看。

Use Devices and SDK Apis（使用设备和SDK API）这一章节讲解了如何使用开源包、开发开源包、使用特定平台代码以及json解析序列化这4个方面。关于Flutter和原生交互，我们只需要关注Platform-specific code（特定平台的代码）这一篇文档就可以了，详细描述了Flutter如何使用原生API，学会之后你也可以把原生的三方sdk进行封装，然后使用Flutter就可以直接调用了。

3、有没有好的中文文档可以直接学习的呢？

中文文档是有的，不过有一些不是最新的；有些文档可能是翻译的最新的，但是又不全面。

下面推荐几个文档，仅供参考：

    ● Flutter中文官网 https://flutter-io.cn/  最新出来的，资料齐全，视频、博客、文档、分享资料都有，还可以直接打开英文官网。

    ● Flutter中文版  http://doc-flutter-dev.cn/  网友自制的中文网，翻译内容比较新，但是缺点是翻译的不是很完整。

    ●  https://flutterchina.club/  网友自制的中文网，翻译的很完整，但是内容比较老。

    ●  另外关于Dart的中文网，我也给大家推荐一个。http://dart.goodev.org/  这是翻译自Dart官网的一个中文网，内容页比较新，可以去看看。

【Tips】建议大家多看看英文文档，中文文档毕竟更新的比较慢，可能有些翻译有偏差。英文文档是最新的最完整的。多读英文文档对开发来说更有帮助，还能提高英语阅读水平。何乐而不为呢？

    在这里也欢迎各位多提意见。如果大家有什么意见或建议欢迎在公众号【互动反馈】--> 【意见反馈】里面留言，感谢大家的支持。

长按二维码关注，随时获取技术干货！