10 分钟了解 Flutter 跨平台方案

一、目录

1. 跨平台：跨平台是什么，有哪些平台要跨，为什么要跨平台
2. 说说当下我们已知的一些跨平台方案，Flutter 对比这些方案有什么优劣
3. 了解 Flutter 是什么
4. Flutter 特点
5. Flutter 核心思想
6. 了解 Flutter 插件
7. 目前的发展状况和未来的发展前景如何，是否有可能替代当下，成为未来
8. 成为 Flutter 工程师需要具备的素质

二、聊聊“跨平台”

1、什么是跨平台

跨平台概念是软件开发中一个重要的概念，不依赖于操作系统，也不依赖硬件环境。一个操作系统下开发的应用，放到另一个操作系统下依然可以运行。

这是百度百科对于“跨平台”一词的解释，意思是判断一个软件是否可以跨平台，主要的因素就是可以在不同操作系统和不同硬件下依然可以运行。

但这儿有一个疑问：如果在同一操作系统下，同样的硬件环境下，如果可以跨 Native 与 Web 运行，这算不算是跨平台呢 ？在我看来，这个四舍五入后也算是约等于跨平台了，毕竟 Web 应用和 Native 应用算是差异较大的两套运行环境。

2、有哪些平台要跨

移动端：

• Android（谷歌）
• iOS（苹果）
• Fuchsia OS（谷歌）
• Symbian OS（Nokia）
• Yun OS：（阿里）
• Harmony OS（华为）

PC 端：

• Windows（微软）
• Mac OS（苹果）
• Unix/Linux
• Ali OS（阿里）
• Chrome OS（谷歌）

其实还有很多比较小众的操作系统就不一一列举了，而这些操作系统中市场规模最大的要属移动界的 Android、iOS 和 PC 界的 Windows、Mac OS，而跨平台方案也主要是围绕这几位大神展开的。

3、为什么要跨平台

在现有多平台模式下，如果想要开发一个原生应用，并在多个平台使用，每个平台都需要独立的代码库和独立的开发团队，基本无法实现代码复用。

举个例子：
微信在 Window、Mac OS、Android、iOS 上都分别用不同的语言开发了原生应用。
总成本 = 单平台成本（项目、人力、物力、财力等） x 4

也正是因为这个原因，各大小公司为了减少工作量和节省成本，都希望有一套更加高效的方案解决多平台成本问题。

三、目前市面的跨平台方案

1、Web App

不用写任何原生的代码，只写 Web 页面，利用各个平台都有浏览器的优势，直接将应用运行在浏览器上。

优点：

• 多平台共用代码，节省工作量
• bug 即时修复
• 无需重复发版
• 无历史问题

缺点：

• 性能不如原生
• 推广性不如原生，需要打开浏览器通过链接跳转，或搜索关键字，在用户体验上每多一步操作都可能损失大量用户。

2、Hybrid App

以原生壳子内嵌 WebView 的方式，将主要的业务逻辑用 Web 页面实现。

优点：

• 接近原生 App 体验
• 多平台共用代码，节省工作量
• bug 即时修复
• 基本无需重复发版
• 基本无历史问题

缺点：性能不如原生开发

3、小程序

依赖于拥有巨大流量的 App，将 Web 应用运行在宿主 App 上，无需下载安装即可使用，例：微信、支付宝。

优点：

• 多平台共用代码，节省工作量
• 无需下载安装
• bug 即时修复
• 无需重复发版
• 无历史问题

缺点：

• 性能问题
• 技术支持依赖宿主提供，无法直接对接原生系统
• 如果用户对宿主应用无使用需求，将难以进行推广

4、React Native

React Native 是 2015 年 Facebook 推出的原生应用开发框架。它使用 JavaScript 和 React 编写应用，利用相同的核心代码就可以创建 Web、iOS 和 Android 平台的原生应用。

优点：

• 原生体验
• 跨平台

缺点：

• 性能不能完全媲美原生
• 需要因为不同端的差异而在实现上进行妥协

5、Weex

Weex 是阿里推出的一套跨平台方案，也是利用桥接转化成原生组件，优缺点同 RN 类似，此处就不加赘述了。

四、Flutter 是什么？

Flutter 是谷歌推出的移动 UI 框架，第一次亮相于 2015 年 5 月 Dart 开发者峰会上，初始名字叫做 “Sky”，后更名为 Flutter。

Flutter 可以快速在 iOS 和 Android 上构建高质量的原生用户界面。

五、Flutter 牛逼在哪？

1、跨平台性

Flutter 可跨平台有：

• PC端：
  • Windows
  • MacOS
  • Linux
• 移动端：
  • Android
  • iOS
  • Fuchsia
• Web 端
• 嵌入式

可以看到 Flutter 有着强大的跨平台性，它可以跨以上所有平台，到我写博文时间当前最新 SDK 正式版为 1.9.1，目前主要还是对 Android 和 iOS 这两个移动平台进行支持，如果想尝试在 Web 和 PC 运行，需要切换到开发版的 SDK。开发版 SDK 已集成的功能，距离上正式版间隔也不会太远了（Flutter SDK 更新很快）。

以下是我测试分别跨 Android、iOS、Web 平台的应用截图：

2、良好的视觉和交互体验

Flutter 内置了 Android 的 Material Design 和 iOS 的 Cupertino Design 风格组件，这些为开发出原生效果的 UI 提供了相当的便利，且它的滑动效果平滑而自然。

Material 设计风格弹窗：

Cupertino 设计风格弹窗：

3、快速开发

Flutter 的 Hot Reload （热重载）技术可帮助开发人员快速构建 UI、添加功能、测试并更快地修复错误。
这个对于原生开发者简直就是福音，我作为一名 Android 工程师亲身经历过改一行代码后运行需要 2 分钟的蹉跎岁月，哎，想想都是泪 ！ 虽然 Android Studio 之后添加了 Instant Run，但是项目较大的时候还是需要运行较长时间才能看到修改后的效果。

在 iOS 和 Android 模拟器或真机上可以在亚秒内重载，并且不会丢失状态。
无需丢失状态、亚秒内重载也是开发、调试非常有用的特性，曾几何时，身为原生开发者的我们羡慕 Web 开发者利用 webpack-dev-server 无需手动刷新页面和丢失状态即可实时更新，如果用 Flutter 开发，拥有我们的 “webpack-dev-server” 不是梦。

4、原生性能

Flutter 包含了许多核心的 widget，如滚动、导航、图标和字体等，这些都可以在 iOS 和 Android 上达到原生应用一样的性能。

Flutter 采用 GPU 渲染技术，所以性能极高。Flutter 编写的应用是可以达到 60 FPS，也就是说，它完全可以胜任游戏的制作。官方宣称用 Flutter 开发的应用甚至超过原生应用的性能，这个我没有实际测试验证过，在网上也没看到有人提供出测评参数，但既然谷歌敢揽这样的瓷器活，应该是有他的金刚钻的。

5、响应式框架

Flutter 拥有强大的响应式框架和组件，可以轻松构建用户界面。

可能有的人刚看到“响应式框架”一词时有点蒙逼，刚开始我也不太理解 Flutter 这儿说的响应式框架到底指什么。

通过以往的经验来看，“响应式” 应该是指可以适配不同的设备，呈献出相同的效果。 Web 开发在做屏幕大小适配的时候会遇到响应式开发，会不会是跟这个有关呢 ？

之后通过调研发现，Flutter 说到的响应式开发是此意非彼意，我们可以对比原生开发加以解释：

Android 中要用 TextView 显示一个文本，我们首先要拿到这个 TextView 对象，然后设置其 Text 属性就会改变其显示的内容。
而 Flutter 则不需要持有这个 TextView 对象，只需要更改这个数据的值就可以更改引用这个值的 View 上的属性并实时呈献相应的效果。

Talk is cheap，show me the code ！

Android 代码：

public class MainActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        TextView textView = findViewByid(R.id.tv_main);
        // 需要获取到对象才能修改其属性值
        textView.setText("Hello World");
    }
}

Flutter 代码：

class _MyHomePageState extends State<MyHomePage> {
  
  int _counter = 0;
  
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      // 属性值的变化会实时更新 UI  
      child: Text('$_counter',),
      onPressed: () {
        setState(() {
          // 直接修改其属性值  
          _counter  ;
        });
      },
    );
  }
}

