Flutter Https json object

Flutter 已然成为炙手可热前端框架。若问跨平台到底有多香,自然是要多香有多香。今天我就分享这些天研究Flutter http连接和json格式转换的内容,小弟对Flutter也是小白一名,如有错误请多加指正。

先来看看要完成的任务:调用https://test.apigj.com/apgetuserinfo 获取用户信息

请求数据
Flutter Https json object_第1张图片
返回数据

1. 处理Json和Object互转

Flutter 官方给出两种建议:手动序列化和自动生成代码的方式

手动序列化适合较小的项目,具有简单灵活的优势,但也容易出现因输入错误造成无法解析的小问题,我这里就不展开了

自动生成代码适合相对较大的项目,同时要求写class定义数据结构:

首先,修改pubspec.yaml文件

pubspec.yaml
Flutter Https json object_第2张图片
添加json_annotation, build_runner和json_serializable包到指定位置

然后,完成class定义数据结构:

1个请求和2个返回


Flutter Https json object_第3张图片
req_base.dart
Flutter Https json object_第4张图片
res_common.dart 为了方便扩展所有的返回class都会继承这个基本的返回class
Flutter Https json object_第5张图片
res_ap_get_user_info.dart 这个文件里同时包含了user_info的定义

class定义好后,这里还有些错误,原因是还有些代码是需要Flutter自动生成的

在命令行中输入flutter pub run build_runner build

成功以后会生成几下.g.dart文件角,错误也就消失了

Flutter Https json object_第6张图片
3个.g.dart文件

这些文件里是对应class的解析和编码的方法

Flutter Https json object_第7张图片
res_ap_get_user_info.g.dart里面包含ResApGetUserInfo和UserInfo的解析和编码方法

这样Json处理内容就这些,已经可以非常方便的在对象和json之间互转了

2. Https请求和返回

Http请求为了防止线程阻塞,多数情况下要使用多线程实现,Flutter的HttpClient已经在底层做了线程处理,所以要使用async, await或者Future进行同步线程,这里是我Http请求的静态方法

Flutter Https json object_第8张图片
没有找到办法传递类型并生成对象,所以最后仅转成Map输出

还有就是在Flutter Widget中调用请求的方法

Flutter Https json object_第9张图片
请求并显示数据

最终的效果

Flutter Https json object_第10张图片
请求并显示数据

总体来说Flutter还是比较容易上手的,但要深入的话也可以实现多平台的Flutter库,基本上可以使用Flutter实现一套代码跨平台,还不开始研究么?

源码下载地址

本示例实体class结构定义通过Api管家自动生成

你可能感兴趣的:(Flutter Https json object)