flutter 实践记录

需求：一款类似于猫儿的播放类app

工具 ：Android studio

语言 ：Dart、Android 、ios

过程：

一、配置开发必备插件：

# HTTP网络请求
dio: ^3.0.10
# 微信分享、支付
wechat_kit: ^2.0.0
# 支付宝支付
alipay_kit: ^2.0.0
# 官方提供的App内购，支持苹果的IAP和安卓内购
flutter_inapp_purchase: ^3.0.1
# 音频播放，支持本地和url播放
assets_audio_player: ^2.0.13+6
# toast提示语
fluttertoast: ^7.1.6
# 菊花loading框
flutter_easyloading: ^2.2.2
# 发布/订阅通知
event_bus: ^1.1.1
#上拉加载下拉刷新 https://github.com/peng8350/flutter_pulltorefresh
pull_to_refresh: 1.6.3
# 屏幕适配
flutter_screenutil: ^4.0.3+2
# 轮播图
flutter_swiper: ^1.1.6
# json
json_annotation: ^3.1.1
# Dart 常用工具类库 https://github.com/Sky24n/common_utils
common_utils: ^1.1.3
# 路由、状态管理等
get: ^3.26.0
#本地存储
flutter_tag_layout: ^0.0.3
shared_preferences: ^0.5.12+4
url_launcher: ^5.7.10
# 选相册
multi_image_picker: ^4.7.14
# 网页
webview_flutter: ^1.0.7
# uuid
uuid: ^2.2.2
# 获取设备信息
device_info: ^1.0.0
# 获取app信息
package_info: 0.4.3+4
# app更新
ota_update: ^2.4.1
# 图片浏览
photo_view: ^0.10.2

二、过程中的坑位

1,各大版本sdk 对应当前Flutter 开发工具Dart 版本 问题

解决方案：引入any 再取固定值 类似 photo_view: any, 引入成功，再到如图所示目录下去对应适合的版本号，注插件文档说明，也需看对应版本的说明

2、UI基坑位，Expanded 组件只能用于 Row、Column、Flex内，导致问题 debug 包和release 包UI不一致，报错，在debug包下正常，release包下报错

3、插件坑位，图片显示采用阿里 oss存储，访问需要签名，因为用到了oss flutter的相关插件，在插件官网找了很久，能用的几乎都用了一遍，但是都不能实现自己需求，甚至崩溃，

解决方案：下载插件包源码到本地，进行修改，引入本地插件，解决其中插件存在的问题，包后续我会打包到csdn，需要用的可以用。

4、图片显示坑位，简单的url显示灰常简单，这里因oss签名访问，调用本地插件是一个异步的过程，所以普通的Image 控件的网络模式是用不了的。

解决方案：对显示图片的weight，进行自定义封装，内部局部刷新，工程统一使用此图片显示控件

5、Toast 不显示坑位：Toast全局显示，使用场景弹框选择之后关闭弹框，toast不显示。

解决方案：进行延时关闭操作：

Future.delayed(Duration(milliseconds: 1000)).then((e){
  Navigator.pop(context);
}

6、text,显示坑位： 字符过长不换行，会报超出屏幕错误，通常出现在column,row嵌套比较深的情况下。

解决方案：进行Container包裹，写死宽度，因为是有全局宽度适配插件，所以一般情况下不会出问题（后续有更好的方案会更新）

 

三、结果项目如期完成，总结：

1、flutter app,个人感觉app运行很好，和原生差不多，甚至在渲染方面超过原生，并且很少出行奔溃的现象。

2、提升开发效率，出体验和一个ios同事一起开发，效率理论上来说，是提升了一倍，排除前期踩坑