通过以上两段 Android 和 Flutter 的代码对比可以看出，Android 代码的呈献修改是需要持有 View 对象的，而 Flutter 则不必，后者只需修改数据值即可。

由以上可以看出，这种响应式编程确实为我们省了不少事，在一定程度上节省了开发时间，提高了开发效率。

六、核心思想

1、一切皆组件

在 Flutter 中，按钮、样式（字体、颜色）、布局、动画、手势等都可称为组件。
这个说法也是区别于我们以往的开发习惯的：如果做原生开发的话，很多样式、手势都是作为 View 的属性去设置的，而在 Flutter 中却是以组件的方式去呈献的。

2、状态

Flutter 的运行可以认为是一个巨大的状态机，用户的操作，请求 API 和系统事件都是推动状态机运行的触发点，触发点通过 setState 方法推动状态机进行响应。

示例：以下这段代码是通过更新状态来更新 UI 的一个实例

3、StatefulWidget & StatelessWidget

如果 Widget 需要根据用户交互或其他因素进行更改，则该 Widget 是有状态的，它需要继承 StatefulWidget，例如：ProgressBar
反之为无状态的，可以继承自 StatelessWidget，例如：Text

有状态组件：

无状态组件：

七、了解插件

虽然 Flutter 提供了一些 UI 层面的支持，但却无法直接调用原生系统的功能（比如调用蓝牙、相机、Wifi 等）。
这个时候就需要用原生语言去做 Native 层开发。

例：创建一个调用系统相机的功能的流程：

1. 创建插件项目
2. 用 Android 原生语言 API 编写调用 Android 系统相机功能
3. 用 iOS 原生语言 API 编写调用 iOS 系统相机功能
4. 编写 Flutter 调用原生接口方法

八、Flutter 对比目前市面上跨平台方案

1、Flutter VS Web 系

Web 系的有：WebApp、Hybrid、小程序等，由于其大同小异，此处就做统一对比了。

优势：

• 绝对的性能优势：官方声称其性能甚至超过原生
• 以桌面第一入口方式进入，更利于推广
• 具有不亚于 Web 应用的跨平台性（跨几乎所有平台）

劣势：

• 需要下载安装
• 需升级发版
• 历史问题

2、Flutter VS React Native

由于 RN 与 Weex 又类似，都是通过 bridge 连接 Native 的，这儿就只对比 RN 了。

优势：

• 更优的性能：RN 需要用 JSBridge 去调用原生组件，而 Flutter 不用，它有自己的渲染引擎
• 跨平台性：Flutter 对跨 PC 平台也做了很好的支持，而且可以开发嵌入式，RN 官方没有提供跨 PC 平台的方案
• 无需因为不同端的差异而在实现上进行妥协

劣势：

• 开发速度上略低于 RN，RN 的即用型组件可帮助开发人员快速制作应用程序
• 社区力量不如 RN

九、跨平台技术的现在与未来

React Native：

目前应用最广跨平台方案，美国的市场份额占据 4.3%。
其实是想要拿到全球的使用数据，但是没有查到，但也可说明跨平台技术具有较大市场需求，可能还是因为存在一些弊端，没有井喷式的上涨。

**Airbnb 宣布放弃使用 React Native，回归使用原生技术。 **
这是一条代表性的消息，除了 Airbnb，国内也有放弃使用 RN 的，主要是由于随着项目越来越大，RN 有一些局限性导致难以维护，后来听说 RN 技术团队在对其做重构优化。

Flutter：

谷歌在很多方面都对 Flutter 给予了很大的推广和支持，谷歌新操作系统 Fuchsia 使用 Flutter 作为操作 UI 框架。
谷歌无论是在宣传上还是技术上都做了很大的支持，Flutter 确实对比现有跨平台技术也存在一定的优势。

闲鱼团队由去年的混合开发使用 Flutter 到如今全应用 Flutter 开发。
闲鱼是最早应用 Flutter 的开发团队之一，由去年的混合 Flutter 应用到如今的全平台 Flutter，也证明了 Flutter 的可行性。

