本文首發於公眾號「劉望舒」
ReactNative入門系列
React Native元件
Flutter基礎系列
前言
在Android開發中如果我們想要請求網路，可以使用HttpClent、HttpURLConnection，但在專案中一般都會使用OkHttp和Retrofit。在Flutter也是如此，系統提供了HttpClient，但在專案中一般會使用第三方庫，比如http和Dio，如果你想找到更多的第三庫，可以在pub.dartlang.org/ 上查詢想要的庫。本篇文章以Dio為例，另外還會介紹JSON資料解析方面的知識。
1.Dio的使用入門
Dio是一個強大的Dart Http請求庫，支援攔截器，全域性配置，FormData，請求取消，檔案下載，超時等。
新增依賴 在pubspec.yaml中新增依賴。
dependencies:
dio: 2.1.7
複製程式碼官網給出了一個簡單的例子：
import 'package:dio/dio.dart';
void getHttp() async {
try {
Response response = await Dio().get("http://liuwangshu.com");
print(response);
} catch (e) {
print(e);
}
}
複製程式碼如果想要傳送一個GET請求:
Response response;
response=await dio.get("/test?id=3&name=liuwangshu")
print(response.data.toString());
// 請求引數也可以通過物件傳遞，上面的程式碼等同於：
response=await dio.get("/test",data:{"id":3,"name":"liuwangshu"})
print(response.data.toString());
複製程式碼傳送一個POST 請求:
response=await dio.post("/test",data:{"id":3,"name":"liuwangshu"})
複製程式碼傳送一個FormData：
FormData formData = new FormData.from({
"name": "liuwangshu",
"age": 18,
});
response = await dio.post("/info", data: formData);
複製程式碼還有很多示例在github上，地址為：github.com/flutterchin…
2.Dio訪問網路的例子
import 'dart:convert';
import 'dart:io';
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
var _ipAddress = 'Unknown';
_getIPAddress() async {//1
var url = 'https://httpbin.org/ip';
Dio _dio = Dio();
String result;
try {
var response = await _dio.get(url);//2
if (response.statusCode == HttpStatus.ok) {
var data= jsonDecode(response.toString());//3
result = data['origin'];
} else {
result =
'Error getting IP status ${response.statusCode}';
}
} catch (exception) {
result =exception.toString();
}
if (!mounted) return;
setState(() {
_ipAddress = result;//4
});
}
@override
Widget build(BuildContext context) {
var spacer = SizedBox(height: 10.0);
return Scaffold(
body: Padding(
padding: EdgeInsets.all(100.0),
child: Column(
children: <Widget>[
Text('IP地址為：'),
spacer,
Text('$_ipAddress'),
spacer,
RaisedButton(
onPressed: _getIPAddress,
child: Text('請求網路'),
),
],
),
),
);
}
}
複製程式碼async和await是Dart語言用來支援非同步程式設計的關鍵字，註釋1處的async關鍵字使得_getIPAddress方法變為了非同步方法，註釋2處的await關鍵字只能在非同步方法中使用，它使得註釋2處後面的程式碼等到get請求返回後再執行。 如果網路請求返回的狀態碼為200，就在註釋3處進行Json解析，將結果賦值給result變數。 當我們點選介面上按鈕時，會呼叫_getIPAddress方法，在註釋4處將請求的結果賦值給_ipAddress並顯示在Text中。 網路請求成功後，效果如下圖。
3.JSON資料解析
常用的JSON資料解析方式主要有三種，這裡分別介紹下。
3.1 使用json.decode()方法
第2小節的例子用到的就是json.decode()方法，需要引入dart:convert庫。json.decode() 方法會將 String型別資料解析成Map資料結構：Map<String, dynamic>, 取資料的格式為object[key]。
上面例子中返回的JOSN資料為：
{
"origin": "111.193.7.70, 111.193.7.70"
}
複製程式碼對於不復雜的JOSN資料使用json.decode()方法是一個不錯的選擇，但實際專案中的JOSN資料會複雜一些，如果每次取資料都用object[key]，那麼很容易出錯。
3.2手動編寫實體類
用一個model來儲存資料，使得資料序列化。 我們可以新建一個ip.dart：
class Ip {
String origin;
Ip(this.origin);
Ip.fromJson(Map<String, dynamic> json) : origin = json['origin'];
Map<String, dynamic> toJson() => {
"origin": origin,
};
}
複製程式碼然後修改main.dart:
import 'dart:convert';
import 'dart:io';
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'model/ip.dart';
...
class _MyHomePageState extends State<MyHomePage> {
var _ipAddress = 'Unknown';
_getIPAddress() async {
var url = 'https://httpbin.org/ip';
Dio _dio = Dio();
String result;
try {
var response = await _dio.get(url);
if (response.statusCode == HttpStatus.ok) {
var data= jsonDecode(response.toString());
var ip=Ip.fromJson(data);//1
result = ip.origin;
}
...
}
...
}
複製程式碼註釋1處通過Ip.fromJson就可以獲取ip的實體，這樣就可以完成賦值等操作了。
3.3 自動生成實體類
一般專案中Json資料會比較繁多，每次重複寫實體類的模版程式碼顯然枯燥無意義，可以使用一些工具來生成實體類。 比如使用網頁自動生成： app.quicktype.io/ 。轉換的實體類如下所示。
import 'dart:convert';
Ip ipFromJson(String str) => Ip.fromJson(json.decode(str));
String ipToJson(Ip data) => json.encode(data.toJson());
class Ip {
String origin;
Ip({
this.origin,
});
factory Ip.fromJson(Map<String, dynamic> json) => new Ip(
origin: json["origin"],
);
Map<String, dynamic> toJson() => {
"origin": origin,
};
}
複製程式碼除了使用網頁生成，還可以使用開源的JSONFormat4Flutter： github.com/debuggerx01…
使用json_serializable
除了以上提到的工具，還可以使用json_serializable。
json_serializable是一個自動化的原始碼生成器，可以方便的生成JSON實體類。
首先在pubspec.yaml加入如下依賴，
dependencies:
json_annotation: ^2.4.0
dev_dependencies:
build_runner: ^1.0.0
json_serializable: ^3.0.0
複製程式碼在AS的Terminal中執行flutter packages get命令，用來在專案中使用這些新的依賴項。 接著實現ip實體類。
import 'package:json_annotation/json_annotation.dart';
// ip.g.dart 將在我們執行生成命令後自動生成
part 'ip.g.dart';
//告訴生成器，這個類需要生成Model類
@JsonSerializable()
class Ip{
Ip(this.origin);
String origin;
factory Ip.fromJson(Map<String, dynamic> json) => _$IpFromJson(json);
Map<String, dynamic> toJson() => _$IpToJson(this);
}
複製程式碼關鍵的在於@JsonSerializable()，它用於告訴生成器，Ip類是需要生成的Model類。在Terminal視窗執行如下命令生成ip.g.dart檔案。
flutter packages pub run build_runner build
複製程式碼如何使用見3.2節就可以了，使用json_serializable可以讓我們忽略Ip類中的任何手動JSON序列化 。原始碼生成器會在同一個目錄下生成Ip.g.dart，如下所示。
// GENERATED CODE - DO NOT MODIFY BY HAND
part of 'ip.dart';
// **************************************************************************
// JsonSerializableGenerator
// **************************************************************************
Ip _$IpFromJson(Map<String, dynamic> json) {
return Ip(json['origin'] as String);
}
Map<String, dynamic> _$IpToJson(Ip instance) =>
<String, dynamic>{'origin': instance.origin};
複製程式碼該檔案有著必需的序列化邏輯，目前Flutter官方推薦的就是使用json_serializable。
Flutter基礎系列
Flutter基礎（一）移動開發的跨平臺技術演進
Flutter基礎（二）Flutter開發環境搭建和Hello World
Flutter基礎（三）Dart快速入門
Flutter基礎（四）開發Flutter應用前需要掌握的Basic Widget
Flutter基礎（五）Material元件之MaterialApp、Scaffold、AppBar
Flutter基礎（六）Material元件之BottomNavigationBar、TabBar、Drawer
Flutter基礎（七）Scrolling Widget之ListView、GridView、PageView
Flutter基礎（八）手勢相關Widget：GestureDetector和Dismissible
Flutter基礎（九）資源和圖片
Flutter基礎（十）佈局Widget快速入門
Flutter基礎（十一）網路請求（Dio）與JSON資料解析
Flutter基礎（十二）路由（頁面跳轉）與資料傳遞
Flutter基礎（十三）Flutter與Android的相互通訊