乐趣区

Flutter 初体验

前言

这两年 Flutter 人气越来越高,作为一个不断奋进的前端小靓仔,不与时俱进怎么能行。怀着这样的目的,就开始了 Flutter 的发现之旅。
第一步当然是要想好做个啥东西,有个好的起点就成功了一半,不至于做到一半就不想做。
想了一下,决定把之前做的一个 web 版的应用,用 Flutter 实现一遍。
每一个部分都都很多内容,每一个部分都可以单独成章,为了避免文章过长,影响阅读体验,每一部分就不细讲,以后会以独立文章的形式分享。
另外,本文代码已上传至 Github: 代码地址,如果本文对你有帮助,希望能点个????, :)
原本的样子是这样的:

就是一个查询物流进度的一个东西,输入个单号,查一下。就用 Flutter 把这个实现一遍。
废话不多说,搞起。
配置开发环境。
非本文重点,略过。

具体配置可参考 [官方网站][2]

构建 UI
动手第一步,先写个页面出来熟悉下语法。

经过一番操作:
写出来了第一个页面:

代码在这里:HomePage
刚开始写的时候挺难受的,感觉很不灵活,不得不感叹 Html 的表现力之强。
各种组件分的很细,按功能分成了不同的种类:
布局类 Widget
仅仅一个布局类就细分为:

线性布局 Row 和 Column
弹性布局
流式布局
层叠布局

后面还有容器类,滚动类, …

还有个比较讨厌的问题是设置元素的背景色,设计师给的背景色一般都是 #abcdef, 或者 rgb(a), 在 Flutter 里,就不是很好办了,十分令人头疼,如果有朋友有比较方便的办法可以留下评论。
同样的套路,把第二页也写了:

本页代码:DetailPage
UI 的部分很好写,即便没什么基础也能照着文档很快写完,而且 Flutter 还为 Web 开发者提供了丰富的示例
后面我们要做的就是接入数据和状态
数据和状态管理
数据
这一步几乎每个新手都会遇到问题,这里就把一个最常见的示例分享出来。
本文的代码就是一个简单完整的示例:
演示了如何请求数据,解析数据,渲染数据。
比如解析 Response:
class TrackingResponse {
final String message;
final int retcode;
final Object data;

TrackingResponse({this.message, this.retcode, this.data});

factory TrackingResponse.fromJson(json) {
return TrackingResponse(
message: json[‘message’], retcode: json[‘retcode’], data: json[‘data’]);
}
}

解析一个常见的数据对象:
{
deliveryType:”,
currentStatus: ”,
// …
trackingList: [
{
a: ”,
// …
}
]
}

class TrackingData {
final String deliveryType;
final String currentStatus;
final String phone;
final String recipientName;
final String slsTrackingNumber;
final List<TrackingItem> trackingList;

TrackingData({
this.deliveryType,
this.currentStatus,
this.trackingList,
this.phone,
this.recipientName,
this.slsTrackingNumber
});

factory TrackingData.fromJson(Map<String, dynamic> json) {

var list = json[‘tracking_list’] as List;
List <TrackingItem> trackingList = list.map((i) => TrackingItem.fromJson(i)).toList();

return TrackingData(
currentStatus: json[‘current_status’],
deliveryType: json[‘delivery_type’],
trackingList: trackingList,
phone: json[‘phone’],
recipientName: json[‘recipient_name’],
slsTrackingNumber: json[‘sls_tracking_number’]
);
}
}

class TrackingItem {
final String status;
final int timestamp;
final String message;

TrackingItem({this.status, this.timestamp, this.message});

factory TrackingItem.fromJson(Map<String, dynamic> parsedJson) {
return TrackingItem(
status: parsedJson[‘status’],
timestamp: parsedJson[‘timestamp’],
message: parsedJson[‘message’]
);
}
}

另外推荐一个更加详细的数据解析文章:在 Flutter 中解析复杂的 JSON
状态管理
这里有一篇不错的文章,大家可以看一下: List of state management approaches
还有如何使用 Scoped Model 和 Redux 管理你的状态
在我的这个例子里用的是 Scoped Model,用法很简单:注册一个 model,再注入组件就可以访问了。
具体代码参考:main.dart
逻辑不复杂,看看就知道怎么做了。
如何打包
我们本地开发完了,希望能在手机上装一个来玩耍,该怎么做呢,也不难。
在下用的是 iPhone,就以这个举例了
首先,打开你的 Xcode,找到你的项目,点击 general :

出现以下页面:

点击 Add Account,这一步的目的是生成证书
如果没有登陆,需要你用自己的 Apple ID 登陆。
还有一点要注意:

这里要把把 com.example.xxx 改一下,example 改成别的字符串,目的是生成唯一表识。

最后确认下有没有选择你的设备:

确认好之后,点击 Try again.
然后就成功生成了:
![图片上传中 …]
最后再重新 run 一下:

在终端也重新 run 一下:flutter run -d all
然后就在手机上安装成功了:

别忘了给这个 app 设置信任至此应该都 OK 了,如果还有报错,可以在 Xcode 的提示里看。
大功告成!XD
是不是很简单,小伙伴们赶紧上车玩玩把。

最后
这个 demo 是用平时写业务代码之外的时间做的,很多地方还比较简陋,不过问题不大,就是练手而已,放佛打开了另一扇大门,有很多有意思的东西可以做。
大概就这么多,希望对大家有所帮助,后面还会持续更新,喜欢的朋友可以关注下。
行文仓促,难免出现纰漏,欢迎指正,谢谢。

退出移动版