網路和資料

雖然說「沒有人是孤島」，但一個沒有任何網路功能的 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，然後顯示結果資料。第二個教學課程會以第一個為基礎，新增身分驗證標頭，啟用對需要授權的網頁伺服器的存取。Mozilla 開發者網路 (MDN) 的文章提供了更多關於網路上授權如何運作的背景資訊。

• 教學課程：從網際網路擷取資料
• 教學課程：發出已驗證的要求
• 文章：MDN 關於網站授權的文章

一旦您從網路擷取資料，您需要一種方法將網路資料轉換為您可以在 Dart 中輕鬆使用的東西。上一節中的教學課程使用手動撰寫的 Dart 來將網路資料轉換為記憶體中的表示法。在本節中，您將看到處理此轉換的其他選項。第一個連結到一個 YouTube 影片，其中顯示了 freezed 套件 的概述。第二個連結到一個程式碼實驗室，其中涵蓋了使用 JSON 解析案例研究的模式和記錄。

• YouTube 影片：Freezed (本週套件)
• 程式碼實驗室：深入探討 Dart 的模式和記錄

現在您已經掌握了擷取資料的技巧，是時候看看如何推送資料出去了。此資訊首先從將資料傳送到網路開始，然後深入探討非同步性。事實上，一旦您在網路上進行對話，您就需要處理遠在物理上的網頁伺服器可能需要一段時間才能回應的事實，並且您無法在等待封包往返時停止螢幕的渲染。Dart 對非同步性有很棒的支援，Flutter 也是如此。您將在教學課程中了解所有關於 Dart 支援的資訊，然後在「本週 Widget」影片中看到 Flutter 的功能。完成後，您將學習如何使用 DevTool 的網路檢視來偵錯網路流量。

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

現在您已經掌握了如何使用 Flutter 的網路 API，有助於了解 Flutter 的網路使用情況。第一個程式碼實驗室（表面上是在 Flutter 中建立自適應應用程式），使用以 Dart 撰寫的網頁伺服器來解決網頁瀏覽器的跨來源資源共享 (CORS) 限制。

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

• 程式碼實驗室：Flutter 中的自適應應用程式
• 影片：保持本地化：管理 Flutter 應用程式的資料
• 系列文章：Dart 和 Flutter 中的基本和進階網路功能

由於本網站的這一部分正在發展中，我們歡迎您的意見回饋！

除非另有說明，否則本網站上的文件反映了 Flutter 的最新穩定版本。頁面上次更新於 2024-09-25。 檢視原始碼 或 回報問題。