Flutter详解

笪栋
2023-12-01

跨平台

之前的跨平台方案一直没有很好地解决开发效率和性能相平衡的痛点,至于最流行的 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 ReduxRedux PersistRedux Epics

BLOCBLOC 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:网络请求

SqfliteJaguar ORMJaguar 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 报表

 类似资料: