flutter_wx的简单介绍

我的第一个flutter项目：购物app

这是个产假作业。故事是这样的。

濉溪ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联公司的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：13518219792（备注：SSL证书合作）期待与您的合作！

生了娃，生活一地鸡毛。擦，碎钞机的需求怎么那么多。

当时，有一堆返利优惠券app比较火

...这里扯多了这篇文章被锁了....

我就想，来扒一扒，他们是怎么赚钱的。

结论：淘宝联盟。

淘宝联盟是阿里巴巴旗下的亲儿子，不那么有名是因为是个私生子吧，官网上还有个没听过的名号叫“阿里妈妈”，呵呵。淘宝联盟是给淘宝上推广商品的人用的，他们有一个专门的名称，叫做淘宝客，即“推广者（Publisher）”，他们帮电商平台推荐商品给别的买家，买家购买后，电商平台可以增加销量，而他们则可以获得推广佣金。

后来，知道京东也有自己的联盟平台，叫做“京东联盟”，拼多多也有，叫做“多多进宝”。

回到这些app的赚钱逻辑上来。对于用户而言，它们的两个噱头是：

“用我们的app买，你可以自用省钱”

“用我们的app，分享给别人下单，你可以赚钱！”

所以，这些app推广起来很容易啊，因为谁用谁赚钱呀！

那么为何不自己搭一个呢？

与其这些佣金落到别人口袋，不如自己直接做最顶层上线，发展出N个下线，岂不是躺着赚钱，哈哈哈哈哈

搞清楚赚钱逻辑之后，我发现淘宝联盟的api是很开放的。

商品链接： ;pid=mm_343780171_368000361_101527600308itemId=595640102734src=qtka_wxxtdx=1

其中，activityId是优惠券id，pid是推广者在阿里妈妈官网注册的id，只有这个id是我注册的，那么佣金就到我口袋去了，哈哈哈。

刚好练一下flutter，一次开发，两端使用，我一个人就可以了。app暂时取名为“小猪购”，拿粉红猪贴牌。

演示视频：

Flutter初探--常用依赖包

国外地址：

国内镜像：

以 flutter_screenutil 为例

路由框架 annotation_route

状态管理 provider

UI适配 flutter_screenutil

刷新控件 flutter_easyrefresh

网络请求 dio

toast控件 fluttertoast

图表库 charts_flutter

网络监听 connectivity

事件总线 event_bus

日历组件 table_calendar

官方webview webview_flutter

第三方webview flutter_webview_plugin

该篇文章为常用依赖包总结，用来记录所需要的常用依赖包，后续会不断扩充内容~

使用Flutter + V8/JsCore开发小程序引擎（一）

众所周知，小程序是由HTML标签来开发原生组件，那么首先需要将HTML做解析，这里我们将HTML通过node脚本解析成JSON字符串，再用Dart来解析JSON，映射对应的标签到flutter的组件。这里先简单介绍实现的功能以及展示效果，后续再详细介绍。

为了高效解析，直接用flutter的组件名在HTML文件上开发

直接使用flutter的组件

模仿微信小程序的Api，cc对应是微信小程序的wx

以上HTML中的例子

《使用Flutter + V8/JsCore开发小程序引擎（二）》

《使用Flutter + V8/JsCore开发小程序引擎（三）》

Flutter踩坑之旅

记录下自己踩过的坑,怕忘了

一.TextField:

1.去掉输入数字的计数:decoration中的counterStyle: TextStyle(color: Colors.transparent).

2.去掉获取和失去焦点时边框改变颜色的效果:decoration内border: InputBorder.none,

3.去边框时设置BorderSide的width为0或color: Colors.transparent后依然存在边框时,需要设置为borderSide: BorderSide.none

4.设置背景色需要在decoration内     filled:true,   fillColor: Colors.blue同时设置才会显示

二.Uint8List类型和string类型,Listint的转换

连续两次base64解码时,参数只能使用string类型,但是base64解码后是Uint8List类型,此时需要将Uint8List类型转换为string类型,使用:utf8.decode(Uint8List)即可,需要import 'dart:convert';

Listint转Uint8List:读取接口时获取的数据是Listint的图片数据,想显示时需要转成Uint8List,然后使用Image.memory(),使用:Uint8List.fromList(Listint)即可

三.报错:DioError [DioErrorType.DEFAULT]: FormatException: Unexpected character (at character 1)MGFlMFo0NEZ3RWNMbE5YbGNGOXZGcUlJdUhIS2x2Q3NlckxqWXlEeG5JWndZdXIrSUpLN3ZOczR...

这是因为dio请求返回的数据默认是以json的格式读取的,而返回的数据是密文形式,需要修改dio的Options的responseType为ResponseType.PLAIN,这样返回的数据就以字符串形式处理.

四.去掉点击控件背景出现的水波纹效果,即去掉md的效果:

在main.dart的MaterialApp内的theme加上splashColor: Colors.transparent

五.布局去掉沉浸式效果和布局设置占满全屏却无效的问题

使用Scaffold的body的布局默认是沉浸式的,将状态栏一起包含了,可以通过在body后添加一层SafeArea即可.

布局设置double.infinity占满全屏高度却无效,大部分情况都是因为某一级的父布局的高度已经有了限制,所以设置充满屏幕只会充满父布局,有些widget默认是按内容填充类似wrap_content就会导致写布局的过程中自己没有限制高度但最后的布局不是自己想要的,可以给各个父布局设置不同背景颜色来查看是从哪儿开始被限制了高度来排查问题.

六.占满剩余空间,类似android的match_parent可以使用double.infinity

七.LinearProgressIndicator

1.LinearProgressIndicator设置进度值的颜色为单一颜色:valueColor : new AlwaysStoppedAnimation(Color(JColor.blue))

2.给LinearProgressIndicator设置圆角:ClipRRect(

borderRadius:BorderRadius.circular(60.0),

child:LinearProgressIndicator(value:0.2,backgroundColor:Color(JColor.grayBg),valueColor:new AlwaysStoppedAnimation(Color(JColor.blue)),

)

八.Expanded:

1.若嵌套多层column且内容的高度都不确定需要占满剩余空间,需要每层的column的内容都嵌套一层expanded来申明每层都占满剩余的空间,否则最里面的内容层需要指定高度,不然会报错

九.Container设置最小/大宽度或高度:

constraints:BoxConstraints(minHeight:56),

十.滑动的widget嵌套:

1.解决滑动冲突:内层嵌套的滑动widget设置physics:NeverScrollableScrollPhysics()

2.解决滑动嵌套ui显示不出来或者报错,内层的滑动widget设置shrinkWrap:true

十一.使用multi_image_picker: ^4.3.4安卓运行报错Didn't find class "com.sangcomz.fishbun.FishBunFileProvider"

1.需要android工程支持androidx,需要在android工程的gradle.properties内添加android.enableJetifier=true和android.useAndroidX=true并点击右上角的open for editing in android studio,运行成功后就可以了

十二.使用textfield时的文字ui总是很高

使用了maxlength且只是在textfield的InputDecoration设置counterStyle的颜色为透明使下面的计数文字消失会导致文字ui很高,counter的计数文字只是颜色是透明但依然在布局中占了位置所以导致文字很高,直接使用counterText:""即可

十三.使用ListView报错Vertical viewport was given unbounded height

需要将ListView放入Expanded内部