Flutter预研总结

1,256 阅读3分钟

     作为近两年很有创新性的移动端技术亮点,flutter以出众的开发效率和运行效率,独树一帜的设计思路(自绘ui),良好的性能和系统稳定性,兼容Android、iOS(1.5.4后提供了Dart2Js编译,将dart编译成js),近几周学习了一下flutter,很开心体验到了flutter所带来的突破性性能。写篇文章总结flutter学习体会及问题。

一、flutter是什么?

      Flutter是一个由Google开发的开源移动应用软件开发工具包,用于为Android和iOS(web端有待观察,暂时只是将dart编译成js,将widget组件编译成dom)开发应用,同时也将是Google Fuchsia下开发应用的主要工具。

Flutter及dart的特性:


图1--Flutter及dart总体介绍

     dart在debug情况下采用jit解释执行,所以在debug情况下,ui比较卡顿,release条件下,aot运行,性能将有很大提升。

二、开发及集成流程;

     教程基本在Flutter中文网,flutterchina.club/。可能各个版本会有些细微差别,总体可参考。


图2:Flutter配置图:


图3:Flutter代码结构图:



三、Flutter与Native开发对比;


四、Flutter与React Native对比:

      从开发效率,运行效率,第三方库稳定性、app性能,等各方面来说,Flutter是远胜于React Native,React Native是一个并不成熟的框架,需要Native开发针对性的对其作性能优化、基础能力补齐等工作,有动画性能表现不佳、原生库存在内存泄露问题、debugSocket会导致死循环、跟踪解决问题需要从native和js两端着手、长列表性能不佳等问题,如下是针对React Native的基础能力补齐工作例子:


     而Flutter良好的性能及稳定性,大大减少了dart开发者的工作量。提高了整体的工作效率和业务输出能力。


五、其他预研点:

1、iOS Flutter动态化框架mxflutter

使用了js作为动态下发语言,描述当前dart节点,再解释成flutter widget,由flutter生成dom树并渲染。虽实现了动态化,但采用了js作为开发语言,失去了dart统一开发安卓和iOS的业务统一价值,且iOS对动态化一直比较排斥,对此思路及iOS动态化尝试并不推荐。


2、Flutter路由如何实现

可在Native端调用

[FlutterMethodChannel methodChannelWithName:routePath binaryMessenger:flutterViewController];

呼起Flutter页面时,可通过ui.window.defaultRouteName,获取传来的路由表信息,根据此route path来决定,当前首页是哪个。

如已开启Flutter,可通过EventChannel,通知Flutter,当前要跳转到哪个Flutter页面。

Flutter内部可实现Path与Widget页的对应关系表。


六、Flutter效果演示及demo源代码:

写了一个简易版的个人中心。性能和体验与native已经无差别。

见附件ios.mp4、android.mp4、flutter_mine.zip(不能上传附件,已放弃)


七、Flutter坑点总结;

1、生成aar
a.manifest冲突:
集成aar
Manifest merger failed with multiple errors
将aar里面的
android:icon="@mipmap/ic_launcher"android:label="@string/app_name"删除
b、aar applicationId去除

c、两者的gradle版本需要一致;
d、在gradle中添加compileOptions {    sourceCompatibility JavaVersion.VERSION_1_8    targetCompatibility JavaVersion.VERSION_1_8
}解决Invoke-customs are only supported starting with Android O (--min-api 26)
e、jvm配置提示https.proxy配置,此时检查网络高级设置,如失败,则invilidate and restart as。

2、flutter命令找不到;echo 'export PATH=$PATH:flutter命令所在bin文件夹路径' >> ~/.bash_profilesource ~/.bash_profile

3、flutter packages get一直卡着不动;export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn输入如下,再执行:flutter packages get

4、^1.2.3 等效于 >=1.2.3 <2.0.0flutter的pubspec.yaml文件

5、
apktool d -f /Users/liuyihao/Desktop/AndroidStudioProjects/bin_shou/android/yh_flutter/build/app/outputs/apk/debug/app-debug.apk
反编译apk,先下载apktool保存,和apktool.jar,再chmod +x两个文件,赋予执行权限。


6、
一直提示Received status code 407 from server: authenticationrequired说明~/.gradle/gradle.properties出了问题,password没有配置;如提示jvm的httpsproxy有问题,则检查电脑代码设置,如设置正确,可invalidate and restart as。