今天要來介紹一下與網路相關的功能！
在畫面呈現上我們時常會透過 http 來進行資料的輸出及輸入
而在 Flutter 中我們應該怎樣去做呢？
今天的內容主要便是要針對這點進行描述！

http

透過

flutter pub add http

來進行套件的安裝
在使用上只需要透過以下方式就可以取得對應位置的 Json 資料

Future<http.Response> fetchAlbum() {
  return http.get(Uri.parse('https://jsonplaceholder.typicode.com/albums/1'));
}

而在取回資料時
我們會先定義好相關的 Interface 以便接受資料及序列化

class Album {
  final int userId;
  final int id;
  final String title;

  const Album({
    required this.userId,
    required this.id,
    required this.title,
  });

  factory Album.fromJson(Map<String, dynamic> json) {
    return Album(
      userId: json['userId'],
      id: json['id'],
      title: json['title'],
    );
  }
}

Future<Album> fetchAlbum() async {
  final response = await http
      .get(Uri.parse('https://jsonplaceholder.typicode.com/albums/1'));

  if (response.statusCode == 200) {
    // If the server did return a 200 OK response,
    // then parse the JSON.
    return Album.fromJson(jsonDecode(response.body));
  } else {
    // If the server did not return a 200 OK response,
    // then throw an exception.
    throw Exception('Failed to load album');
  }
}

這裡我們列出一個完整範例
其中包含

1. 發一個 Request 到對應的URL: ex. https://jsonplaceholder.typicode.com/albums/1
2. 如果回傳結果為 200 則使用原先定義好的 interface 去轉換 JSON 並回傳處理後結果
3. 如果回傳結果為其他的則透過 throw 丟出錯誤訊息！

上面是取得資料所使用的簡易教學
針對 Http request 及 response 有另一個套件叫做 dio來做處理
而在簡易的情境中用 http 便已足夠
然而如果有需要在中間加上 logger 或其他的 Plugin 功能
都可以透過 dio 來進行資料的處理！

簡易 Dio 範例

Response response;
var dio = Dio();
response = await dio.get('/test?id=12&name=wendu');
print(response.data.toString());
// Optionally the request above could also be done as
response = await dio.get('/test', queryParameters: {'id': 12, 'name': 'wendu'});
print(response.data.toString());

相信透過上面所提及的套件相關資訊
可以讓讀者具備簡易的呼叫 API 的行為了！
無論是哪種類型的 APP
在擁有與資料互動的能力後
便能夠完成各式各樣的服務了！
後續的文章將會進入實作部分並且不間斷的更新前面這幾篇基礎的教學文
如果這部份有讀者遇到任何問題都歡迎在底下留言區詢問！
那麼理論教學文就先告一段落了
讓我們進入實作系列吧！

參考資料

強而有力的官網護盾
Day 23 | 在Flutter裡串接restful api - 我不使用HttpClient了 jojo