Hello 大家好，我是《Flutter 开发实战详解》的作者，Github GSY 系列开源项目的负责人郭树煜，比如 gsy_github_app_flutter 、GSYVideoPlayer 等的项目 。

看到这个题目大家应该知道，今天这个主题并不是纯粹的技术内容分享，可以说还有点吃力不讨好，其实我很少分享这类主题，不过最近觉得有必要做这么一个算是科普向的内容吧。

Flutter 的现状

我是在 2017年左右接触的 Flutter ，说来起来有趣，那时候因为我需要做一场关于跨平台技术的内部分享，主要目的是给公司其他事业部推 React Native 框架，好巧不巧地那时候刚好看到 Flutter ，就被我当作凑数的“添头”给加到分享里，自此我就开始了和 Flutter 之间的故事。

回到正题，Flutter 开源至今其实已经将近 7 年的时间，如今在 2022 年看来，Flutter 已经是不再是以前小众的跨平台框架了。

如图所示，截止我 2 月份截图时，可以看到如今的 Flutter 已经有高达 137k 的 star ， 10k+ Open 和 50k+ Closed 的 issue 也足以说明 Flutter 社区和用户的活跃度。

从官方公布的数据上， Flutter 已经基本超过其他跨平台框架，成为最受欢迎的移动端跨平台开发工具，截至 2022 年 2 月，有近 50 万个应用程序使用了 Flutter。

如图所示，去年下半旬的数据调查中，Flutter 也成为了排名第一的“被使用”和“被喜爱”的跨平台框架，可以看到 Flutter 在 2019 到 2022 有了很明显的增长，有接近 42% 的跨平台开发者会使用 Flutter。

其实在去年和前年，我也做过一些简单的统计：

• 2020 年 52 个样本中有 19 个 App 里出现了 Flutter；
• 2021 年 46 个样本中有 24 个 App 里出现了 Flutter；

本次基于 2022 年 2 月 22 号，在对比了 57 款常用 App 之后得到的数据：

Flutter	React Native	Weex__________________	没有使用跨平台_____________________________________________
27	24	5	13
链家、转转、掘金、中国大学 MOOC、同花顺、饿了么、凤凰新闻、微信、微视、哔哩哔哩漫画、腾讯课堂、企业微信、学习强国、闲鱼、携程旅行、腾讯会议、微博、贝壳找房、百度网盘、 WPS Office、唯品会、美团众包、美团外卖商家版、UC、QQ（libmxflutter），小米运动、优酷视频	美团 、美团众包 、美团外卖商家版 、美团外卖、爱奇艺、中国大学 MOOC 、脉脉 、小红书、安居客、得物、58同城、微信读书、汽车之家、飞书、喜马拉雅、去哪儿旅行、菜鸟、京东、快手、携程、米家、UC、小米运动、优酷视频	UC 、闲鱼 、 微博 、米家、优酷视频	QQ音乐、Boss直聘、今日头条、流利说、知乎、腾讯新闻、财经社、酷狗音乐、拼多多、抖音、起点、什么值得买、百度地图

这些数据来源于 Android 的 Apk ，以是否存在 libflutter.so 、libreactnativejni.so 和 libweexcore.so 等动态库为依据，如果项目使用了插件化下发可能会被忽略。

可以看到 Flutter 和 React Native 的出现都接近 50%，而 Weex 的占有率已经很低，另外在这个小样本下，可以看到现在大多数 App 或多或少都可能带有一些跨平台框架的趋势。

同时，加粗部分的 App 因为业务需要， 在应用内使用了不止一种的跨平台框架，比如UC、闲鱼等。

而在官方去年的 Q4 数据调查里，在过去 6 个月中，分别有 72% 和 91% 的开发者使用 Flutter 为 iOS 和 Android 开发 App 。

再看一份数据，是 Dart 的第三方插件托管平台 pub.dev 上的数据，基于 2022-02-22 的数据：

All	23495 packages
Flutter	21714 packages
Android/iOS	20352 packages
Web	12584 packages
PC	14314 packages
Null safety	12615 packages

目前大概有 2.3 万个公开的第三方支持包托管在 pub 上，其中支持 Flutter 的有 2.1 万个，可以看出 Dart 语言的用户基本都是来源于 Flutter 。

另外从数据上看大部分的库都支持 Android 和 iOS ，而对于 Web 和 PC 的支持接近60% ，而比较意外的是，目前支持 Null safety 的包也就接近60%，也就是还有 40% 多的包还停留在较老的版本上。

而在官方的 Q4 调查里可以看到，使用 Flutter 作为主要工作的比例在逐步提高。

最后在聊一聊 Flutter 官方对于 Flutter 一直坚持一个理念：

一个 SDK 再优秀，如果只有少部分人在使用，那它也不能体现价值；而一个 SDK 即使平庸，但是有大量开发者使用，那也会拥有一个健康繁荣的生态氛围，这样使用框架的人才能从中受益。

补充一句，你知道调查里大家最不满意的 Flutter 的是哪个方面吗？

是文本编辑！Q4调查里，对文本编辑功能的满意度从 82.3%（单行）和 82.2%（过滤和格式化）下降到 69.6%（多行）和 66.6%（富文本编辑器），目前多编辑体验和输入富文本支持上，确实不是特别友好。

Flutter VS Other

聊完 Flutter 的现状，我们继续讨论 Flutter 和其他框架的一些直观对比。

实现原理

这部分内容其实分享过很多次，简单说一下，首先对比它们的实现原理，如下图所示，可以看到：

• 对于原生 Android 或者 Compose 而言，是原生代码经过 skia 最后到 GPU 完成渲染绘制，Android 原生系统本身自带了 skia；

• 对于 Flutter 而言，Dart 代码里的控件经过 skia 最后到 GPU 完成渲染绘制，这里在 Andriod 上使用的系统的 skia ，而在 iOS 上使用的是打包到项目里的 skia ；

