Flutter初探

背景

Flutter是什么

跨端开发历程：Hybrid（Webview + js） => OEM Widgets（RN、Weex） => 自渲染（Flutter）
Flutter 是 Google 开源的 UI 工具包，帮助开发者通过一套代码库高效构建多平台精美应用
野心：Mobile、Web（已支持 beta 频道）、Desktop、Embedded

概览

• Flutter 框架总览

• 2D渲染引擎 Skia，原则上比 React Native 和 Weex 性能更好

RN框架原理图

Flutter框架原理图

• Dart && Widgets
• Material && Cupertino

其他

本人之前主要从事Web端开发，对客户端开发的流程还不太了解

• 操作系统：Windows 10
• IDE：Android Studio 3.5
• 编辑器：VS Code
• Android SDK 版本：30.0.1
• Flutter 版本：1.21.0-2.0.pre.114
• Dart 版本：2.9.0
• 预留硬盘空间 10Gb 以上

必要时可能需要科学上网，查看 官网文档 也建议开启科学上网，否则有些字体文件加载不了，左侧菜单栏会显示异常

安装踩坑

• 为 Flutter 设定镜像配置
• 安装 Flutter SDK，我是通过 命令行方式 安装的
• 配置 Flutter 环境变量，不同操作系统配置方式有所不同。配置完成后在终端命令行里运行 flutter --version 检查是否配置成功
• 安装 Android Studio，因为后续需要 IDE 协助安装一些 SDK、SDK Tools 和 Plugins
• 通过 Android Studio IDE 安装 Android SDK 和一些 SDK Tools，还有 Flutter 和 Dart 插件，该过程耗时比较长，主要是因为要下载一些很大的包（如果还要配置 AVD 虚拟设备的话还要更多时间）

• 常用编辑器里配置 Flutter（我常用 VS Code 做开发，扩展里面安装 Flutter 和 Dart 这两个插件，安装 Flutter 时会顺带推荐 Dart，如果装很久都装不上建议科学上网试试）

• 运行 flutter doctor 没报错就表示一切妥当，可以准备新建项目了（提示 No devices available 可以先不管，用 USB 连接真机，开启 USB 调试模式就可以；或者前面如果有用 Android Studio IDE 配置虚拟设备，后面调试时可以用虚拟设备跑一下。有其他报错可以运行 flutter doctor -v 查看更详细的提示信息）

• flutter doctor 正常后，去到你要创建项目的目录里，执行 flutter create 项目名 新建项目
• 执行 flutter run 跑项目，如果一直卡在 Running Gradle task 'assembleDebug'... 看这里（不过我貌似等一会就可以继续运行，没有改任何配置，然后手机上允许安装就可以调试 app 了）

初步体验

• 构建、测试和调试的集成体验较好，尤其是自带单元测试框架，仅需自己写测试用例就可以进行单元测试了 flutter test test/***.dart

• 热加载有时还是会失效
• widgets 的细粒度令我对部件和组件有了重新认识，日常 Web 开发多是 components 级别的组件开发，但 Flutter 里面是粒度更细的部件 widgets ，甚至在 Web 开发中的一个样式也是一个 widget（有好处，但也会引出下面的问题）

• widgets 嵌套层级问题，Padding 是一个 widget，Center 也是一个 widget，当两者都需要时，就会两层嵌套，所以代码常常看起来是多层嵌套的调用（有想过封装会不会代码层面上看得舒适点，但官方又推荐 组合大于继承 ）
• Flutter for Web 是基于 Canvas 上绘制，貌似对 SEO 不太友好
• Flutter 初始化最简单的一个官方示例，打包成 apk 都要 40多秒，平时用 Vue 初始化的示例，打包仅需要 10几秒

• 社区活跃度有待完善（很多第三方库还没时间了解，但结合公司项目来看，如果是数据可视化图表的库，很多是散装的，没有 echarts 那样集成完善，比如可能绘制条形图、词云、雷达图要分别引3个库；但 官方pub库 中每个第三方库都会有个 pub 评分，比较好奇它这个标准的参考意义）

• 需要学 Dart 语言（这里介绍了一些 dart和js的区别 ）和了解客户端的开发流程，开发调试要进行多端测试（推荐用苹果系统开发，Linux 和 Windows 上模拟 iPhone 更麻烦，都要基于虚拟机跑 Xcode。当然土豪最好还是真机调试）
• 对开发人员和开发配套环境要求更高，通常 IOS 端开发会日常使用 iPhone，Android 开发人员会日常使用安卓手机，但要求既带 iPhone 又带安卓手机这样的人貌似更难招

基于实践时间有限，一些疑惑和尚未实践的：

• 开发时运用假数据
• 一些更高级使用场景的单元测试
• 各种性能调优
• Flutter for Web 暂未深入实践，系统级别的操作是否都支持得很完善（比如读取相册选择图片上传，调用摄像头等）

总结

什么时候考虑用 Flutter？

• 希望产品设计风格在各平台一致
• 简单的功能性 APP（音视频解码播放转换等还是原生才能做，像做游戏这种级别的也不太适合，不过实现可能性上来说还是比 React Native 和 Weex 更高）
• 产品初期希望快速在各端同步迭代

Flutter 不是为了替代原生，而且苹果也不可能轻易就让 Google 蚕食自己的生态，跨端和原生还是会共存互补很长一段时间。我们用Flutter更应该是聚焦于一套代码维护各端开发的便利是否一直适用，引用别处看到的一段话：

跨平台的市场优势不在于性能或学习成本，甚至平台适配会更耗费时间，但是它最终能让代码逻辑（特别是业务逻辑），无缝的复用在各个平台上，降低了重复代码的维护成本，保证了各平台间的统一性，如果这时候还能保证一定的性能，那就更完美了

一些资源

Flutter官方中文文档：https://flutter.cn/docs
Dart官方文档：https://dart.cn/guides
官方packages：https://pub.flutter-io.cn/
闲鱼团队：https://www.yuque.com/xytech/...
GSY Flutter 系列掘金专栏：https://juejin.im/collection/...
Flutter官方的一些示例：https://flutter.github.io/sam...
帮助开发者快速上手的app：https://github.com/alibaba/fl...