Flutter技术杂谈

web端的链接

flutter工程效果

Flutter VS 原生

无论如何，原生的运行效率毋庸置疑是最高的，但是从工程工作量的角度来对比的话，特别是快速试错和业务扩展阶段，flutter是目前为止比较推荐的利器。

Flutter VS Web

任何跨端的技术都是基于一码多端的思维，解决工程效率的问题，之前很多的跨端技术，例如React Native等都是基于web的跨端性解决方案，但是大家都知道，web在移动端上的运行效率和PC上有巨大差距的，这就导致RN不能很有效地在移动端完成各种复杂的交互式运算（例如复杂的动画运算，交互的执行性能等），即便是引入了Airbnb的Lottie引擎依然会在低端的手机上面显得很卡顿（当然也可以使用一些自研的引擎技术来针对各端来解决，不过这样就失去了跨端的意义）。

Flutter性能

lutter的编译方式和产物是决定其高效运行效率的前提，不同于web的跨端编译一样（web的跨端编译大多是选择了使用 “桥” 的概念来调用编译产物，通常是使用了原生端的入口 + web端的桥来实现），Flutter几乎是把dart的源码通过不同平台的编译原理生成各平台的产物，这种“去桥”的产物正式我们所希望得到的、贴近原生运行性能的编译产物（当然，在dart最初设计的时候，是参考了很多前端的结构来完成的，特别从语法上面能够很明显地感受到前端的痕迹，而且最初的dart2js的原理也是同样“桥”的概念）。

例如 9月23号 google发布的新flutter版本中，在支持的windows编译产物上，就是通过类似visual studio的编译工具（如果要将你的flutter工程编译成windows产物，需要提前安装一些VS相关的编译插件），生成了windows下的工程解决方案.sln，最终生成dll的调用方式，运行起来很流畅，可以下载附件中的Release.zip来尝试运行：

（PS：这里所有编译工程都是通过同一套代码完成，包括上文中的web地址、移动端案例还有这里的windows案例）

与RN的性能对比：

以上是同样功能模块下，Flutter和RN的一些数据上的对比，是从众多的数据中抽取出来比较有代表性的一组

跨端平台的多样性

![]](img-blog.csdnimg.cn/20201022165…)

引擎

Flare-Flutter是一款十分优秀的flutter动画引擎，编译出的动画已经在windows、移动端、web上亲测验证过。

语法糖

综合测评

互动应用

flutter生成的互动可以嵌入到任何端中使用精简的指令集进行互动，为互动场景（教学场景等带来巨大的希望），以下是直播同步互动的demo场景

2.Flutter业务架构

flutter中目前是没有现成的mvvm框架的，但是我们可以利用Element树特性来实现mvvm

ViewModel

abstract class BaseViewModel {

bool _isFirst = true;

BuildContext context;

bool get isFirst => _isFirst;

@mustCallSuper

void init(BuildContext context) {

this.context = context;

if (_isFirst) {

_isFirst = false;

doInit(context);

}

}

// the default load data method

@protected

Future refreshData(BuildContext context);

@protected

void doInit(BuildContext context);

void dispose();