09-文件和網絡請求
09-文件和網絡請求
文件操作
Dart的IO庫包含了文件讀寫的相關類，它屬於Dart語法標準的一部分，所以通過Dart IO庫，無論是Dart VM下的腳本還是Flutter，都是通過Dart IO庫來操作文件的。
APP目錄
Android和iOS的應用存儲目錄不同，PathProvider 插件提供了一種平臺透明的方式來訪問設備文件系統上的常用位置。該類當前支持訪問兩個文件系統位置：
- 臨時目錄: 可以使用 getTemporaryDirectory() 來獲取臨時目錄； 系統可隨時清除的臨時目錄（緩存）。在iOS上，這對應於NSTemporaryDirectory() 返回的值。在Android上，這是getCacheDir())返回的值。
- 文檔目錄: 可以使用getApplicationDocumentsDirectory()來獲取應用程序的文檔目錄，該目錄用於存儲只有自己可以訪問的文件。只有當應用程序被卸載時，系統才會清除該目錄。在iOS上，這對應於NSDocumentDirectory。在Android上，這是AppData目錄。
引入PathProvider插件,
在pubspec.yaml文件中添加如下聲明：dependencies: path_provider: ^0.4.1添加後，執行flutter packages get 獲取一下。
import 'dart:io'; import 'dart:async'; import 'package:flutter/material.dart'; import 'package:path_provider/path_provider.dart'; class FileOperationRoute extends StatefulWidget { FileOperationRoute({Key key}) : super(key: key); @override _FileOperationRouteState createState() => new _FileOperationRouteState(); } class _FileOperationRouteState extends State<FileOperationRoute> { int _counter; @override void initState() { super.initState(); //從文件讀取點擊次數 _readCounter().then((int value) { setState(() { _counter = value; }); }); } Future<File> _getLocalFile() async { // 獲取應用目錄 String dir = (await getApplicationDocumentsDirectory()).path; return new File('$dir/counter.txt'); } Future<int> _readCounter() async { try { File file = await _getLocalFile(); // 讀取點擊次數（以字符串） String contents = await file.readAsString(); return int.parse(contents); } on FileSystemException { return 0; } } Future<Null> _incrementCounter() async { setState(() { _counter++; }); // 將點擊次數以字符串類型寫到文件中 await (await _getLocalFile()).writeAsString('$_counter'); } @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar(title: new Text('文件操作')), body: new Center( child: new Text('點擊了 $_counter 次'), ), floatingActionButton: new FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: new Icon(Icons.add), ), ); } }
通過HttpClient發起HTTP請求
Dart IO庫中提供了Http請求的一些類，我們可以直接使用HttpClient來發起請求。使用HttpClient發起請求分為五步：
1. 創建一個HttpClient HttpClient httpClient = new HttpClient(); 2.打開Http連接，設置請求頭 HttpClientRequest request = await httpClient.getUrl(uri); 這一步可以使用任意Http method. 如果包含Query參數，可以在構建uri時添加，如： Uri uri=Uri(scheme: "https", host: "flutterchina.club", queryParameters: { "xx":"xx", "yy":"dd" }); 通過HttpClientRequest可以設置請求header，如： request.headers.add("user-agent", "test"); 如果是post或put等可以攜帶請求體方法，可以通過HttpClientRequest對象發送request body，如： String payload="..."; request.add(utf8.encode(payload)); 3.等待連接服務器 HttpClientResponse response = await request.close(); 這一步完成後，請求信息就已經發送給服務器了，返回一個HttpClientResponse對象，它包含響應頭（header）和響應流(響應體的Stream)。 4.讀取響應內容 String responseBody = await response.transform(utf8.decoder).join(); 5.請求結束，關閉HttpClient httpClient.close();
Dio http庫
dio是一個強大的Dart Http請求庫，支持Restful API、FormData、攔截器、請求取消、Cookie管理、文件上傳/下載、超時等。
引入dio,
在pubspec.yaml文件中添加如下聲明：dependencies: dio: ^x.x.x添加後，執行flutter packages get 獲取一下。
一個dio實例可以發起多個http請求，一般來說，APP只有一個http數據源時，dio應該使用單例模式。
示例
import 'package:dio/dio.dart';
Dio dio = new Dio();
//發起 GET 請求 :
Response response;
response=await dio.get("/test?id=12&name=wendu")
print(response.data.toString());
//發起一個 POST 請求:
response=await dio.post("/test",data:{"id":12,"name":"wendu"})
//發起多個並發請求:
response= await Future.wait([dio.post("/info"),dio.get("/token")]);
//下載文件:
response=await dio.download("https://www.google.com/",_savePath);
//發送 FormData:
FormData formData = new FormData.from({
"name": "wendux",
"age": 25,
});
response = await dio.post("/info", data: formData)
//通過FormData上傳多個文件:
FormData formData = new FormData.from({
"name": "wendux",
"age": 25,
"file1": new UploadFileInfo(new File("./upload.txt"), "upload1.txt"),
"file2": new UploadFileInfo(new File("./upload.txt"), "upload2.txt"),
// 支持文件數組上傳
"files": [
new UploadFileInfo(new File("./example/upload.txt"), "upload.txt"),
new UploadFileInfo(new File("./example/upload.txt"), "upload.txt")
]
});
response = await dio.post("/info", data: formData)詳情可以參考dio主頁
使用WebSockets
Http協議是無狀態的，只能由客戶端主動發起，服務端再被動響應，服務端無法向客戶端主動推送內容，並且一旦服務器響應結束，鏈接就會斷開(見註解部分)，所以無法進行實時通信。WebSocket協議正是為解決客戶端與服務端實時通信而產生的技術，現在已經被主流瀏覽器支持，所以對於Web開發者來說應該比較熟悉了，Flutter也提供了專門的包來支持WebSocket協議。
發起WebSockets步驟:
- 連接到WebSocket服務器
web_socket_channel package 提供了我們需要連接到WebSocket服務器的工具.
該package提供了一個WebSocketChannel允許我們既可以監聽來自服務器的消息，又可以將消息發送到服務器的方法。
在Flutter中，我們可以創建一個WebSocketChannel連接到一臺服務器：
final channel = new IOWebSocketChannel.connect(‘ws://echo.websocket.org‘);
- 監聽來自服務器的消息
現在我們建立了連接，我們可以監聽來自服務器的消息，在我們發送消息給測試服務器之後，它會返回相同的消息。
我們如何收取消息並顯示它們？在這個例子中，我們將使用一個StreamBuilder Widget來監聽新消息， 並用一個Text Widget來顯示它們。
new StreamBuilder(
stream: widget.channel.stream,
builder: (context, snapshot) {
return new Text(snapshot.hasData ? ‘${snapshot.data}‘ : ‘‘);
},
);
工作原理
WebSocketChannel提供了一個來自服務器的消息Stream 。
該Stream類是dart:async包中的一個基礎類。它提供了一種方法來監聽來自數據源的異步事件。與Future返回單個異步響應不同，Stream類可以隨著時間推移傳遞很多事件。
該StreamBuilder Widget將連接到一個Stream， 並在每次收到消息時通知Flutter重新構建界面。
- 將數據發送到服務器
為了將數據發送到服務器，我們會add消息給WebSocketChannel提供的sink。
channel.sink.add(‘Hello!‘);
工作原理
WebSocketChannel提供了一個StreamSink，它將消息發給服務器。
StreamSink類提供了給數據源同步或異步添加事件的一般方法。
- 關閉WebSocket連接
在我們使用WebSocket後，要關閉連接：
channel.sink.close();
import 'package:flutter/material.dart';
import 'package:web_socket_channel/io.dart';
class WebSocketRoute extends StatefulWidget {
@override
_WebSocketRouteState createState() => new _WebSocketRouteState();
}
class _WebSocketRouteState extends State<WebSocketRoute> {
TextEditingController _controller = new TextEditingController();
IOWebSocketChannel channel;
String _text = "";
@override
void initState() {
//創建websocket連接
channel = new IOWebSocketChannel.connect('ws://echo.websocket.org');
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("WebSocket(內容回顯)"),
),
body: new Padding(
padding: const EdgeInsets.all(20.0),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Form(
child: new TextFormField(
controller: _controller,
decoration: new InputDecoration(labelText: 'Send a message'),
),
),
new StreamBuilder(
stream: channel.stream,
builder: (context, snapshot) {
//網絡不通會走到這
if (snapshot.hasError) {
_text = "網絡不通...";
} else if (snapshot.hasData) {
_text = "echo: "+snapshot.data;
}
return new Padding(
padding: const EdgeInsets.symmetric(vertical: 24.0),
child: new Text(_text),
);
},
)
],
),
),
floatingActionButton: new FloatingActionButton(
onPressed: _sendMessage,
tooltip: 'Send message',
child: new Icon(Icons.send),
),
);
}
void _sendMessage() {
if (_controller.text.isNotEmpty) {
channel.sink.add(_controller.text);
}
}
@override
void dispose() {
channel.sink.close();
super.dispose();
}
}Json Model
由於Flutter中禁用了Dart的反射功能，而正因如此也就無法實現Json動態轉化Model的功能。具體做法就是，通過預定義一些與Json結構對應的Model類，然後在請求到數據後再動態根據數據創建出Model類的實例。
例如，我們可以通過引入一個簡單的模型類(Model class)來解決前面提到的問題，我們稱之為User。在User類內部，我們有：
一個User.fromJson 構造函數, 用於從一個map構造出一個 User實例 map structure
一個toJson 方法, 將 User 實例轉化為一個map.
user.dart
class User {
final String name;
final String email;
User(this.name, this.email);
User.fromJson(Map<String, dynamic> json)
: name = json['name'],
email = json['email'];
Map<String, dynamic> toJson() =>
<String, dynamic>{
'name': name,
'email': email,
};
}自動生成Model
盡管還有其他庫可用，介紹一下官方推薦的json_serializable package包。 它是一個自動化的源代碼生成器，可以在開發階段為我們生成JSON序列化模板，這樣一來，由於序列化代碼不再由我們手寫和維護，我們將運行時產生JSON序列化異常的風險降至最低。
在項目中設置json_serializable
要包含json_serializable到我們的項目中，我們需要一個常規和兩個開發依賴項。簡而言之，開發依賴項是不包含在我們的應用程序源代碼中的依賴項，它是開發過程中的一些輔助工具、腳本，和node中的開發依賴項相似。
pubspec.yaml
dependencies:
# Your other regular dependencies here
json_annotation: ^2.0.0
dev_dependencies:
# Your other dev_dependencies here
build_runner: ^1.0.0
json_serializable: ^2.0.0在您的項目根文件夾中運行 flutter packages get (或者在編輯器中點擊 “Packages Get”) 以在項目中使用這些新的依賴項.
以json_serializable的方式創建model類
讓我們看看如何將我們的User類轉換為一個json_serializable。為了簡單起見，我們使用前面示例中的簡化JSON model。
user.dart
import 'package:json_annotation/json_annotation.dart';
// user.g.dart 將在我們運行生成命令後自動生成
part 'user.g.dart';
///這個標註是告訴生成器，這個類是需要生成Model類的
@JsonSerializable()
class User{
User(this.name, this.email);
String name;
String email;
//不同的類使用不同的mixin即可
factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);
Map<String, dynamic> toJson() => _$UserToJson(this);
}有兩種運行代碼生成器的方法：
一次性生成
通過在我們的項目根目錄下運行:
flutter packages pub run build_runner build這觸發了一次性構建，我們可以在需要時為我們的Model生成json序列化代碼，它通過我們的源文件，找出需要生成Model類的源文件（包含@JsonSerializable標註的）來生成對應的.g.dart文件。一個好的建議是將所有Model類放在一個單獨的目錄下，然後在該目錄下執行命令。
持續生成
使用watcher可以使我們的源代碼生成的過程更加方便。它會監視我們項目中文件的變化，並在需要時自動構建必要的文件，我們可以通過
flutter packages pub run build_runner watch在項目根目錄下運行來啟動watcher。只需啟動一次觀察器，然後它就會在後臺運行，這是安全的。
09-文件和網絡請求