• 对于 ReactNative/Weex 等类似的项目，它们是运行在各自的 JS 引擎里面，最后通过映射为原生的控件，利用原生的渲染能力进行渲染；

• 对于 uni-app 等这类 Hybird 的跨平台框架，使用的主要就是 WebView 的渲染能力；（不讨论开启weex情况）

首先看到，从理论上来说， Flutter 在实现上是最接近原生，因为从实现路径上基本是一致的，而 RN/Weex 相对会差一些，而 uni-app 通过 WebView 的渲染会是最末。

但是对于性能问题，事实上很多时候性能门槛不在于框架，而在于开发者，我见过用 Cordova 开发的 App 性能和体验都调教得很不错，我记得有一次大会分享和支付宝的大佬聊过，支付宝也使用了很多 H5 的 Hybird 技术，得益于 UC 的自研内核，在性能体验上一直还挺不错。

构建大小

接着我们对比应用构建的大小，这里主要对比 Android ，因为 iOS 上应用的大小似乎越来越没人在意，比如 QQ 这个极端的例子：

回到问题上，关于应用大小问题，之前恰好看到有多人说过：

“Compose 上 Kotlin/JVM 为 JVM 和 Android 平台生成 jar/aar 文件、通过 Kotlin/Native 为 IOS 平台生成 framework 文件、通过 Kotlin/JS 为 Web 平台生成 JavaScript 文件，最终调用的还是原生 API，这使得采用 Compose Multiplatform 不会导致性能损耗，且不会像 Flutter 那样明显增大应用体积。”

是的，从实现上看 Flutter 在实现上确实应该比 Compose 占据更多体积，但是真实情况是怎么样呢？

首先我们创建几个空项目，然后打包时只保留 arm64-v8a 相关的动态库，因为一般情况下上架也只会保留其中一种 so 库。

在我们不写任何代码的情况下，构建出 Android 的 Release 包，得到如下结果：

• Flutter

• React Native

• Compose

• 原生 Android

可以看到 ：

• React Native 的空包最大，主要体积来自于其内部的各种动态库，比如 JSCore ；
• Flutter 次之，主要体积来也是自于其内部的动态库，比如 Flutter 的 framework；
• Compose 的体积和原生相当接近，主要内容来自于 classes 文件；当然这里没有混淆和压缩，混淆和压缩后可以小很多；

从结果上看空项目下确实是 Flutter 比 Compose 所占据的体积更大，但是这里有一点需要注意的是：

• 单纯 Flutter 开发下，主要的应用体积会来自 libapp.so ，这部分代码是经过 AOT 编译后的 Native 二进制代码；
• 而 Compose 的体积增长主要来自于 classes 文件，这部分的代码增长需要通过混淆等来压缩；

额外提一点，大家可能会好奇 Compose 编译后是怎么完成布局渲染？

这里简单介绍下，Compose 里的控件和原生控件并不是一个体系，大家如果去看编译后的内容，就会发现例如 BOX 这样的控件在编译后是通过 ComposerKt 和 BoxKt 等的 framework 实现来完成的布局与绘制。

所以 Compose 编译后不是转化为原生的 Android 上的 View 去显示，而是依赖于平台的 Canvas ，在这点上和 Flutter 有点相似，简单地说可以理解为 Compose 是全新的一套 View 。

另外友情提示：虽然是全新的 View ，但是 Compose 的组件在 Android 上是可以显示了布局边界。

回顾到体积的问题上，因为我恰好开源有一些列 GSY 项目，它们实现的业务逻辑十分相似，所以都打包成 Release 模式之后，我们对比它们的体积大小：

• Flutter

• React Native

• 原生 Android

因为我目前还没有 Compose 的项目，所以这里以原生作为对比，可以看到：

• Flutter 项目从空的 5.7 M 变成了 9.8M ，增长了 4.1 M 的大小；
• React Native 项目从 9.4 M 变成了 12.7M，增长了 3.4 M 的大小；
• 原生项目从 3.2 M 变成了 9.3 M ，增长了 6.1 M 的大小；

虽然不精准，但是可以看到在大致相同的业务场景下， Flutter 和原生项目的总大小反而相差不大，而原生项目的增加其实比 Flutter 更显著一些。

但是这里的前提是原生不开启压缩和混淆，如果开启压缩和混淆之后，如下图所示可以看到体积发生了变化，体积从 9.3M 变成了 6.4 M ，所以大致上可以看出，在开启混淆和压缩之后，原生 App 体积增长和 Flutter 差异不会太大。

另外，这里我找了一个网上的纯 Compose 做了测试，在开启混淆和压缩后，Compose 体积的大小变化就十分显著：从 9.6 M 变成了 2.4 M ，这得益于 Compose 里的代码基本都是可以被混淆的。

所以得到结论：

• 在开启了压缩之后的 Compose ，体积确确实实会比 Flutter 更小更有优势，这里的优势来源于 classes 的压缩效率
• React Native 的体积一般情况下都会比 Flutter 更大，同理 Weex 也类似；

当然这个也不是绝对的，体积大小有时候也和开发者的习惯有关系，比如某天我就在群里刚好看到，某个 App 的 Flutter 业务动态库居然可以高达 77.4 M 。

这是什么概念？一般情况下 10M - 15M 就是普通中小型 App 的 Flutter 动态库大小 ，而 大型 APP 一般也会控制在 20M - 35M 之间，就算是很大的体积了，例如 UC 也就是 35 M 、企业微信 28.9M 的水平。

所以体积大小上，更多是开发者的主观控制，也和你是否开启混淆和压缩有关系，主要介绍这个是让大家对不同项目的打包产物有个直观的认识，从而对选择哪种开发框架提供一个判断的依据。

构建过程

接下来聊聊构建过程，为什么聊这个，因为对于新手来说，构建过程的问题是一个很容易放弃的过程。

如下图所示就是非原生开发在运行 Flutter 时经常可以遇到的问题：

