網路與資料

雖然俗話說「no man is an island（沒有人是一座孤島）」， 但沒有任何網路功能的 Flutter 應用程式 可能會顯得有些與世隔絕。 本頁將介紹如何為你的 Flutter 應用程式加入網路功能。你的應用程式將能夠擷取資料、 將 JSON 解析為可用的記憶體表示形式， 並再次將資料傳送出去。

最簡單的情況下，假設你使用 http 套件來適應 Dart VM 平台與網頁瀏覽器環境在網路存取上的差異， 發送一個 HTTP GET 請求可以像下面這麼簡單：

import 'package:http/http.dart' as http;

void main() async {
  var response = await http.get(
    Uri.parse('https://jsonplaceholder.typicode.com/albums/1'),
  );
  print(response.body);
}

以下兩個教學將詳細說明如何將 http 套件加入你的應用程式，無論你是在 Android、iOS、網頁瀏覽器內，還是在 Windows、macOS 或 Linux 原生執行。
第一個教學會示範如何對網站發出未經驗證的 GET 請求，將取得的資料解析為 JSON，然後顯示結果資料。第二個教學則在第一個基礎上，加入驗證標頭（authentication headers），使你能存取需要授權的網頁伺服器。Mozilla Developer Network (MDN) 的這篇文章則提供了網頁授權運作方式的更多背景知識。

• 教學：從網路擷取資料
• 教學：發送帶驗證的請求
• 文章：MDN 關於網站授權的文章

當你從網路取得資料後，需要一種方式將這些資料轉換成 Dart 中容易操作的型態。上一節的教學使用手寫 Dart 程式碼，將網路資料轉換為記憶體中的表示。在本節中，你將看到其他處理這種轉換的選項。第一個連結到一支 YouTube 影片，概覽 freezed 套件。第二個則是 codelab，透過解析 JSON 的案例，介紹 Dart 的 pattern（模式）與 record（紀錄）用法。

• YouTube 影片：Freezed（本週套件介紹）
• Codelab：深入探索 Dart 的 pattern 與 record

既然你已經掌握了資料擷取的技巧，現在該學習如何將資料送出。這部分從如何將資料發送到網路開始，接著深入探討非同步（asynchronicity）。事實上，一旦你開始與網路進行資料交換，就必須面對遠端伺服器回應延遲的現實，而你不能在等待封包來回時停止畫面渲染。Dart 與 Flutter 都對非同步有很好的支援。你將透過教學學會 Dart 的非同步支援，然後在 Widget of the Week 影片中看到 Flutter 的相關能力。完成這些後，你還會學到如何用 DevTool 的 Network View 偵錯網路流量。

• 教學：將資料送出到網路
• 教學：非同步程式設計：futures、async、await
• YouTube 影片：FutureBuilder（本週元件介紹）
• 文章：使用 Network View

現在你已經熟悉 Flutter 的網路 API，了解 Flutter 在實際情境下如何使用網路會更有幫助。第一個 codelab（表面上是介紹如何在 Flutter 建立自適應應用程式），使用用 Dart 撰寫的網頁伺服器來繞過網頁瀏覽器的 跨來源資源共享（CORS）限制。

接下來是一支長篇 YouTube 影片，由 Flutter DevRel 前成員 Fitz 講解資料位置對 Flutter 應用程式的重要性。最後，Flutter GDE Anna (Domashych) Leushchenko 撰寫的一系列實用文章，涵蓋 Dart 與 Flutter 進階網路應用。

• Codelab：Flutter 中的自適應應用程式
• 影片：Keeping it local: 管理 Flutter 應用程式的資料
• 文章系列：Dart 與 Flutter 的基礎與進階網路應用

由於本網站區塊仍在持續發展中，
我們歡迎你的意見回饋！