網路和資料

雖然常說“沒有人是一座孤島”，但一個沒有網路功能的 Flutter 應用程式可能會讓人感覺有點脫節。本頁介紹如何為你的 Flutter 應用程式新增網路功能。你的應用程式將檢索資料，將 JSON 解析成可用的記憶體表示，然後再次傳送資料。

最簡單的情況是，假設你使用 http 包來適應基於 Dart VM 的平臺和基於 Web 瀏覽器的環境之間網路訪問的差異，發出一個 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、Web 瀏覽器內部，還是原生執行在 Windows、macOS 或 Linux 上。第一個教程向你展示如何向網站發出未經身份驗證的 GET 請求，將檢索到的資料解析為 JSON，然後顯示結果資料。第二個教程在前者的基礎上增加了身份驗證頭，從而可以訪問需要授權的 Web 伺服器。Mozilla Developer Network (MDN) 的文章提供了有關 Web 上授權如何工作的更多背景資訊。

• 教程：從網際網路獲取資料
• 教程：進行身份驗證請求
• 文章：MDN 關於網站授權的文章

從網路檢索到資料後，你需要一種方法將資料從網路轉換為你可以輕鬆在 Dart 中使用的內容。上一節中的教程使用了手寫的 Dart 將網路資料轉換為記憶體中的表示。在本節中，你將看到處理此轉換的其他選項。第一個連結到一個 YouTube 影片，展示了 freezed 包的概述。第二個連結到一個 Codelab，涵蓋了使用解析 JSON 的案例研究的模式和記錄。

• YouTube 影片：Freezed (本週包)
• Codelab：深入瞭解 Dart 的模式和記錄

現在你已經掌握了檢索資料的藝術，是時候看看如何推送資料了。這些資訊從向網路傳送資料開始，但隨後深入探討了非同步性。事實是，一旦你透過網路進行通訊，你就需要處理物理上遙遠的 Web 伺服器可能需要一段時間才能響應的事實，而且你不能在等待資料包往返時停止渲染螢幕。Dart 對非同步性有很好的支援，Flutter 也是如此。你將在教程中學習 Dart 的所有支援，然後在一個“本週 Widget”影片中看到 Flutter 的能力。完成之後，你將學習如何使用 DevTool 的網路檢視除錯網路流量。

• 教程：向網際網路傳送資料
• 教程：非同步程式設計：Future、async、await
• YouTube 影片：FutureBuilder (本週 Widget)
• 文章：使用網路檢視

現在你已經掌握了使用 Flutter 的網路 API，瞭解 Flutter 在上下文中的網路使用情況會有所幫助。第一個 Codelab（表面上是關於在 Flutter 中建立自適應應用程式），使用用 Dart 編寫的 Web 伺服器來解決 Web 瀏覽器的 跨域資源共享 (CORS) 限制。

接下來，一個長篇 YouTube 影片，其中 Flutter DevRel 校友 Fitz 談論資料位置對 Flutter 應用程式的重要性。最後，由 Flutter GDE Anna (Domashych) Leushchenko 撰寫的一系列非常有用的文章，涵蓋了 Flutter 中的高階網路。

• Codelab：Flutter 中的自適應應用程式
• 影片：保持本地：管理 Flutter 應用程式的資料
• 系列文章：Dart 和 Flutter 中的基礎和高階網路

由於本網站的此部分正在不斷發展，我們歡迎你的反饋！