如果你看到运行后一直停留在 assembleDebug 阶段没有进入下一步，那这时候其实是 Android 在通过网络下载一些环境依赖，比如 Gradle SDK、 aar 库等这些运行所需的包，而这个过程通过 flutter run 或者 idea 运行是看不出来进度的，你只有进入 andorid/ 目录下执行 ./gradlew assembleDebug 就可以看到类似的进度：

例如在 Flutter 官方 Q4 的调查里，在发布应用程序时，需要处理 Xcode (iOS) 和 Gradle (Android) 是最常见的问题，为什么说这个？ 首先这里可以看出一点，对原生平台的不熟悉会是使用跨平台开发的一个痛点。

当然，在对比所有跨平台开发的这个环节里， Flutter 虽然不能说是最好，但是 React Native 绝对是最拉胯的，因为不管是 Weex 还是 React Native ， node_module 黑洞一直都是头痛的问题：

举个例子，React Native 项目的 node_module 黑洞，经常导致了它在环境安装和运行上会给你“惊喜”，各种丰富的插件和工具，在实用的同时又成了臃肿的坑，比如这是我前段时间久违需要处理一个 React Native 项目时遇到的问题：

依赖中的依赖，各种库的版本所需的 node 环境不同，需要我从中平衡出一个合适的版本。当然这不是最麻烦的，最麻烦的是在电脑 A 上运行成功之后，在 B 电脑 npm 之后发现无法运行的问题，相信这是每个 React Native 开发的必修课。

从前端开发角度，比如扁平化依赖，当然扁平化依赖的展开后依赖深度就变成了数量很可观的文件目录，依赖结构变得就不直观了，当然现在的 npm ，pnpm 工具都有了新的优化，

相反 Flutter 在这方面就轻量很多，目前 Dart 的 pub 包层级很浅，路径相对清晰，这也是我觉得在这方面 Flutter 基本上比 React Native 更舒服的原因，所以在原生环境依赖复杂度一致的情况下，Flutter 确实比 RN 更容易进入 hello world 。

Flutter & Compose

最后聊聊 Flutter 和 Compose 之间的对比。

相信大家对于 Flutter 和 React Native 之间的对比看得多了，因为 React Native 发布至今已经很久了，并且 Flutter 和 React Native 之间是不同公司在维护 ，而对于 Flutter 和 Compose ，它们都是谷歌开源的项目，并且都在支持多平台，那它们之间有什么不同？应该如何选择？

首先提一个题外话：前端有 npm 、Flutter 有 pub 、iOS 有 cocoaPods，你可以通过它们的官网搜索你想要的库，查看它们的热度，版本，兼容和使用量等等信息，但是 Android 呢？

Android 的 Gradle 是不是缺少了这样一个便捷的存在，以至于我们只能在 Github 通过关键字去检索，而这个影响其实也渗透到 Compose 里，这对 Compose 在跨平台发展上是一个问题。

首先谷歌官方的定义，Compose 是 Android 的现代原生界面工具包，而且正如前面我们介绍的，它是一套全新的 UI ，所以 Compose 是有自己的平台，也就是 Android，那是它的主场。

从可以看官方的 路线图 可以看出来， 谷歌对 Compose 的经历主要都是集中在 Android 原生平台，而 Compose Multiplatform 是由 JetBrains 维护的 compose-jb 来实现。

Flutter 没有自己的平台 ，它是一个跨多平台的 UI 框架，它出生就是为了多平台而生，从目前支持的 Android、iOS、Web 、Window 都发布了正式版支持，而 Linux 和 MacOS 估计也不远了。

所以这是它们直接最大的区别之一：Compose 是谷歌为 Android 设计的全新 UI 框架，并且 JetBrains 把它拓展到支持跨平台，而 Flutter 主要就是为了跨平台而生 。

虽然都支持跨平台，但是二者之间也是有很大差异，如图所示是它们实现上的不同：

在实现上的差异是： Flutter 对外是通过一套官方的 Framework 来支持多平台，而 Compose 目前是通过多个模块不同实现来支持多平台。

Flutter 不用说，就是通过编译时不同的命令去生成不同平台的代码，这期间统一有 Flutter framework 来完成输出，而目前 Compose 在 Web 、Desktop 和 Mobile 上的实现逻辑是并不一定能通用的，特别是 Web。

Compose 目前在 iOS 还没有正式的支持，虽然可以通过一些方式支持，但是还不是特别方便，而在 Web 上 Compose 需要使用和导入的包也是具备特殊化，反而是 Mobile 和 Desktop 之间反而是能共用 compose-ui 的内容。

举个例子，在 compose-jb 里 对 Web 的支持代码如下，可以看到导入的和使用的控件都具备它自己的特殊性。

import org.jetbrains.compose.web.dom.*
import org.jetbrains.compose.web.css.*

fun main() {
    var count: Int by mutableStateOf(0)

    renderComposable(rootElementId = "root") {
        Div({ style { padding(25.px) } }) {
            Button(attrs = {
                onClick { count -= 1 }
            }) {
                Text("-")
            }

            Span({ style { padding(15.px) } }) {
                Text("$count")
            }

            Button(attrs = {
                onClick { count += 1 }
            }) {
                Text("+")
            }
        }
    }
}

所以对于 Compose 来说，更多像是：你学会了这个框架，然后就具备了写 Web 和 Desktop 的能力；而对于 Flutter 来说它在跨平台的体验会更好。

所以从我理解上是：

• Compose 是 Jetpack 系列的全新 UI 库，主要是被应用到 Android 界面开发，它就是为了重新定义 Android 上 UI 的编写方式， 所以你也可以选择不用，用不用都能开发 Android 的 UI，但是如果你继续在Android 上深耕，那么你最好还是要学会。
• Flutter 的未来在于多平台，更稳定可靠的多平台 UI 框架。如果你的路线方向不是大前端或者多端开发者，那你可以不会也没关系。

