Flutter 初体验

前言

这两年 Flutter 人气越来越高， 作为一个不断奋进的前端小靓仔， 不与时俱进怎么能行。 怀着这样的目的， 就开始了Flutter的发现之旅。

第一步当然是要想好做个啥东西， 有个好的起点就成功了一半， 不至于做到一半就不想做。

想了一下， 决定把之前做的一个web版的应用，用Flutter 实现一遍。

每一个部分都都很多内容， 每一个部分都可以单独成章， 为了避免文章过长，影响阅读体验， 每一部分就不细讲， 以后会以独立文章的形式分享。

另外，本文代码已上传至Github: 代码地址 ，如果本文对你有帮助，希望能点个:star2:, :)

原本的样子是这样的：

就是一个查询物流进度的一个东西， 输入个单号， 查一下。就用 Flutter 把这个实现一遍。

废话不多说， 搞起。

配置开发环境。

非本文重点， 略过。

具体配置可参考官方网站： https://flutterchina.club/setup-macos/

构建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 是用平时写业务代码之外的时间做的， 很多地方还比较简陋， 不过问题不大， 就是练手而已， 放佛打开了另一扇大门， 有很多有意思的东西可以做。

大概就这么多， 希望对大家有所帮助，后面还会持续更新， 喜欢的朋友可以关注下。

行文仓促， 难免出现纰漏， 欢迎指正， 谢谢。