Flutter中經過https post Json接收Json

Flutter 已然成爲煊赫一時前端框架。若問跨平臺到底有多香，天然是要多香有多香。今天我就分享這些天研究Flutter http鏈接和json格式轉換的內容，小弟對Flutter也是小白一名，若有錯誤請多加指正。

源碼下載地址

先來看看要完成的任務：調用https://test.apigj.com/apgetuserinfo 獲取用戶信息

{
  "userid": 7933833267642368
}

 

{
  "msg": "success",
  "code": 0,
  "userinfo": {
    "username": "Batman",
    "gender": 0,
    "birthday": 5025914914078720
  }
}

 

1. 處理Json和Object互轉

Flutter 官方給出兩種建議：手動序列化和自動生成代碼的方式

手動序列化適合較小的項目，具備簡單靈活的優點，但也容易出現因輸入錯誤形成沒法解析的小問題，我這裏就不展開了

自動生成代碼適合相對較大的項目，同時要求寫class定義數據結構：

首先，修改pubspec.yaml文件

pubspec.yaml

 

添加json_annotation, build_runner和json_serializable包到指定位置

而後，完成class定義數據結構：

1個請求和2個返回

 

req_base.dart

 

res_common.dart 爲了方便擴展全部的返回class都會繼承這個基本的返回class

 

res_ap_get_user_info.dart 這個文件裏同時包含了user_info的定義

class定義好後，這裏還有些錯誤，緣由是還有些代碼是須要Flutter自動生成的

在命令行中輸入flutter pub run build_runner build

成功之後會生成幾下.g.dart文件角，錯誤也就消失了

3個.g.dart文件

這些文件裏是對應class的解析和編碼的方法

res_ap_get_user_info.g.dart裏面包含ResApGetUserInfo和UserInfo的解析和編碼方法

這樣Json處理內容就這些，已經能夠很是方便的在對象和json之間互轉了

2. Https請求和返回

Http請求爲了防止線程阻塞，多數狀況下要使用多線程實現，Flutter的HttpClient已經在底層作了線程處理，因此要使用async, await或者Future進行同步線程，這裏是我Http請求的靜態方法

沒有找到辦法傳遞類型並生成對象，因此最後僅轉成Map輸出

還有就是在Flutter Widget中調用請求的方法

請求並顯示數據

 

最終的效果

整體來講Flutter仍是比較容易上手的，但要深刻的話也能夠實現多平臺的Flutter庫，基本上可使用Flutter實現一套代碼跨平臺，還不開始研究麼？

本示例實體class結構定義經過Api管家自動生成