共计 2837 个字符，预计需要花费 8 分钟才能阅读完成。
前言
这两年 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 是用平时写业务代码之外的时间做的，很多地方还比较简陋，不过问题不大，就是练手而已，放佛打开了另一扇大门，有很多有意思的东西可以做。
大概就这么多，希望对大家有所帮助，后面还会持续更新，喜欢的朋友可以关注下。
行文仓促，难免出现纰漏，欢迎指正，谢谢。
