1.3　Flutter家族

前面几节介绍了与Flutter相关的很多概念。本节主要讨论谷歌为什么在Flutter上使用Dart语言，Material Design为什么能应用在大多数的移动应用界面的设计上，以及Fuchsia、Flutter Web。

1.3.1　Dart

在介绍Dart之前，先讲一个故事。

有一天，谷歌跨平台部门的一个开发者Tom为了解决当下React Native等JavaScript跨平台框架所带来的问题而绞尽脑汁，当想到用自绘引擎来实现脱离原生平台渲染的方案时，他兴奋不已。“这种方案可能会改变当下移动开发的方向啊！”他心里暗暗自喜。为了酝酿情绪并与同事们分享这个想法时，他来到了楼下的咖啡厅喝咖啡，转念又想：“那这个技术要用什么语言呢？”就在这时，隔壁Dart部门的同事Jack过来打了一个招呼：“就用Dart吧！”

上面的故事纯属虚构，甚至有种调侃的意思。因为Flutter在国内火爆的时候Dart这门语言并不被我们熟悉，很多开发者不是很理解谷歌为什么要选择Dart而不是JavaScript作为它的开发语言，而且他们不是很喜欢Dart语言本身的语法。那谷歌真的仅仅是为了“扶持隔壁部门”而选择了Dart语言了吗？答案显然不是。下面列举了Flutter选择Dart作为开发语言的部分原因。

• Dart运行在Dart 虚拟机（Virtual Machine，VM）上，但也可以编译为直接在硬件上运行的ARM代码。
• Dart同时支持预（Ahead Of Time，AOT）编译和运行时（Just-In-Time，JIT）编译两种编译方式，可以同时提高开发和执行应用程序的效率。
• Dart可以使用隔离（isolate）实现多线程。如果没有共享内存，则可以实现快速无锁分配。
• Dart虚拟机采用了分代垃圾回收方案，适用于UI框架中产生大量的组件对象的创建和销毁。
• 当为创建的对象分配内存时，Dart使用指针在现有的堆上移动，可以确保内存的线性增长，从而节省了查找可用内存的时间。

Dart还有其他各种优势。例如，当使用Dart编写应用程序时，不在需要将布局代码与逻辑代码分离而又引入xml、JSX这类模板和布局文件。下面是使用Dart编写组件的一个例子。

new Center(
  child: new Text('Hello, World!'),
)

即使还没有Dart语言的基础，你也清楚以上代码的意思，这里在Center组件中放了一个Text组件。而在Dart 2中，又添加了另一个使Dart语言使用起来更方便的特性，就是完全可以省去new、const等关键词。例如，上面的代码可修改为以下形式。

Center(
  child: Text('Hello, World!'),
)

第2章会介绍Dart语言的具体用法。相信读者深入学习Dart之后一定会更喜欢这门语言。

提示：

Dart语言同时支持AOT和JIT两种编译方式，而目前主流的语言大多只支持其中一种编译方式，如C仅支持AOT编译方式，JavaScript仅支持JIT编译方式。

一般来说，静态语言会使用AOT编译方式。在AOT编译方式下，编译器必须在执行代码前直接将代码编译成机器的原生代码，这样在程序运行时就不需要做其他额外的操作而能够直接快速地执行，它带来的不便就是编译时需要区分用户机器的架构，生成不同架构的二进制代码。而JIT编译方式通常适用于动态语言。在JIT编译方式下，程序运行前不需要编译代码而在运行时动态编译，不用考虑用户的机器是什么架构，为应用的用户提供丰富而动态的内容。虽然JIT编译方式缩短了开发周期，但是可能导致程序执行速度更慢。

Dart语言同时使用了以上两种编译方式，这一点为它能应用在Flutter中提供了显著的优势。在调试模式下，Dart使用JIT编译方式 ，编译器速度特别快，这使Flutter开发中支持热加载的功能。在发布模式下，Dart使用AOT编译方式，这样就能够大大提高应用运行速度。因此，借助先进的工具和编译器，Dart具有更多的优势——极快的开发周期和执行速度以及极短的启动时间。

1.3.2　Material Design

熟悉Android开发的读者相信已经对Material Design有或多或少的了解，它是谷歌推出的一套视觉设计语言。谷歌有全世界顶尖的设计工程师，他们通过定义一系列设计原则，从而使得应用的颜色选择与搭配、界面排版、动画、交互方式、组件大小与间距等在用户界面（User Interface，UI）呈现上实现了相对统一。

Flutter提供了大量该风格的组件，我们可以按照目前已经提出的Material Design原则创建用户界面。这种方式大大地降低了开发者美化用户界面的工作量，用最简单的话来概括就是，我们可以用最少的工作量做出最好看的UI。其实，在Android最早推出的很长一段时间里，界面风格一直是用户吐槽的很大一方面，用户永远不会喜欢使用交互体验差劲的应用，谷歌在Material Design上花了很多工夫，这也是Android甚至谷歌所有的平台在UI方面的里程碑。

在Flutter引入Material Design的另外一个很重要的原因是它能够使应用风格趋于统一。我们可以在整个Flutter应用甚至不同的应用中只使用一整套的Material Design风格。同时，为了防止出现大部分应用的UI出现雷同的情况，Flutter团队一直致力于给开发者自定义独特的样式（如圆角角度、阴影厚度、主题颜色等参数）提供更多的接口。Flutter的每次更新总会对Material Design提供更多的支持。

1.3.3　Fuchsia

Flutter能激发很多开发者的兴趣的一个原因是，它可能将作为谷歌此后将推出的新系统Fuchsia的原生开发方式。

早在谷歌刚刚开源Fuchsia的部分代码之后，很多感兴趣的“有识之士”就深究了这个可能取代Android的下一代移动操作系统。Fuchsia与之前各类操作系统都有较大的不同。其一，Fuchsia底层并没有使用与Android一样的Linux内核，而使用谷歌自研发的Zircon；其二，Fuchsia在顶层Topaz中明显地支持使用Flutter与Dart来开发应用。Fuchsia OS的分层架构见图1.4。

图1.4　Fuchsia OS的分层架构

当被问及为什么要学习一门技术的时候，人们可能会说这门技术在未来会很有前景。当将这句话应用在Flutter上时，我们可以说Flutter将是下一代操作系统应用的原生开发方式，我们现在使用Flutter开发的应用可能就是新操作系统上的应用，想想就很激动。

1.3.4　Flutter Web

在2018年的Flutter Live大会上，谷歌给Flutter指派了另一项令人兴奋的任务——踏入Web开发领域，并在谷歌2019开发者大会上正式发布了Flutter for Web预览版，这一点已经完完全全地体现了Flutter在跨平台方向上的目标。在撰写本书时，Flutter已经可以同时作为移动端、Web端、桌面端的开发方式了。

其实从诞生之初，就希望Dart具有编译JavaScript的功能。现在许多重要的应用都是从Dart编译为JavaScript并在生产环境中运行的。为了能使Flutter运行Web应用，Flutter在标准浏览器API上使用Dart实现核心Painting层，这使得Flutter Web依然可以保留之前框架层的内容。Flutter Web的架构如图1.5所示。

图1.5　Flutter Web的架构

本书并不会讨论Flutter如何实现Web技术方面的细节，但Flutter在很大程度上将会使UI的开发方式变得统一，并且可以使用相同的代码使应用直接运行在Web浏览器中。我们可以骄傲地对其他人说：“一次编写，到处运行。”