乐趣区

关于flutter:Flutter初探

jiezi

背景

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…

退出移动版