跳到主內容

向網際網路傳送資料

如何使用 http 包透過網際網路傳送資料。

大多數應用程式都需要向網際網路傳送資料。http 包也涵蓋了這一點。

本示例將採取以下步驟

  1. 新增 `http` 包。
  2. 使用 http 包將資料傳送到伺服器。
  3. 將響應轉換為自定義 Dart 物件。
  4. 從使用者輸入獲取 title。
  5. 在螢幕上顯示響應。

1. 新增 `http` 包

#

要將 http 包新增為依賴項，請執行 flutter pub add。

flutter pub add http

匯入 `http` 包。

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

如果你部署到 Android，請編輯 `AndroidManifest.xml` 檔案以新增網際網路許可權。

xml 
<!-- Required to fetch data from the internet. -->
<uses-permission android:name="android.permission.INTERNET" />

同樣，如果你部署到 macOS，請編輯 `macos/Runner/DebugProfile.entitlements` 和 `macos/Runner/Release.entitlements` 檔案以包含網路客戶端授權。

xml 
<!-- Required to fetch data from the internet. -->
<key>com.apple.security.network.client</key>
<true/>

2. 向伺服器傳送資料

#

本教程介紹如何透過將專輯標題傳送到 JSONPlaceholder 使用 http.post() 方法建立 Album。

匯入 dart:convert 以訪問 jsonEncode 來編碼資料

dart 
import 'dart:convert';

使用 http.post() 方法傳送編碼後的資料

dart 
Future<http.Response> createAlbum(String title) {
  return http.post(
    Uri.parse('https://jsonplaceholder.typicode.com/albums'),
    headers: <String, String>{
      'Content-Type': 'application/json; charset=UTF-8',
    },
    body: jsonEncode(<String, String>{'title': title}),
  );
}

http.post() 方法返回一個包含 Response 的 Future。

  • Future 是 Dart 中用於處理非同步操作的核心類。Future 物件表示將來某個時間點可用或可能發生的錯誤的值。
  • `http.Response` 類包含成功 http 呼叫接收到的資料。
  • createAlbum() 方法接受一個引數 title，該引數被髮送到伺服器以建立 Album。

3. 將 http.Response 轉換為自定義 Dart 物件

#

雖然進行網路請求很簡單，但直接處理原始的 `Future<http.Response>` 並不是很方便。為了簡化開發，請將 `http.Response` 轉換為 Dart 物件。

建立 Album 類

#

首先，建立一個 `Album` 類來包含網路請求中的資料。它包含一個工廠建構函式，用於從 JSON 建立 `Album` 物件。

使用 模式匹配 進行 JSON 轉換隻是一個選項。有關更多資訊，請參閱關於 JSON 和序列化 的完整文章。

dart 
class Album {
  final int id;
  final String title;
​
  const Album({required this.id, required this.title});
​
  factory Album.fromJson(Map<String, dynamic> json) {
    return switch (json) {
      {'id': int id, 'title': String title} => Album(id: id, title: title),
      _ => throw const FormatException('Failed to load album.'),
    };
  }
}

將 `http.Response` 轉換為 `Album` 物件

#

按照以下步驟更新 createAlbum() 函式以返回 Future<Album>

  1. 使用 `dart:convert` 包將響應體轉換為 JSON `Map`。
  2. 如果伺服器返回狀態碼為 201 的 CREATED 響應，則使用 fromJson() 工廠方法將 JSON Map 轉換為 Album。
  3. 如果伺服器未返回狀態碼為 201 的 CREATED 響應，則丟擲異常。（即使在伺服器響應為“404 Not Found”的情況下，也應丟擲異常。不要返回 null。這在使用 snapshot 檢查資料時非常重要，如下所示。）
dart 
Future<Album> createAlbum(String title) async {
  final response = await http.post(
    Uri.parse('https://jsonplaceholder.typicode.com/albums'),
    headers: <String, String>{
      'Content-Type': 'application/json; charset=UTF-8',
    },
    body: jsonEncode(<String, String>{'title': title}),
  );
​
  if (response.statusCode == 201) {
    // If the server did return a 201 CREATED response,
    // then parse the JSON.
    return Album.fromJson(jsonDecode(response.body) as Map<String, dynamic>);
  } else {
    // If the server did not return a 201 CREATED response,
    // then throw an exception.
    throw Exception('Failed to create album.');
  }
}

好極了！現在你已經擁有一個函式，可以將標題傳送到伺服器以建立專輯。

