Flutter简介及环境搭建【1.0】

第1章 Flutter简介及环境搭建

本章主要介绍移动端软件的发展历程、Flutter诞 生背景、Flutter的优缺点以及Flutter开发环境的搭 建，为学习Flutter做好前期准备工作。 通过本章，你将了解如下内容：

·移动端软件发展历程

·Flutter简介 ·搭建开发环境

1.1 移动端软件发展历程

2008年7月，苹果公司推出第一代手机iPhone 3G，同年9月谷歌正式发布了Android 1.0系统，标志 着正式步入移动端（特指Android和iOS，下同）发展 期，移动端的发展历史，按照开发者的经历大致可以 分为4个阶段：原生阶段、Hybird阶段、RN阶段、 Flutter阶段。 原生阶段：我们使用原生语言（Android使用Java 或Kotlin，iOS使用Objective-C或Swift）开发应用， 对同样的功能需要写Android和iOS两个版本，开发和 维护成本都很高，同时动态化能力非常弱，紧急问题 的修复和添加新功能都需要到相应平台发版，尤其是 iOS审核的周期非常长。从开发者的角度出发，是否有 一种方案可以开发一套代码能在多个平台运行且能够 动态发版，而无须再经过平台的审核？基于这个需 求，HTML5兴起，移动端发展步入了Hybird阶段。

Hybird阶段：通过WebView容器加载HTML5网页进 行渲染，通过JavaScript Bridge调用一部分系统能 力，同步更新服务器上的HTML5网页。我们还实现了动 态更新，一切看似美好。可是Hybird阶段仅仅持续了 很短的时间，因为我们发现这种方案存在致命的缺陷 ——性能。大家都在想有没有一种既能跨平台，性能 又高的方案呢？于是移动端发展步入了RN阶段。

RN阶段：RN是React Native的简称，当然这个阶 段不只有React Native，还有Weex等跨平台方案，它 们的原理大同小异，都是使用JavaScript开发，但是 绘制交给原生平台，通过JavaScript VM的解析桥接原 生控件进行绘制，这样性能得到了极大提升。但是随 着开发的进行，我们又发现了新的问题——桥的成本 太高，当频繁地跨桥调用时就会出现性能问题，比如 ListView的滑动，React Native早期的ListView控件 存在极大的性能问题。除了性能问题，维护成本也很 高，由于React Native要桥接到原生控件，但Android 和iOS控件的差异导致React Native无法统一API，有 的属性iOS支持，Android不支持，有的Android支持， iOS不支持，这就导致经常需要开发Android和iOS两套 插件，另外还需要维护React Native端，RN架构（尤 其是版本升级）维护成本比Android和iOS还要高，所 以综合下来成本比原来还高，这个阶段的跨平台就失 去了意义。Flutter在这个时候就应运而生了。

Flutter阶段：Flutter吸收了前面的经验，既没 有使用WebView，也没有使用原生控件进行绘制，而是 自己实现了一套高性能渲染引擎来绘制UI，这个引擎 就是大名鼎鼎的Skia，Skia是一个2D绘图引擎库， Chrome和Android都采用Skia作为引擎。Flutter完美 地解决了跨平台代码复用和性能问题，大家都在感 叹：似乎UI迎来了终极解决方案。

1.2 Flutter简介

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

从2018年5月Google I/O正式公布Flutter以来， Flutter热度一直上升，在Stack-Overflow 2019年的 全球开发者问卷调查中，Flutter当选为最受开发者欢 迎的框架之一，甚至超过了TensorFlow和Node.js。Flutter的发展史： ·2014年10月，Flutter的前身Sky在GitHub上开 源。

·2015年10月，经过一年的开源，Sky正式改名为 Flutter。

·2017年5月，Google I/O正式向外界公布了 Flutter，Flutter正式进入了大家的视野。

·2018年6月，发布Flutter 1.0预览版。

·2018年12月，Flutter 1.0发布，它的发布将Flutter 的学习和研究推到了一个新的高点。 2019年11月，Flutter发布1.12版本，发展速度超 乎想象。不难看出，Google对Flutter寄予了厚望，投 入了大量的资源，Flutter正在走向成熟并不断壮大， 生态圈也在持续完善。

Flutter的优势：

·快速开发，Flutter的热重载可以极大地提高开发 效率。移动端的开发者都知道，即使只修改了很小的 一个地方，都需要重新编译才能看到效果，而其编译 时间是极其漫长的，大一些的项目能达到用时几分钟 甚至几十分钟，但是Flutter可以在亚秒内重载，并且不 会丢失状态。

·富有表现力，能创建漂亮的用户可设置界面。 Flutter内置了漂亮的Material Design和Cupertino风格的 控件，丰富的动画效果为你带来全新的用户体验。