而从使用这角度，不管你是先学会 Compose 还是先学会 Flutter，对于你掌握另外一项技能都有帮助，相当于学会一种就等于学会另一种的 70% ：

• 如果你是原生开发，还没接触过 Flutter ， 那先去学 Compose ，这对你的 Android 生涯更有帮助，然后再学 Flutter 也不难。
• 如果你已经在使用或者学习 Flutter ，那么请继续深造，不必因为担心 Compose 而停滞不前，当你掌握了 Flutter 后其实离 Compose 也不远了。

对比了 Flutter 和 Conpose 的很多设计理念和源码，他们在实现上的相似度很高。

当然，跨平台之所以是跨平台，首先就是要有对应原生平台的存在， 很多原生平台的问题都需要回归到平台去解决，那些喜欢吹 xxx 制霸原生要凉的节奏，仅仅是因为“你的焦虑会成为它们的利润”，没有了平台还要跨平台干嘛？

一些见解

最后简单聊聊我的一些见解。

跨平台的底层逻辑

在 Flutter 之前，移动端跨平台的底层逻辑无非两种：

• 一种是靠 WebView 跨平台；
• 一种是靠代理原生控件跨平台；

所以早期的移动端跨平台控件一开始就 Cordova 、Ionic 等这些框架，它们的目的就是将前端 H5 的能力拓展到 App 端，让前端开发能力也可以方便开发 Android 和 iOS 应用，那时候的口号我记得是：write Once, run everywhere 。

后来，得益于 React 的盛行，React Native 开辟了新的逻辑：用前端的方式去写原生 App ，通过把 JS 控件转化为原生控件进行渲染，让移动端跨平台的性能脱离了 WebView 的限制，性能得到了提升，而 React Native 强调的是 learn once, write everywhere ，也就是你学会了 React ，可以开发网页，也可以开发 App 。

而到了 Flutter ，它直接摆脱了平台控件的依赖，它自己产出了一套平台无关的控件，通过 GPU 直接渲染出来，这样做的成本无疑是最高的，但是所带来的“解耦”和“所见即所得”无疑是最好的，而 Flutter 的口号是 Build apps for any screen 。

但是如果是放到真实应用场景上，不是说 Flutter 就是最优解，而是需要衡量你的业务场景来选择合适你的框架 ， 例如：

• 如果你的业务场景是多框架混合开发，那 Flutter 明显不占据优势；
• 如果你的场景是需要很强的文本编辑和富文本场景，那 Flutter 明显不占据优势；
• 如果你的 KPI 对内存占用特别敏感，那 Flutter 也不是特别占据优势；
• 如果你需要热更新，那 Flutter 也并不占据优势；

热更新

既然说到热更新，就简单介绍下热更新的问题。首先 Flutter 官方并不支持热更新，不像 React Native 一样有着十分成熟且通用的 code-push 框架。

为什么呢？首先 React Native 写的 JS 代码是属于纯脚本文本，就算打包成 bundle 文件它也是纯文本格式，所以通过 code-push 下发一个文本 bundle 并不违规，同时 code-push 也没办法下发打包后的原生平台代码，因为那不合规。

Flutter 打包后的 AOT 代码属于可执行二进制文件，如果通过热更新逻辑直接下发它，那无疑是违法了苹果 App store 和 Google Play 的政策，那 Flutter 能不能热更新呢？

答案是可以的，鉴于国内对热更新的“必须性”，也诞生了许多第三方框架，例如：

MxFlutter（腾信） 、Fair （58 同城） 、 liteApp （企业微信）、Flap （MTFlutter 美团）、flutter_code_push （chimera） 等等。

它们都不是直接下发编译后的二进制代码，例如：

• MxFlutter 是用 js/ts 写控件来下发更新；
• liteApp 是通过 vue 模版来输入；
• Flap 是对 Dart 的 DSL 和编码过程做处理下发；

这些做法都需要为了热更新去做一些牺牲，所以本质上 Flutter 在热更新这个问题一直“不友好”。

当然，如果不上架 Google Play ，那么 Android 热更新 so 动态库本来就不是什么门槛，所以如果你其实可以在 Android 上粗暴地使用已有的插件化方案解决。

多平台

最后说一些 Flutter 的多平台，还记得前面说的 Build apps for any screen 吗？Flutter 不也是 write Once, run everywhere 吗？官方不就是支持一套代码直接打包 Android、iOS、Web、Window、MacOS、Linux 这些平台吗？

从我的经验出发，我想说 write Once, run everywhere 很美好，但是不现实。 Flutter 确实可以一套代码直接运行到所有平台，但是就目前的体验而言，一套代码去适配所有平台的成本远远高于它所带来的便捷。

先说 Web ，Web 平台在几个平台里最特殊，因为它本身就需要适配 Mobile 端和 PC 端的操作逻辑，而目前Flutter Web ：

• 在 Mobile 端使用的是 HtmlCanvas ，也就是转化为 Web 端的“原生”控件进行渲染，这就带来了耦合和 API 适配的难度；
• 在 PC 端 Flutter 可以使用 CanvasKit 来进行绘制，但是它使用 wasm 技术目前相对“激进” ，实际无论在体积、SEO、兼容性上都存在问题；

所以 Flutter Web 目前还不好用，那它发布的稳定版本意义在哪里？ 就在于你的代码支持打包成 Web！

当你在构建完关于 Android 和 iOS 的应用后，你可以把 App 的一些 UI 和业务快速构建出 Web 页面，这就是它的价值所以，你完全不需要从 0 开始去实现这部分以后的内容，在“又不是不能用”的前提下。

目前比如阿里卖家、美团外卖商家课堂等等项目使用了 Flutter Web

再说 PC 端，PC 端本身的应用逻辑就和手机差异化很大：鼠标、键盘、可编窗口大小、横屏、滚动等这些方面，其实很难直接可以一套代码兼容，在我的理解更多是在 Android 和 iOS 上的一些控件、动画、UI、列表、业务逻辑等，可以在需要的时候直接在 PC 端上使用。如果真的需要比较好的体验，个人建议还是至少把 PC 和 Mobile 分开两个业务项目实现。

