Flutter详解
跨平台
之前的跨平台方案一直没有很好地解决开发效率和性能相平衡的痛点，至于最流行的 React Native 更是坑无数，尝试了1周多就放弃了，期间正值类似 Udacity 和 Airbnb 之类的大公司放弃RN。但 Flutter 的出现，让我对跨平台方案不靠谱的想法有了很大转变，这是一年前的最初的看法，而到了现在，Flutter 之风吹遍全球，可以看到这个跨平台方案其优秀之处，当然少不了谷歌这个大靠山为基础。
Dart 语言
关于 Dart 语言，学习过 Java 的其实应该都会很熟悉，不敢说 90% 的语法类似，至少 80% 会让你似曾相识。特别是 Dart 的 async 和 await 让编写异步代码异常的简单方便。虽然语言确实没有必要没事多学一门，但毕竟语言相通，而与框架最贴合的语言，倒是更应该学学了。
而与 Flutter 的结合，我倒不觉得会是败笔，不敢说完美贴合，但是确实非常好用。举个例子，Flutter 的界面摒弃了 Android 之前的 XML 加 Java 方案，直接代码即界面，因此 Dart 的语法反倒是跟 Flutter 的声明式 UI 编程配合默契。而随之带来的便是，界面开发效率的极大提升。因为用代码实现界面，可组合性极大提升了，回头去看 XML，实在是无力去爱。主观上感受下，Android 平台上的开发效率至少是2-3倍的提升，这还没包括跨平台的部分。
框架生态
新生的语言或者生态（Dart 其实已经出了好多年了，只是一直不愠不火，这次是借着 Flutter 风生水起），都需要有一定的发展期，在成熟之前，我觉得可以观望学习，学习框架的思想和方法论，至少等大势所趋时，不会是最后一个上车的。不过，对于 Flutter 的生态，本人却是挺看好的，在 18 年年底决定采用之时，已经出了第一个 Flutter 稳定版，而如今 19 年 9 月，却已经发布了 Flutter 1.9，不得不说，真香了。
当然，目前生态上跟 Java 之类的确实还相差甚远，不过好在还有平台混合开发这个利器。Dart 或者 Flutter 层面无法实现的，通过简单的 Flutter 插件，即可委托给原生实现。当然，跟系统耦合很大的应用，目前很难利用 Flutter 实现优势开发，但新应用或者独立应用，完全可以借着 Flutter ZAO 一 ZAO 了。
资料赠送
最后附上一年前，针对 Flutter 技术选型时候的两个资料，一个是跟 RN 的技术方案对比，一个是 Flutter 入门学习资料。
========================= 跨平台方案 RN vs Flutter =========================
1. 技术现状对比
Flutter和RN谁才是更好的跨端开发方案?
结论概要：Flutter在跨端开发上在同样投入的情况下，可以获得更佳的性能，更好的用户体验。
Flutter vs React Native，谁才是跨平台应用开发的最佳利器？
结论概要：React Native 和 Flutter 都有自己的优缺点。React Native 有更多的社区支持，Flutter 依然很年轻，而 React Native 已经铺好了路。
Flutter 看上去很吸引人，但还需要一些改进，还需要一些时间才能展示出潜力。
1.1 Flutter 资讯
Flutter 1.0 正式版: Google 的便携 UI 工具包
为什么 Flutter 能最好地改变移动开发（Android 和 Flutter 的代码量对比非常悬殊，减少了 85%）
将 75000 行原生 iOS 应用程序移植到 Flutter 后，结果太惊讶！（iOS 和 Flutter 的代码量对比减少了 50%）
为什么 Flutter 会选择 Dart ？
1.2 React Native 资讯
Udacity 也弃用 React Native 了
Airbnb: React Native 从选择到放弃
2. 技术维度对比
| 维度 | RN | Flutter | 胜者 |
|---|---|---|---|
| 应用性能 | 中 普通场景下性能媲美原生，但复杂场景或是低端手机上性能较差。 | 高 原生渲染，低端手机未特意优化情况下，性能甚至超越原生。 | Flutter |
| 学习曲线 | 高 除了 RN 自身的学习门槛，还需对 Android 和 iOS 有额外的熟悉度。 | 中 学习门槛相对较低，框架使用简单。 | Flutter |
| 开发效率 | 中 UI 组件可用度较低，三方组件也需要较多额外定制工作。 | 高 框架自带 UI 组件拿来即用，也有很灵活的自定义空间。 | Flutter |
| 社区文档 | 高、中 发展相对较快，但是文档比较缺乏。 | 低、中 文档比较全面，本身代码也有很多注释。 刚刚发布 1.0 版本，社区活跃度逐渐升高。 | RN |
| 跨平台 | 中 核心理念是 “learn once write anywhere” 而非 “write once run anywhere”。 框架本身需要处理大量平台相关的逻辑，随着系统版本变化和API的变化，需要处理不同平台的差异，甚至有些特性只能在部分平台上实现，跨平台特性大打折扣。 | 高 做到了 “write once run anywhere”，后续的目标是全平台。 重新实现一套跨平台的UI框架，包括UI控件、渲染逻辑甚至开发语言。渲染引擎依靠跨平台的Skia图形库来实现，依赖系统的只有图形绘制相关的接口，可以在最大程度上保证不同平台、不同设备的体验一致性，逻辑处理使用支持AOT的Dart语言，执行效率也比JavaScript高得多，另外还提供了JIT的模式，可以在开发过程中实现百毫秒级的热刷新，极大提高开发效率。 | Flutter |
| 升级 | 不同版本升级是个坑。 UI 组件依赖于原生系统，系统升级需要依赖 RN 升级。 | 当前升级到 beta3 以及 stable 版本都是无感的。 UI 组件实现不依赖于原生系统，系统升级兼容工作只有原生能力相关的部分需要处理。 | Flutter |
| 语言 | JS缺乏类型系统，静态检查能力弱。 | Dart 2.1 包含强类型系统，静态检查能力强。 Dart是一种强类型、跨平台的客户端开发语言。具有专门为客户端优化、高生产力、快速高效、可移植（兼容ARM/x86）、易学的OO编程风格和原生支持响应式编程（Stream & Future）等优秀特性。Dart主要由Google负责开发和维护，在2011年10启动项目，2017年9月发布第一个2.0-dev版本。其他 | Flutter |
3. 技术选型倾向
Flutter
React Native
目前已经采用 Flutter 的中国公司有：阿里咸鱼、京东金融、腾讯NOW直播等。
4. Flutter 技术资源
咸鱼技术 Flutter
NOW终端技术团队
美团技术团队 Flutter
推荐几个优质Flutter 开源项目
Flutter Packages
========================= Flutter 必知必会 =========================
Flutter 必知必会
1. 框架对比
1.1 技术现状
Flutter和RN谁才是更好的跨端开发方案?
Flutter vs React Native，谁才是跨平台应用开发的最佳利器？
Udacity 也弃用 React Native 了
Airbnb: React Native 从选择到放弃
1.2 框架优势
Flutter 1.0 正式版: Google 的便携 UI 工具包
为什么 Flutter 能最好地改变移动开发（Flutter 对比 Android 代码量减少 85%）
将 75000 行原生 iOS 应用程序移植到 Flutter 后，结果太惊讶！（Flutter 对比 iOS 代码量对比减少 50%）
为什么 Flutter 会选择 Dart ？
2. 资讯文章
2.1 官方文档
Flutter 官网
Flutter 中文网
Flutter Code Labs
Flutter Pub
2.2 入门资源
Flutter Todo 示例工程
Flutter by Example：非常适合练手
Awesome Flutter
Dart Packages
2.3 技术站点
咸鱼技术 Flutter
NOW终端技术团队
美团技术团队 Flutter
2.4 博客文章
roughike - 博客
Didier Boelens - 博客
GuruMeditation - 博客
推荐几个优质 Flutter 开源项目
Flutter之支持不同的屏幕尺寸和方向
帝国的纷争-Flutter-UI绘制解析
Widget — State — BuildContext — InheritedWidget
Putting build methods on a diet - tips and tricks for cleaner Flutter UI code
Flutter: Using Overlay to display floating widgets
Reactive Programming — Streams — BLoC
Zero to One with Flutter
Inheriting Widgets
Flutter Layout Cheat Sheet
Flutter : Widget Size and Position
Flutter: Push, Pop, Push
Building Forms with Flutter
Animations in Flutter - easy guide - tutorial
Flutter : Shared Element Transitions — Hero — Heroes
Securing Flutter Apps
Elements, Keys and Flutter’s performance
Performance testing of Flutter apps
3. 开源项目
3.1 软件架构
Flutter Redux、Redux Persist、Redux Epics
BLOC、BLOC DOC
MobX
Flutter Clean Architecture
3.2 开发工具
Flutter Launcher Icons：应用图标更新
Json Annotation：JSON解析
结合 json_serializable 和 build_runner 一起使用
Flutter i18n：IntelliJ 插件，根据 JSON 语言资源文件自动生成国际化相关代码
Flutter Provider：免除手动编写 InheritedWidget 之苦
Flutter error catching & handling plugin
Flutter Hooks：类切面编程
Flutter Plugins
Dart Analyzer
3.3 应用设计
Panache：主题编辑工具
Flutter Icon
Material Icons
Meterial Design Color Tool
Coolors
3.4 应用插件
Flutter Plugins：官方插件列表
Dio：网络请求
Sqflite、Jaguar ORM、Jaguar Query Sqflite
Flutter Permission Handler：动态权限申请
Date Format：日期格式化
Flutter Background Fetch：后台定时任务
Flutter Mobile Vision：来自 Google Mobile Vision，实现人脸扫描、二维码和文字识别
Flutter UDID
State Machine
Flutter Fimber: Extensible logging for Flutter
Equatable: helps to implement equality
Flutter Secure Storage
Flutter error catching & handling plugin
3.5 界面组件
Flutter Widget Livebook
Flushbar
Flutter Toast
Flutter Swiper
Flutter SVG
Flutter Html
Flutter IntroViews
Flutter Intro Slider
Flutter Screens：一些现成组件
Flutter Sticky Headers：列表吸顶控件
Flutter Circular Chart：圆圈绘图控件
Google Charts：非官方绘图库
Country Code Picker：国家选择器
Flutter Type Ahead：搜索自动联想
Pinch Zoom Image
Flutter Gesture Password：手势密码
Flutter Statusbar Manager
SVG Drawing Animation
Flutter Masked Text
3.6 界面动画
Flutter Villains：转场动画
3.7 自动化测试
test：Dart 标准测试工具
Flutter Gherkin：BDD行为驱动开发测试工具
Ozzie：测试截屏并生成 HTML 报表
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！