·媲美原生的性能。Flutter的Widget包含了所有关 键的平台差异，比如滚动、导航、图标和字体，使用 Dart语言的本地编译器可将Flutter代码编译成本地ARM 机器代码。因此Flutter在iOS和Android上都能带来完全 的本地性能。 很多人会问，Flutter会火吗？我会反问，难道现 在的Flutter不火吗？如果你问我Flutter会火多久， 这个还真不好回答，因为一直火下去不仅仅关乎技 术，还涉及很多因素，比如生态等。即使有一天 Flutter沉寂了，那一定有另一个和Flutter类似的跨 平台技术出现。那么，我们还等什么？让我们开始学 习吧。

1.3　搭建开发环境

Flutter可以跨平台运行在Mac OS、Windows等系 统上。下面介绍如何在Mac OS、Windows系统上搭建开发环境。

搭建开发环境有如下5个步骤：

1）下载Flutter SDK。

2）设置镜像地址及环境变量。

3）Android Studio的安装及设置。

4）安装Xcode。

5）检查Flutter开发环境。

1.3.1 下载Flutter SDK

在Flutter官网下载最新的SDK，Windows版本下载 地址为https://flutter.dev/docs/getstarted/install/windows，如图1-1所示。Mac版本下 载地址为https://flutter.dev/docs/getstarted/install/macos。如果Flutter官网无法访问，可以到Flutter GitHub主页去下载，地址是 https://github.com/flutter/flutter/releases，下 载最新的zip包即可，如图1-2所示。将安装包zip文件解压到想安装Flutter SDK的目 录下即可，注意不要将Flutter SDK安装到需要高级权 限的路径上，如C:\Program Files\或者C:\Program Files（x86）。1.3.2 设置镜像地址及环境变量

Flutter官方为中国开发者搭建了临时镜像，需要 添加如下环境变量： export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn 注意 此镜像为临时镜像，并不能保证一直可 用，读者可以参考https://github.com/flutter/flutter/wiki 以获得有关镜像服务器的最新动态。 另外，运行Flutter命令需要将Flutter SDK的全 路径（如D:\flutter\bin）设置给环境变量Path。设 置方法如下。 1.Windows中设置镜像地址 右击“我的电脑” ，在菜单中选择“属性→高级 系统设置→环境变量” ，出现如图1-3所示的界面。 在下半部分的“系统变量”中查找是否有Path属 性： ·如果有，把Flutter SDK的全路径（如 D:\flutter\bin）添加到Path的末尾。注意，如果Path前面的值末尾没有英文分号“ ; ” ，则需要添加英文分号 分隔开。 ·如果没有，创建一个新的环境变量，并把Flutter SDK的全路径（如D:\flutter\bin）作为Path的值。

点击用户变量的“新建”按钮，添加用户变量 （参见图1-4）：

PUB_HOSTED_URL=https://pub.flutter-io.cn

FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn1.3.3 Mac OS中设置镜像地址

具体步骤如下：

1）打开终端，输入命令vi./.bash_profile，出 现如下内容： export PATH=/Users/mqd/Library/Android/sdk/platformtools/:$PATH export PATH=${PATH}:/Users/mqd/Library/Android/sdk/ndk-bundle A_NDK_ROOT=/Users/mqd/Library/Android/sdk/ndk-bundle export A_NDK_ROOT export PATH=$PATH:/Users/mqd/project/flutter/bin export BIU_PATH=/Library/ibiu export PATH=$PATH:$BIU_PATH ~ ~ ~ "./.bash_profile" 9L, 451C

 2）上面export部分就是我们设置的环境变量，输 入i进入编辑模式，将下面的值添加到末尾： export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn export PATH=$PATH:[你的flutter路径]/flutter/bin

3）按Esc键，输入“:wq!”（冒号和感叹号必须 是英文模式），按回车键。

4）此时变量已经设置完成，输入命令 source./.bash_profile使其生效。

5）检查是否设置成功，输入命令 echo$FLUTTER_STORAGE_BASE_URL，输出如下内容则表

示设置成功： https://storage.flutter-io.cn1.3.3 Android Studio的安装及设置 安装及设置Android Studio的具体步骤如下：

1）下载并安装Android Studio，下载地址为 https://developer.android.google.cn。安装后启动 Android Studio，按照“Android Studio安装向导” 的指示步骤安装最新的Android SDK、Android SDK Platform-Tools、Android SDK Build-Tools，这些是 Flutter开发Android所必需的。

2）安装Flutter Plugin和Dart Plugin，进入设 置界面，选择Android Studio→Preferences→Plugins，如图1-5所示。

3）搜索flutter，得到图1-6所示界面。点击 Installed按钮进行安装。

4）搜索Dart，如图1-7所示。点击Install按钮进行安装。 图1-7 安装Dart

5）重启Android Studio，点击File→New，你会 发现有一个New Flutter project选项，证明已经安装 成功。 Flutter官网推荐的编辑器有Android Studio和VS Code，我们推荐使用Android Studio。

1.3.4　安装Xcode

如果是Mac系统，还需要安装Xcode，有条件的话 建议使用Mac系统，毕竟Flutter最终需要在iOS手机上 运行，在Windows系统上是无法打包iOS App的。 Xcode的安装比较简单，直接在App Store上搜索 Xcode，安装即可。