2020年超全的Flutter入门教程 | Flutter

此文项目代码：https://github.com/bei-yang/I-want-to-be-an-architect
码字不易，辛苦点个star，感谢！

引言

此篇文章主要涉及以下内容：

1. 认识 Flutter
2. Flutter的环境搭建
3. Flutter的构成

认识Flutter

什么是Flutter

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码⼀起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。

口号：

Beautiful native apps in record time

里程碑节点

• 2014.10 - Flutter的前身Sky在GitHub上开源
• 2015.10 - 经过一年年的开源，Sky正式改名为Flutter
• Flutter第一次亮相于2015年5月Dart开发者峰会上，初始名字叫做“Sky”，后更名为Flutter，Flutter使用Dart语言开发，Dart是Google于2011年推出的新的计算机编程语言
• 2017.5 - Google I/O正式向外界公布了了Flutter，这个时候Flutter才正式进去大家的视野
• 2018年2月，Flutter推出了第一个Beta版本
• 在2018年12月5日，Flutter1.0版本发布
• 2018.6.21 - Google发布Flutter首个release预览版

• 2019.2 - Flutter1.2发布主要增加对web的支持
• 2019.5.7 - Flutter 也发布了 1.5 版。此版本的最大更新是新加入对 Web 端的支持，即 Flutter for Web。(2019.05.10 Hummingbird 项目已改名为 Flutter for Web，将 Flutter 的 Dart 代码直接编译为 JavaScript，在底层使用 HTML/CSS/Canvas 等实现了一个新的引擎，使得 Flutter 项目可以
  输出为 Web 应用，案例：https://flutter.github.io/samples/)
  
  Flutter正式成为了一个全平台框架
  
  
  Flutter 桌面端也在开发中，虽然还不不适用于生产环境，但底层引擎已基本成型，有待进一步整合。Flutter 也可以嵌入智能设备，通过构建自定义的 Flutter Engine 4，Flutter 应用可以运行在智能显示屏等现代智能设备中，Google 自己的硬件产品 Google Home Hub 等就是通过这种方式使用 Flutter。

热门问答

Flutter 和 React Native 有什么不同？

• 多平台支持

  RN 目前支持 iOS 和 Android 两个平台。

  flutter 早期支持 iOS 和 Android ， desktop 的支持目前尚不完善。近期 flutter 团队发布了 Hummingbird ，旨在让 flutter 编写的应用可以运行在浏览器端。

  从多平台支持的角度看，两边差距不大。相比 RN ， flutter 在 desktop 的支持上有些优势，但目前都是不怎么可用状态。

• 工具链

  RN 在打包发布方面有被前端广泛使用的 webpack 支持，官方自己提供了基于浏览器的 debug 工具，与前端同学常用的调试方式并无二致。

  flutter 基于 iOS 和 Android 已有的打包工具添加了 flutter 产物打包功能，同样 debug 工具也由官方自己提供，除了刚发布的基于浏览器的调试工具外， flutter 团队提供的调试工具可以直接在 Android Studio 或者 VScode 这类 IDE 上直接使用。

• 热更新

  RN 支持且有多套热更新方案。

  Flutter 目前还没有，不过 code push 方案正在研发当中，相信不久以后就会出来。

• 调试便利性

  JS 的调试方式已经很成熟了，这里不多做展开。

  flutter 在 debug 阶段可以使用集成于 IDE 插件中的 hot reload 功能做到亚秒级的新代码加载速度，十分适合与设计师坐在一起结(ya)对(li)编(tiao)程(shi) 。

• 第三方库

  在 RN 上你可以使用 JS 的大部分库，平台相关的 plugin 也相对丰富。

  flutter 在这方面稍显欠缺，库的数量上无法与 JS 生态相比较。flutter/plugins 项目提供了大量的平台相关插件供开发者使用，倒也是满足了日常开发的需求，另外 dart pubs 上的公开库数量也日趋上升。

  在混合开发和大型 app 业务框架上，闲鱼技术开源的 flutter_boost 提供了与 native 混合开发的可能，而 fish_redux 使得大型 app 中的复杂页面的开发在 flutter 中变得更加容易。

• 发展趋势

  RN 是个很好的项目，在发布之初给移动开发带来了一阵旋风。但不得不说， Airbnb 宣布放弃使用 RN 技术栈对于整个社区有不小的打击，18年下半年也对外官宣了准备大的改革。

  flutter 在1.0发布之后趋于成熟，被钦定为 Google Fuchsia 系统的应用层框架。从团队2019 roadmap 中可以看到， flutter 当前重点在于完善一些现有功能上的细节与 bugfix ，另外对于广受期待的动态化特性， flutter 团队也在开发 code push 功能。从 flutter 团队目前的方向和在闲鱼开发中实际使用的 flutter 的感受来看，整体上flutter在框架层面目前已经基本上稳定。

Flutter 用什么语言开发？

“我们”研究了很多语言和运行时，最终采用了 Dart 作为开发框架和 widget 的语言。底层图形框架和 Dart 虚拟机在 C /C++ 中实现。

学习 Flutter 需要哪些必备知识？

• Dart语言基础
• Flutter 对熟悉面向对象概念（类、方法、变量等）和命令式编程概念（循环、条件等）的程序员来说是很容易入门的。学习和使用 Flutter ，无需事先具有移动开发经验。 我们已经看到了一些不怎么有编程经验的人学习并使用 Flutter 进行原型设计和应用程序开发。
• Java 和 android 相关开发经验（非必须，有的话更好）

我在哪里可以获得 Flutter 学习资源？

• Flutter 中文网
• 掘金社区：https://juejin.im/tag/Flutter
• stackoverflow：https://stackoverflow.com/questions/tagged/flutter
• Flutter Codelabs: https://codelabs.flutter-io.cn/codelabs/#codelabs
• 案例学习：在安卓 FlutterSDK 的目录里，就有 Flutter 官方准备的精美案例，可以打开观看源码学习。
• 云社区：https://cloud.tencent.com/developer/column/6114

Dart语言好学吗?

如果你有编程经验，尤其是了解 Java 或 Javascript ，那么你回发现 Dart 学习起来非常容易，“笔者”只用了两个小时基本就开始愉快的使用 Dart 编码了。

我在哪里可以获得Dart学习资源

• Dart 官网：https://www.dartlang.org/
• Dart 中文官网：http://dart.goodev.org/
• Flutter 中文网：https://flutterchina.club/
• 掘金社区 Dart 专栏：https://juejin.im/search?query=Dart&type=all
• 优质博客：https://juejin.im/post/5c44727df265da611c274087
• 新闻资讯：https://www.dart-china.org/

Flutter 特点

• 快速开发

  由于 Flutter 选用了 Dart 作为其开发语言， Dart 既可以是 AOT（Ahead Of Time） 编译，也可以是 JIT（Just In Time） 编译，其 JIT 编译的特性使 Flutter 在开发阶段可以达到亚秒级有状态热重载，从而大大提升了开发效率。

• 性能优越

  使用自带的高性能渲染引擎（Skia）进行自绘，渲染速度和用户体验堪比原生。

• 富有表现力的精美 UI

  Flutter 内置众多精美的 Material Design 和 Cupertino（iOS风格）小部件，开发者可快速构建精美的用户界面，以提供更好的用户体验。

• Everything is Widget

  在 Flutter 中用 Widget 来描述界面， Widget 只是 View 的“配置信息”，编写的时候利用 Dart 语言一些声明式特性来得到类似结构化标记语言的可读性。 Widget 根据布局形成一个层次结构。每个 widget 嵌入其中，并继承其父项的属性。没有单独的“应用程序”对象，相反，根 widget 扮演着这个角色。在Flutter中，一切皆为 Widget ，甚至包括 css 样式。

Flutter框架

Flutter系统架构图

如上图所示为 Flutter 官方给出的系统架构图，可以看出 Flutter 框架分为三层： Framework 层、 Engine 层和 Embedder 层。

• Framework （框架）层：由 Dart 来实现，包含众多安卓 Material 风格和 iOS Cupertino 风格的 Widgets 小部件，还有渲染、动画、绘图和手势等。 Framework 包含日常开发所需要的大量 API ，普通应用开发熟悉这些 API 的使用基本 OK 了，不过很多特殊场景的控件需要自己根据实际情况进行自定义。Framework层的源码地址：https://github.com/flutter/flutter/tree/master/packages/flutter/lib
• Engine（引擎）层：由 C/C++ 实现，是 Flutter 的核心引擎，主要包括 Skia 图形引擎、Dart 运行时环境 Dart VM、Text 文本渲染引擎等；如果想深入了解 Flutter 原理，建议阅读该层的源代码。源代码地址：https://github.com/flutter/engine
• Embedder（嵌入式）层：主要处理一些平台相关的操作，如渲染 Surface 设置、本地插件、打包、线程设置等。

Flutter 原理

无论是 iOS 还是安卓都是提供一个平台的 View 给 Flutter 层，页面内容渲染交由Flutter 层自身来完成，所以其相对 React Native 等框架性能更好。 Flutter 中图形渲染流程：

大致流程如下：

1. GPU 的 Vsync 信号同步到 UI 线程
2. UI 线程使用 Dart 来构建抽象的视图结构
3. 视图结构在 GPU 线程中进行图层合成
4. 合成后的视图数据提供给 Skia 图形引擎处理成 GPU 数据
5. 数据再通过 OpenGL 或 Vulkan 提供给 GPU 进行渲染

Flutter for Web

Flutter 之所以能够在移动平台上运行，主要是依赖的 Flutter Engine，就是 Flutter 所依赖的运行环境。这就导致在移动平台，只要你使用了 Flutter ，哪怕只用混合开发的模式写了一个页面，这也将为你的 App 增大大约4MB的体积。

而 Flutter for Web，完全是一种全新的模式，它可以将 Dart 编写的现有 Flutter 代码，编译成可嵌入浏览器并部署到任何 Web 服务器的代码。

编译后的代码，完全是基于 HTML、CSS 和 JavaScript 这些标准的 Web 技术，所以它也不需要任何浏览器插件的支持。

早期微软的 Silverlight 和 Adobe 的 Flash 都证明了，一切需要插件才能支持的 Web 应用，都是纸老虎，最终都会被基础的 HTML 技术所替代。

我想这也是 Flutter for Web 选择这种支持方式的一个考量因素。

1. Flutter_web 的插件还不完善，暂时只提供了最基础的 dart:html 、 dart:js 、 dart:svg 、 dart:indexed_db ，可以通过他们访问绝大多数浏览器的 API。
2. 并非所有的 Flutter 都在 Flutter_web 上实现了。
3. Flutter_web 编译还很慢。
4. 在桌面浏览器上运行，还有一些不足，大部分是基于移动应用的操作特性，而没有对桌面系统的操作习惯进行特殊的优化。
5. 开发流程目前仅支持 Chrome。

环境搭建

参考Flutter中文网站教程

Mac:https://flutterchina.club/setup-macos/

Windows:https://flutterchina.club/setup-windows/

Linux:https://flutterchina.club/setup-linux/

开发工具配置

参考Flutter中文网站教程

Android Studio:https://flutterchina.club/get-started/editor/#androidsstudio

Vs Code: https://flutterchina.club/get-started/editor/#vscode

项目搭建（Windows为例）

• 使用镜像

  由于在国内访问Flutter有时可能会受到限制，Flutter官方为中国开发者搭建了临时镜像，大家可以将如下环境变量加入到用户环境变量中：

  export PUB_HOSTED_URL=https://pub.flutter-io.cn
  export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
  

  注意： 此镜像为临时镜像，并不能保证一直可用，读者可以参考，详情请参考 Using Flutter in China 以获得有关镜像服务器的最新动态。

  

• 获取Flutter SDK

  下载：https://flutter.dev/docs/development/tools/sdk/releases#windows

• 解压 —— 配置

  

• 执行 flutter doctor ，检测环境

在路径中包含Flutter目录的控制台窗口中（请参见上文），运行以下命令以查看是否需要任何平台依赖项来完成设置：

D:\software\Flutter\flutter>flutter doctor

该命令检查您的环境并显示Flutter安装状态的报告。请仔细检查输出，以了解您可能需要安装的其他软件或要执行的其他任务（以粗体显示）。

接下来介绍如何执行这些任务并完成设置过程。一旦安装了所有缺少的依赖项，就可以 flutter doctor 再次运行命令以验证是否正确设置了所有内容。

• Android 设置