Flutter 初体验

2019年8月31日 163次阅读来源: 皮小蛋

《Flutter 初体验》

媒介

这两年 Flutter 人气越来越高，作为一个不停奋进的前端小靓仔，不与时俱进怎样能行。怀着如许的目标，就最先了Flutter的发明之旅。

第一步当然是要想好做个啥东西，有个好的出发点就胜利了一半，不至于做到一半就不想做。

想了一下，决议把之前做的一个web版的运用，用Flutter 完成一遍。

每一个部份都都许多内容，每一个部份都能够零丁成章，为了防止文章太长，影响浏览体验，每一部份就不细讲，以后会以自力文章的情势分享。

别的，本文代码已上传至Github: 代码地点，假如本文对你有协助，愿望能点个🌟, :)

底本的模样是如许的：

《Flutter 初体验》

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

空话不多说，搞起。

设置开辟环境。

非本文重点， 略过。

细致设置可参考[官方网站][2]

构建UI

着手第一步，先写个页面出来熟习下语法。

经由一番操纵： 
写出来了第一个页面：

《Flutter 初体验》

代码在这里： HomePage

刚最先写的时刻挺难熬痛苦的，觉得很不天真，不能不叹息 Html 的表现力之强。

种种组件分的很细，按功用分成了差别的品种：

规划类Widget

仅仅一个规划类就细分为：

线性规划Row和Column
弹性规划
流式规划
层叠规划

背面另有容器类，转动类, …

《Flutter 初体验》

另有个比较憎恶的题目是设置元素的背景色，设计师给的背景色平常都是 #abcdef, 或许rgb(a),
在Flutter里，就不是很好办了，非常使人头疼，假如有朋侪有比较轻易的方法能够留下批评。

一样的套路，把第二页也写了：

《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