那如果真的要一套代码，有什么好的支持吗 ？也是有的，例如： responsive_framework 。

老孟导读：昨天期待已久的 Flutter 2.0 终于发布了，Web 端终于提正了，春季期间我发布的一篇文章，其中的一个预测就是 Web 正式发布，已经实现了，还有一个预测是：2021年将是 Flutter 大跃进的一年，等今年你年底总结的时候，让我们在来验证下这个预测是否应验。

后面几天会陆续发布 Flutter 2.0 更新更加详细的内容更新，敬请关注。

下面就让我们看看 Flutter 2.0 都有哪些重磅更新，原文链接：https://developers.googleblog.com/2021/03/announcing-flutter-2.html

我们针对Web，移动端和台式机构建的下一代Flutter

今天，我们宣布Flutter 2：Flutter的重大升级，使开发人员能够为任何平台创建美观，快速且可移植的应用程序。借助Flutter 2，您可以使用相同的代码库将本机应用程序发布到五个操作系统：iOS，Android，Windows，macOS和Linux。以及针对Chrome，Firefox，Safari或Edge等浏览器的Web体验。Flutter甚至可以嵌入到汽车，电视和智能家电中，为环境计算世界提供最普遍和最便携式的体验。

我们的目标是从根本上改变开发人员对构建应用程序的看法，而不是从您要定位的平台开始，而要从您要创建的体验开始。Flutter使您可以在品牌和设计走在前列的情况下，手工创造美好的体验。Flutter速度很快，可以将源代码编译为机器代码，但是由于我们对有状态的热重装的支持，您仍然可以提高生产力，允许您在应用程序运行时进行更改并立即查看结果。Flutter是开放的，成千上万的贡献者添加了核心框架，并通过软件包生态系统对其进行了扩展。

在今天发布的Flutter 2中，我们将Flutter从移动框架扩展到了可移植框架，释放了您的应用程序，使其可以在各种不同的平台上运行，而几乎没有改变。仅Play商店就已经有超过15万个Flutter应用程序，并且每个应用程序都可以通过Flutter 2免费升级，因为它们现在可以在不重写的情况下扩展到目标台式机和Web。

来自世界各地的客户正在使用扑，包括流行的应用程序，如微信， Grab, Yandex Go, Nubank, Sonos, Fastic, Betterment and realtor.com。在Google，我们依赖Flutter，Google的一千多名工程师正在使用Dart和Flutter构建应用程序。实际上，其中许多产品已经发货，包括Stadia，Google One和Google Nest Hub。

几个月前，Google Pay为其旗舰移动应用程序改用Flutter，他们已经在生产力和质量上取得了重大进步。通过统一代码库，该团队消除了平台之间的功能差异，并消除了超过一百万行代码。Google Pay还报告说，其工程师的效率要高得多，技术债务大大减少，统一发布流程（如跨iOS和Android的安全性审查和试验）得以实现。

Flutter on the web

Flutter 2中最大的公告也许是对Web的生产质量支持。

Web的早期基础是以document为中心的。但是，Web平台已发展为包含更丰富的平台API，这些API支持具有硬件加速的2D和3D图形以及灵活的布局和绘画API的高度复杂的应用程序。Flutter的Web支持基于这些创新，提供了以应用程序为中心的框架，该框架充分利用了现代Web所提供的所有优势。

此初始版本特别关注三种应用程序场景：

• 渐进式Web应用程序（PWA），将Web的访问范围与桌面应用程序的功能结合在一起。
• 单页应用程序（SPA），一次加载并与Internet服务之间进行数据传输。
• 将现有的Flutter移动应用程序带到Web上，从而为两种体验启用共享代码。

在过去的几个月中，在为稳定发布Web支持做准备的同时，我们在性能优化方面取得了许多进展，添加了一个新的由WebAssembly构建的由CanvasKit驱动的渲染引擎。Flutter Plasma是由社区成员Felix Blaschke构建的演示，展示了使用Dart和Flutter构建复杂的Web图形体验的简便性，这些体验也可以在桌面或移动设备上本地运行。

我们一直在扩展Flutter，以提供最佳的Web平台。最近几个月，我们添加了文本自动填充功能，对地址栏URL和路由的控制以及PWA清单。而且由于台式机浏览器与移动浏览器一样重要，因此我们添加了交互式滚动条和键盘快捷键，增加了台式机模式下的默认内容密度，并增加了屏幕阅读器对Windows，macOS和Chrome OS上可访问性的支持。

已经提供了使用Flutter构建的Web应用程序的一些示例。在教育工作者中，iRobot以其流行的Root教育机器人而闻名。Flutter对网络的生产支持使iRobot可以利用其现有的教育编程环境并将其移至网络，从而将其可用性扩展到Chromebook和其他浏览器是最佳选择的设备。iRobot的博客文章详细介绍了迄今为止的进展以及为何选择Flutter。

另一个例子是Rive，Rive为设计师提供了一个强大的工具，可用于创建可发布到任何平台的自定义动画。他们的更新后的Web应用程序现已在Beta中提供，完全由Flutter构建，并且是Flutter在此环境中可以提供的所有服务的一封情书。

您可以在我们的Medium出版物上的专用博客文章中找到有关Flutter的更多信息。

台式机，可折叠设备和嵌入式设备上的Flutter 2

除了传统的移动设备和Web之外，Flutter越来越多地扩展到其他设备类型，我们在今天的主题演讲中重点介绍了三个伙伴关系，这些伙伴关系证明了Flutter的便携性。

首先，Canonical与我们合作将Flutter带入桌面，工程师们贡献了代码来支持Linux上的开发和部署。在今天的活动中，Ubuntu团队展示了由Flutter重写的新安装程序的早期演示。对于Canonical来说，至关重要的是，它们可以在各种硬件配置上提供坚如磐石而又优美的体验。展望未来，Flutter是Canonical创建的未来台式机和移动应用程序的默认选择。