4. 從使用者輸入獲取標題

#

接下來，建立一個 TextField 來輸入標題，並建立一個 ElevatedButton 來將資料傳送到伺服器。同時定義一個 TextEditingController 來讀取 TextField 中的使用者輸入。

當按下 ElevatedButton 時，_futureAlbum 被設定為 createAlbum() 方法返回的值。

dart 
Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    TextField(
      controller: _controller,
      decoration: const InputDecoration(hintText: 'Enter Title'),
    ),
    ElevatedButton(
      onPressed: () {
        setState(() {
          _futureAlbum = createAlbum(_controller.text);
        });
      },
      child: const Text('Create Data'),
    ),
  ],
)

按下 建立資料 按鈕時，將執行網路請求，將 TextField 中的資料作為 POST 請求傳送到伺服器。Future _futureAlbum 在下一步中使用。

5. 在螢幕上顯示響應

#

要將資料在螢幕上顯示出來，請使用 FutureBuilder 元件。FutureBuilder 元件隨 Flutter 一起提供，可以輕鬆地使用非同步資料來源。您必須提供兩個引數

  1. 您想要處理的 Future。在這種情況下，是 createAlbum() 函式返回的 future。
  2. 一個 `builder` 函式，它根據 `Future` 的狀態（載入中、成功或錯誤）告訴 Flutter 要渲染什麼。

請注意，snapshot.hasData 僅在快照包含非空資料值時才返回 true。這就是為什麼即使在伺服器響應為“404 Not Found”的情況下，createAlbum() 函式也應丟擲異常的原因。如果 createAlbum() 返回 null，則 CircularProgressIndicator 將無限期地顯示。

dart 
FutureBuilder<Album>(
  future: _futureAlbum,
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return Text(snapshot.data!.title);
    } else if (snapshot.hasError) {
      return Text('${snapshot.error}');
    }
​
    return const CircularProgressIndicator();
  },
)

完整示例

#
dart 
import 'dart:async';
import 'dart:convert';
​
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
​
Future<Album> createAlbum(String title) async {
  final response = await http.post(
    Uri.parse('https://jsonplaceholder.typicode.com/albums'),
    headers: <String, String>{
      'Content-Type': 'application/json; charset=UTF-8',
    },
    body: jsonEncode(<String, String>{'title': title}),
  );
​
  if (response.statusCode == 201) {
    // If the server did return a 201 CREATED response,
    // then parse the JSON.
    return Album.fromJson(jsonDecode(response.body) as Map<String, dynamic>);
  } else {
    // If the server did not return a 201 CREATED response,
    // then throw an exception.
    throw Exception('Failed to create album.');
  }
}
​
class Album {
  final int id;
  final String title;
​
  const Album({required this.id, required this.title});
​
  factory Album.fromJson(Map<String, dynamic> json) {
    return switch (json) {
      {'id': int id, 'title': String title} => Album(id: id, title: title),
      _ => throw const FormatException('Failed to load album.'),
    };
  }
}
​
void main() {
  runApp(const MyApp());
}
​
class MyApp extends StatefulWidget {
  const MyApp({super.key});
​
  @override
  State<MyApp> createState() {
    return _MyAppState();
  }
}
​
class _MyAppState extends State<MyApp> {
  final TextEditingController _controller = TextEditingController();
  Future<Album>? _futureAlbum;
​
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Create Data Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text('Create Data Example')),
        body: Container(
          alignment: Alignment.center,
          padding: const EdgeInsets.all(8),
          child: (_futureAlbum == null) ? buildColumn() : buildFutureBuilder(),
        ),
      ),
    );
  }
​
  Column buildColumn() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        TextField(
          controller: _controller,
          decoration: const InputDecoration(hintText: 'Enter Title'),
        ),
        ElevatedButton(
          onPressed: () {
            setState(() {
              _futureAlbum = createAlbum(_controller.text);
            });
          },
          child: const Text('Create Data'),
        ),
      ],
    );
  }
​
  FutureBuilder<Album> buildFutureBuilder() {
    return FutureBuilder<Album>(
      future: _futureAlbum,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return Text(snapshot.data!.title);
        } else if (snapshot.hasError) {
          return Text('${snapshot.error}');
        }
​
        return const CircularProgressIndicator();
      },
    );
  }
}

除非另有說明，此網站上的文件反映了 Flutter 3.38.6。頁面最後更新於 2025-10-28。 檢視原始碼 或 報告問題。