拉勾网今年年初只有两三个 Flutter 职位，到现在（2019.11.27）拥有约 40 专职 Flutter 职位招聘，如果再加上其它职位需附加 Flutter 属性的，有 500 招聘职位。
短短一年时间，国内越来越多大、中、小型公司开始使用 Flutter 跨平台技术，证明 Flutter 的确有其得天独厚的优势，还是很有发展前景滴！

技术文章规模由 2018 年年底寥寥数篇到如今可以快速搜索到各种技术资料。
我在今年的 Flutter App 开发过程中有着明显的感受：年初技术资料极少，想要搜索 Flutter 相关资料，只有寥寥数条；现在各项细节技术资料相对全面，已明显感觉到社区力量越来越壮大。

十、成为一名 Flutter 工程师需要具备的素质

Flutter 跨平台技术如此强大，那我们有必要学习并准备成为一名 Flutter 工程师吗 ？
其实作为一名技术人员，应该拥抱变化，并做好随时学习了解新技术的准备，而如果想要成为一名优秀的 Flutter Developer 综合来说应该掌握以下技能：

• Dart 语言基础 Flutter 技术
• Android：Java 基础 Android 技术 Kotlin 语言（官方推荐语言）
• iOS：OC 基础 iOS 技术 Swift 语言（官方推荐语言）
• 深入：权限处理、兼容性适配、性能优化等

要开发 Flutter，首先 Dart 是必须要去学的，Flutter UI 框架也是需要非常熟悉的。
一些原生系统功能必须要用到原生语言去开发插件，这就要用到 Android 和 iOS 技术。
Java 和 Kotlin 语言你可以任选其一先去学习，目前市场大部分应用还是用 Java 去开发，但 Kotlin 已经是官方谷歌官方推荐语言，有一部分公司也已转向 Kotlin，未来有必要学习了解。
OC 和 Swift 你也可以先任选其一去学习，但同 Kotlin 类似，Swfit 也是苹果官方推荐语言，目前也有很多公司已经投入 Swift 开发。
有些时候可能需要涉及 Native 的权限、兼容性、性能等处理，也需要你去完善的自己的 Native 技术栈。

看到一些 Flutter 招聘职位中也有对于原生技术的要求：

前瞻：
现在 Flutter 的开发版已经可以用来开发 Web 和 PC 应用，未来可能也需要接触 Web 和 PC 插件开发，感觉技术的发展趋势越来越走向“大前端”，对开发人员的基本素质要求也越来越高，不禁想起很多程序员的一句感慨：“别再出新技术了，老子学不动了” ！

看到这么多要学的，可能有的人会想要望而却步，但其实也不必如此悲观，上面说的只是如果想要做到深入了解和全面开发的话尽量去做的点，其实也不是所有的场景都需要用到原生开发的，而且现在 Flutter 的三方插件库也在不断完善，一些常用的 Native 功能也可以直接在插件市场去找，直接添加项目依赖就可以使用了。

十一、总结

通过对现有跨平台技术的了解，并与 Flutter 对比，感觉 Flutter 还是有很大优势的，强大的跨平台性和性能优势让其鹤立鸡群！虽然 Flutter 1.0 推出到现在也不过一年的时间，但是其技术支持越来越完善，社区规模也在不断壮大，感觉未来还是有很大的发展前景的。

如果想要全面且深入的做好 Flutter 开发，也需要具备比较广而深的技术素质，总之，要做好 Flutter 开发，学的东西确实是挺不少的。

十二、参考文献

• Flutter 中文网
• 《Flutter 技术入门与实战》
• Building a web application with Flutter
• 手把手带你使用Flutter开发web应用程序
• Flutter 1.9 新特性介绍
• Flutter 的进阶之路之 Material Design 与 iOS 风格组件
• 如果你不熟悉Material Design，请一口吃下这篇干货！
• Flutter 的响应式编程
• 六大 PC 操作系统用户量排名
• 2019年，Flutter 和 React Native 谁主沉浮
• Can you use react native to create a desktop app
• 深入浅出weex核心原理
• 最火跨平台React Native weex Flutter

本文作者: ▬

郝赟东 蜂群技术 | Android 软件开发工程师