其次，微软正在继续扩大对Flutter的支持。除了正在进行的合作以在Flutter中提供高质量的Windows支持外，今天微软还将发布对Flutter引擎的支持，以支持新兴的可折叠Android设备。这些设备引入了新的设计模式，其应用程序可以扩展内容或利用双屏特性提供并行体验。在Surface工程团队的博客文章中，他们展示了他们的工作，并邀请其他人加入他们，共同完成适用于Surface Duo和其他设备的高质量实现。

最后，世界上最畅销的汽车制造商丰田汽车宣布了其计划，通过构建由Flutter提供动力的信息娱乐系统，将最佳的数字体验带入车辆。使用Flutter标志着与过去开发车载软件的方式大相径庭。丰田之所以选择Flutter，是因为其高性能和经验的一致性，快速的迭代和开发人员的人机工程学以及智能手机层的触摸机制。通过使用Flutter的embedder API，Toyota可以针对车载系统的独特需求量身定制Flutter。

我们很高兴继续与丰田和其他公司合作，将Flutter应用于汽车，电视和其他嵌入式设备，我们希望在未来几个月中分享更多示例。

不断发展的Flutter生态系统

现在，有超过15,000个Flutter和Dart软件包：来自Amazon，Microsoft，Adobe，Alibaba，eBay和Square等公司；到重要的软件包，如Lottie，Sentry和SVG，以及Flutter Favorite软件包，如sign_in_with_apple，google_fonts，geolocator和sqflite。

今天，我们宣布推出Google移动广告Flutter的测试版，这是一个可与AdMob和AdManager配合使用的新SDK，可提供多种广告格式，包括横幅广告，插页式广告，原生广告和奖励视频广告。我们一直在与几个主要客户一起试用该SDK，例如SuaMúsica（拉丁美洲最大的独立艺术家音乐平台），现在我们准备开放Google移动广告Flutter SDK以便更广泛地采用。

我们还将宣布对Flutter插件的一些核心Firebase服务进行更新：身份验证，Cloud Firestore，Cloud Functions，Cloud Messaging，Cloud Storage和Crashlytics，包括对可靠的null安全性的支持以及对Cloud Messaging软件包的全面检查。

Dart：Flutter背后的秘密调味料

正如我们已经指出的，Flutter 2可移植到许多不同的平台和外形上。轻松过渡到支持Web，桌面和嵌入式的过程很大程度上要归功于Dart，它是针对多平台开发进行了优化的Google编程语言。

Dart结合了一套独特的功能来构建应用程序：

• 无意外的可移植性，其编译器可为移动和台式机生成高性能的Intel和ARM机器代码，并为网络提供经过严格优化的JavaScript输出。相同的Flutter框架源代码可编译到所有这些目标。
• 在桌面和移动设备上进行有状态热重载的迭代开发，以及为现代UI编程的异步，并发模式设计的语言构造。
• 在所有这些平台上的Google级性能，可靠的null安全性保证了运行时和开发过程中的null约束。

没有其他语言可以结合所有这些功能。也许这就是为什么Dart是GitHub上发展最快的语言之一的原因。

Dart 2.12现已发布，是我们自2.0版以来最大的发行版，支持null安全性。可靠的null安全性有可能消除可怕的null引用异常，从而在开发和运行时提供了保证，即如果开发人员明确选择，则类型只能包含null值。最重要的是，此功能不是一项重大更改：您可以按照自己的步调将其逐步添加到代码中，并可以使用迁移工具在准备就绪时为您提供帮助。

今天的更新还包括FFI的稳定实现，使您可以编写可与基于C的API互操作的高性能代码。用Flutter编写的新的集成开发人员和分析器工具；以及许多性能和大小上的改进，这些改进可以进一步升级代码，而无需重新编译即可。有关更多信息，请查看专用的Dart 2.12公告博客文章。

Flutter 2：现已发布

关于Flutter 2，要说的话远远超出了我们在本文中可以涵盖的范围。实际上，合并的合并请求的原始列表是一个200页的文档！请访问Flutter 2上的独立技术博客，以获取有关许多新功能和性能改进的信息，我们认为这将使现有的Flutter开发人员满意，并立即下载。

我们还有一个主要的新样本，它展示了刚才提到的所有内容，该样本是与位于加拿大埃德蒙顿的屡获殊荣的设计团队gskinner合作构建的。Flutter Folio是一款剪贴簿应用程序，专为您的所有设备而设计。小屏幕体验是专为捕获内容而设计的；大屏幕支持使用台式机和平板电脑专用的习惯用法进行编辑；网络体验是为共享而量身定制的。所有这些量身定制的经验都共享相同的代码库，该代码库是开源的，可供您阅读。

如果您还没有尝试过Flutter，我们认为您会发现它对您的应用程序开发体验而言是一次重大升级。在Flutter中，我们提供了一个开放源代码工具包，用于通过单个代码库构建针对移动，台式机，Web和嵌入式设备的美观而快速的应用程序，这些应用程序既可以满足Google的苛刻需求，也可以满足我们客户的需求。

Flutter是免费的开放源代码。我们很高兴看到您使用Flutter 2构建的东西！

交流

老孟Flutter博客（330个控件用法+实战入门系列文章）：http://laomengit.com

添加微信或者公众号领取 《330个控件大全》和 《Flutter 实战》PDF。

欢迎加入Flutter交流群（微信：laomengit）、关注公众号【老孟Flutter】：

一、Android Studio 中创建 Flutter 项目

---

先安装 Flutter 和 Dart 插件 , 参考 【Flutter】Flutter 开发环境搭建 ( Android Studio 下 Flutter / Dart 插件安装 | Flutter SDK 安装 | 环境变量配置 | 开发环境检查 ) 博客 ;

