前言Flutter这两年越来越火了。作为一个不断进取的前端小伙，怎能不与时俱进。带着这个目的，开始了Flutter的发现之旅。第一步当然是考虑要做什么。有一个好的起点是成功的一半。思前想后，我决定用Flutter实现我之前做的应用的web版。每个部分内容很多，每个部分可以单独成章。为避免文章过长影响阅读体验，各部分不再详述，后续会以独立文章的形式分享。另外，本文的代码已经上传到Github：代码地址，如果这篇文章对你有帮助，希望你能点一下？，:)原来的样子是这样的：查看进度是个东西物流，输入运单号，查询。只需使用Flutter实现即可。事不宜迟，让我们开始吧。配置开发环境。不是本文重点，略过。具体配置请参考[官网][2]构建UI的第一步是编写页面，熟悉语法。一些操作后：第一个页面写了：代码在这里：HomePage刚开始写的时候很不舒服，感觉很不灵活。不得不感叹Html的表现力。各种组件根据功能分为不同的类别：布局类Widget细分为只有一个布局类：线性布局Row和Column弹性布局流式布局级联布局和容器类，滚动类，...另一个烦人的问题是设置元素的背景颜色。设计师给定的背景色通常是#abcdef，或者rgb(a)。在Flutter中，不是很容易处理。很麻烦。如果谁有更方便的方法，欢迎留言。同样的，我也写了第二页：这个页面的代码：DetailPageUI部分很好写，即使没有基础，根据文档也能很快写出来，而且Flutter也提供了丰富的Web开发人员的示例。您所要做的就是访问数据、状态数据和状态管理数据。这一步几乎是每个新手都会遇到问题的地方。在这里，我将分享一个最常见的例子。本文中的代码是一个简单而完整的示例：它演示了如何请求数据、解析数据和渲染数据。比如解析Response：classTrackingResponse{finalStringmessage;最终intretcode；最终对象数据；TrackingResponse({this.message,this.retcode,this.data});factoryTrackingResponse.fromJson(json){returnTrackingResponse(message:json['message'],retcode:json['retcode'],data:json['data']);}}解析一个常见的数据对象：{deliveryType：'',currentStatus:'',//...trackingList:[{a:'',//...}]}classTrackingData{finalStringdeliveryType;最终字符串当前状态；最终字符串电话；最终字符串收件人姓名；最终字符串slsTrackingNumber；finalList跟踪列表；TrackingData({this.deliveryType,this.currentStatus,this.trackingList,this.phone,this.recipientName,this.slsTrackingNumber});factoryTrackingData.fromJson(Mapjson){varlist=json['tracking_list']asList;列出轨道ingList=list.map((i)=>TrackingItem.fromJson(i)).toList();返回TrackingData(currentStatus:json['current_status'],deliveryType:json['delivery_type'],trackingList:trackingList,phone:json['phone'],recipientName:json['recipient_name'],slsTrackingNumber:json['sls_tracking_number']);}}classTrackingItem{最终字符串状态；最终int时间戳；最终字符串消息；TrackingItem({this.status,this.timestamp,this.message});factoryTrackingItem.fromJson(MapparsedJson){returnTrackingItem(status:parsedJson['status'],timestamp:parsedJson['timestamp'],message:parsedJson['message']);}}另外推荐一篇比较详细的数据分析文章：ParsingcomplexJSONstatemanagementinFlutter这里有一篇不错的文章，大家可以看看：ListofstatemanagementapproachesandhowtouseScopedModelandReduxmanagesyourstate。在我的示例中，使用了ScopedModel。用法很简单：注册一个模型，然后注入组件来访问具体的代码。参考：main.dart的逻辑并不复杂，看看就知道了。如何包装？我们本地开发完成了，希望能装一个在手机上玩。怎么做并不难。下面用的是iPhone，就拿这个来举例。首先，打开你的Xcode，找到你的项目，点击general：会出现如下页面：点击AddAccount，这一步的目的是生成证书。如果您还没有登录，则需要使用您自己的AppleID登录。还有一点要注意：这里我们需要把com.example.xxx和example改成另外一个字符串，目的是生成一个唯一的标识。最后，检查您是否选择了您的设备：确认后，点击重试。然后就成功生成了：![Pictureuploading...]最后再运行一下：在终端再运行一下：flutterrun-dall然后成功安装到手机上：别忘了给这个设置信任app，到此应该就OK了，如果还有报错，可以在Xcode提示中看到。你完成了！XD是不是很简单呢，小伙伴们赶快玩起来吧。上次demo除了写业务代码，都是用时间做的。很多地方比较简陋，不过问题不大。这只是一种练习。它打开了另一扇门，还有很多有趣的事情可以做。就是这样。希望对大家有所帮助。以后我会继续更新的。喜欢的朋友可以关注一下。写的仓促，难免有错误。欢迎指正，谢谢。
