Flutter 初体验

前言这两年 Flutter 人气越来越高， 作为一个不断奋进的前端小靓仔， 不与时俱进怎么能行。 怀着这样的目的， 就开始了Flutter的发现之旅。第一步当然是要想好做个啥东西， 有个好的起点就成功了一半， 不至于做到一半就不想做。想了一下， 决定把之前做的一个web版的应用，用Flutter 实现一遍。每一个部分都都很多内容， 每一个部分都可以单独成章， 为了避免文章过长，影响阅读体验， 每一部分就不细讲， 以后会以独立文章的形式分享。另外，本文代码已上传至Github: 代码地址，如果本文对你有帮助，希望能点个????, :)原本的样子是这样的：就是一个查询物流进度的一个东西， 输入个单号， 查一下。就用 Flutter 把这个实现一遍。废话不多说， 搞起。配置开发环境。非本文重点， 略过。具体配置可参考[官方网站][2]构建UI动手第一步，先写个页面出来熟悉下语法。经过一番操作： 写出来了第一个页面：代码在这里： HomePage刚开始写的时候挺难受的，感觉很不灵活， 不得不感叹 Html 的表现力之强。各种组件分的很细， 按功能分成了不同的种类：布局类Widget仅仅一个布局类就细分为：线性布局Row和Column弹性布局流式布局层叠布局后面还有容器类，滚动类, …还有个比较讨厌的问题是设置元素的背景色， 设计师给的背景色一般都是 #abcdef, 或者rgb(a), 在Flutter里，就不是很好办了， 十分令人头疼， 如果有朋友有比较方便的办法可以留下评论。同样的套路， 把第二页也写了：本页代码：DetailPageUI 的部分很好写， 即便没什么基础也能照着文档很快写完， 而且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 是用平时写业务代码之外的时间做的， 很多地方还比较简陋， 不过问题不大， 就是练手而已， 放佛打开了另一扇大门， 有很多有意思的东西可以做。大概就这么多， 希望对大家有所帮助，后面还会持续更新， 喜欢的朋友可以关注下。行文仓促， 难免出现纰漏， 欢迎指正， 谢谢。