1 . 选择创建 Flutter 应用 : 在 Android Studio 中 , 菜单栏 -> File -> New Flutter Project , 弹出 Create New Flutter Project 对话框 ; 四个选项分别是创建 Flutter 应用 , Flutter 插件 , Flutter 包 , Flutter Module , 这里需要创建 Flutter 应用 ( Flutter Application ) ;

2 . 配置 Project 信息 : 在 Project name 中输入项目名称 , Flutter SDK path 中选择 Flutter SDK 根目录 , Project location 中选择项目创建地址 ; ( 注意项目名称只能是小写字母和下划线组成 )

3 . 设置包名 : 输入一个包名 , 选择 Finish 完成 Flutter 项目创建 ;

等待 Flutter 应用创建完成 : 第一次生成 Flutter 应用 , 建议翻墙完成 , 几分钟完成 ;

( 第一次没有翻墙 , 20 分钟没有创建成功 )

二、命令行创建 Flutter 项目

---

使用 flutter 命令进行创建 , 使用 flutter 命令前 , 需要先将 flutter SDK 中的 flutter\bin 目录添加到环境变量中 ;

环境变量设置参考 【Flutter】Flutter 开发环境搭建 ( Android Studio 下 Flutter / Dart 插件安装 | Flutter SDK 安装 | 环境变量配置 | 开发环境检查 ) 六、设置 Flutter 环境变量 ( 在系统变量中配置 ) 博客 ;

命令格式 :

flutter create 项目名称

这里注意 , 一定要配置正确的源 : 环境变量中配置下面的源 , 否则出错 ;

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

配置镜像源环境变量如果出错 , 此处创建 Flutter 应用肯定出错 ;

环境变量配置错误问题处理 : 【错误记录】命令行创建 Flutter 应用报错 pub get failed (server unavailable) – attempting retry 1 in 1 second…

完整过程 :

执行如下命令 :

flutter create flutter_cmd

命令行输出 :

D:\002_Project\002_Android_Learn\Flutter_Cmd>flutter create flutter_cmd
Creating project flutter_cmd... androidx: true
  flutter_cmd\.gitignore (created)
  flutter_cmd\.idea\libraries\Dart_SDK.xml (created)
  flutter_cmd\.idea\libraries\Flutter_for_Android.xml (created)
  flutter_cmd\.idea\libraries\KotlinJavaRuntime.xml (created)
  flutter_cmd\.idea\modules.xml (created)
  flutter_cmd\.idea\runConfigurations\main_dart.xml (created)
  flutter_cmd\.idea\workspace.xml (created)
  flutter_cmd\.metadata (created)
  flutter_cmd\android\app\build.gradle (created)
  flutter_cmd\android\app\src\main\kotlin\com\example\flutter_cmd\MainActivity.kt (created)
  flutter_cmd\android\build.gradle (created)
  flutter_cmd\android\flutter_cmd_android.iml (created)
  flutter_cmd\android\.gitignore (created)
  flutter_cmd\android\app\src\debug\AndroidManifest.xml (created)
  flutter_cmd\android\app\src\main\AndroidManifest.xml (created)
  flutter_cmd\android\app\src\main\res\drawable\launch_background.xml (created)
  flutter_cmd\android\app\src\main\res\mipmap-hdpi\ic_launcher.png (created)
  flutter_cmd\android\app\src\main\res\mipmap-mdpi\ic_launcher.png (created)
  flutter_cmd\android\app\src\main\res\mipmap-xhdpi\ic_launcher.png (created)
  flutter_cmd\android\app\src\main\res\mipmap-xxhdpi\ic_launcher.png (created)
  flutter_cmd\android\app\src\main\res\mipmap-xxxhdpi\ic_launcher.png (created)
  flutter_cmd\android\app\src\main\res\values\styles.xml (created)
  flutter_cmd\android\app\src\profile\AndroidManifest.xml (created)
  flutter_cmd\android\gradle\wrapper\gradle-wrapper.properties (created)
  flutter_cmd\android\gradle.properties (created)
  flutter_cmd\android\settings.gradle (created)
  flutter_cmd\ios\Runner\AppDelegate.swift (created)
  flutter_cmd\ios\Runner\Runner-Bridging-Header.h (created)
  flutter_cmd\ios\Runner.xcodeproj\project.pbxproj (created)
  flutter_cmd\ios\Runner.xcodeproj\xcshareddata\xcschemes\Runner.xcscheme (created)
  flutter_cmd\ios\.gitignore (created)
  flutter_cmd\ios\Flutter\AppFrameworkInfo.plist (created)
  flutter_cmd\ios\Flutter\Debug.xcconfig (created)
  flutter_cmd\ios\Flutter\Release.xcconfig (created)
  flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Contents.json (created)
  flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-1024x1024@1x.png (created)
  flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-20x20@1x.png (created)
  flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-20x20@2x.png (created)
  flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-20x20@3x.png (created)
  flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-29x29@1x.png (created)
  flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-29x29@2x.png (created)
  flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-29x29@3x.png (created)
  flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-40x40@1x.png (created)
  flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-40x40@2x.png (created)
  flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-40x40@3x.png (created)
  flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-60x60@2x.png (created)
  flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-60x60@3x.png (created)
  flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-76x76@1x.png (created)
  flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-76x76@2x.png (created)
  flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-83.5x83.5@2x.png (created)
  flutter_cmd\ios\Runner\Assets.xcassets\LaunchImage.imageset\Contents.json (created)
  flutter_cmd\ios\Runner\Assets.xcassets\LaunchImage.imageset\LaunchImage.png (created)
  flutter_cmd\ios\Runner\Assets.xcassets\LaunchImage.imageset\LaunchImage@2x.png (created)
  flutter_cmd\ios\Runner\Assets.xcassets\LaunchImage.imageset\LaunchImage@3x.png (created)
  flutter_cmd\ios\Runner\Assets.xcassets\LaunchImage.imageset\README.md (created)
  flutter_cmd\ios\Runner\Base.lproj\LaunchScreen.storyboard (created)
  flutter_cmd\ios\Runner\Base.lproj\Main.storyboard (created)
  flutter_cmd\ios\Runner\Info.plist (created)
  flutter_cmd\ios\Runner.xcodeproj\project.xcworkspace\contents.xcworkspacedata (created)
  flutter_cmd\ios\Runner.xcworkspace\contents.xcworkspacedata (created)
  flutter_cmd\lib\main.dart (created)
  flutter_cmd\flutter_cmd.iml (created)
  flutter_cmd\pubspec.yaml (created)
  flutter_cmd\README.md (created)
  flutter_cmd\test\widget_test.dart (created)
Running "flutter pub get" in flutter_cmd...                         4.0s
Wrote 68 files.

All done!
[√] Flutter: is fully installed. (Channel stable, v1.12.13+hotfix.8, on Microsoft Windows [Version 10.0.18363.1139],
    locale zh-CN)
[√] Android toolchain - develop for Android devices: is fully installed. (Android SDK version 29.0.3)
[√] Android Studio: is fully installed. (version 4.0)
[!] IntelliJ IDEA Community Edition: is partially installed; more components are available. (version 2019.3)
[√] Connected device: is fully installed. (1 available)

Run "flutter doctor" for information about installing additional components.

In order to run your application, type:

  $ cd flutter_cmd
  $ flutter run

Your application code is in flutter_cmd\lib\main.dart.


D:\002_Project\002_Android_Learn\Flutter_Cmd>

三、通过命令行方式运行 Flutter 项目

---

通过命令行方式运行 Flutter 项目 : 进入 Flutter 项目根目录 , 然后调用 flutter run 命令 , 运行 Flutter 应用 ; 会自动在当前已经连接的设备或模拟器上运行该 Flutter 应用 ;

在上一小节执行 flutter create flutter_cmd 命令创建 Flutter 应用基础上执行下面的操作 ;

进入 flutter_cmd 应用根目录 :

cd flutter_cmd

运行 Flutter 应用 :

flutter run

执行 flutter run 命令后 , 就会开始构建 Flutter 应用 , 然后运行到当前已连接的设备中 ;

D:\002_Project\002_Android_Learn\Flutter_Cmd>cd flutter_cmd

D:\002_Project\002_Android_Learn\Flutter_Cmd\flutter_cmd>flutter run
Launching lib\main.dart on Pixel 2 in debug mode...
Running Gradle task 'assembleDebug'...
Running Gradle task 'assembleDebug'... Done                        59.1s
√ Built build\app\outputs\apk\debug\app-debug.apk.
Installing build\app\outputs\apk\app.apk...                        14.0s
D/FlutterActivity(13511): Using the launch theme as normal theme.
D/FlutterActivityAndFragmentDelegate(13511): Setting up FlutterEngine.
D/FlutterActivityAndFragmentDelegate(13511): No preferred FlutterEngine was provided. Creating a new FlutterEngine for this FlutterFragment.
D/FlutterActivityAndFragmentDelegate(13511): Attaching FlutterEngine to the Activity that owns this Fragment.
D/FlutterView(13511): Attaching to a FlutterEngine: io.flutter.embedding.engine.FlutterEngine@a04e361
D/FlutterActivityAndFragmentDelegate(13511): Executing Dart entrypoint: main, and sending initial route: /
Syncing files to device Pixel 2...
 5,251ms (!)

🔥  To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".
An Observatory debugger and profiler on Pixel 2 is available at: http://127.0.0.1:59944/K0Rd7AVm9xE=/
For a more detailed help message, press "h". To detach, press "d"; to quit, press "q".

手机界面展示 :

如果当前有多个设备或虚拟机连接在本电脑上 , 那么需要使用 flutter run -d '设备ID' 选择对应的设备 ;

四、通过 Android Studio 可视化方式运行 Flutter 项目

---

Android Studio 中选择 菜单栏 / File / Open 选项 ;

在弹出的对话框中 , 选择刚才使用命令行创建的 Flutter 项目 :

选择在 本窗口 “This Window” 中打开 ;

应用打开之后如下 :

点击运行应用按钮 , 即可在 Android 手机中运行该 Flutter 应用 ;

手机运行效果 :

五、通过 Android Studio 可视化方式运行 Flutter 项目种的 Android 项目

---

关掉 Android Studio 开发界面 , 进入到欢迎界面 , 选择打开一个已存在的项目 " Open an Existing Project " 选项 ;

选择已经创建的 Flutter 项目中的 android 目录 ;

刚打开该项目时 , 有一个同步过程 , 需要等待几分钟到十几分钟 , 这里要下载一堆依赖库及插件 , 同步完成后 ,

Android 基本操作 , 就不再展示了 ;

六、通过 Xcode 可视化方式运行 Flutter 项目种的 iOS 项目

---

需要在 MAC 中的 Xcode 中打开 Flutter 应用下的 iOS 项目 ;

七、 相关资源

---

参考资料 :

• Flutter 官网 : https://flutter.dev/
• Flutter 开发文档 : https://flutter.cn/docs ( 强烈推荐 )
• 官方 GitHub 地址 : https://github.com/flutter
• Flutter 中文社区 : https://flutter.cn/
• Flutter 实用教程 : https://flutter.cn/docs/cookbook
• Flutter CodeLab : https://codelabs.flutter-io.cn/
• Dart 中文文档 : https://dart.cn/
• Dart 开发者官网 : https://api.dart.dev/
• Flutter 中文网 ( 非官方 , 翻译的很好 ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
• Flutter 相关问题 : https://flutterchina.club/faq/ ( 入门阶段推荐看一遍 )

博客源码下载 :

• GitHub 地址 : https://github.com/han1202012/flutter_app_hello ( 随博客进度一直更新 , 有可能没有本博客的源码 )

• 博客源码快照 : https://download.csdn.net/download/han1202012/15463304( 本篇博客的源码快照 , 可以找到本博客的源码 )