在網路上刪除資料
本教學將說明如何使用 http 套件，透過網路刪除資料。
本教學包含以下步驟：
- 新增
http套件。 - 在伺服器上刪除資料。
- 更新螢幕。
1. 新增 http 套件
#若要將 http 套件加入為相依套件，請執行 flutter pub add：
flutter pub add http匯入 http 套件。
dart
import 'package:http/http.dart' as http;If you are deploying to Android, edit your AndroidManifest.xml file to add the Internet permission.
xml
<!-- Required to fetch data from the internet. -->
<uses-permission android:name="android.permission.INTERNET" />Likewise, if you are deploying to macOS, edit your macos/Runner/DebugProfile.entitlements and macos/Runner/Release.entitlements files to include the network client entitlement.
xml
<!-- Required to fetch data from the internet. -->
<key>com.apple.security.network.client</key>
<true/>2. 刪除伺服器上的資料
#本教學將說明如何使用 http.delete() 方法，從 JSONPlaceholder 刪除一個相簿（album）。 請注意，這需要你想要刪除的相簿的 id。在這個範例中， 可以使用你已經知道的內容，例如 id = 1。
dart
Future<http.Response> deleteAlbum(String id) async {
final http.Response response = await http.delete(
Uri.parse('https://jsonplaceholder.typicode.com/albums/$id'),
headers: <String, String>{
'Content-Type': 'application/json; charset=UTF-8',
},
);
return response;
}http.delete() 方法會回傳一個包含 Response 的 Future。
Future是 Dart 的核心類別，用於處理非同步（async）操作。Future 物件代表一個未來某個時間點可能可用的值或錯誤。http.Response類別包含從成功的 HTTP 呼叫中接收到的資料。deleteAlbum()方法需要一個id參數，用來識別要從伺服器刪除的資料。
3. 更新螢幕
#為了檢查資料是否已被刪除，首先請使用 http.get() 方法從 JSONPlaceholder 取得資料，並顯示在螢幕上。（完整範例請參考 Fetch Data 教學。） 現在你應該有一個 Delete Data 按鈕，當按下時會呼叫 deleteAlbum() 方法。
dart
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(snapshot.data?.title ?? 'Deleted'),
ElevatedButton(
child: const Text('Delete Data'),
onPressed: () {
setState(() {
_futureAlbum = deleteAlbum(
snapshot.data!.id.toString(),
);
});
},
),
],
);現在，當你點擊 Delete Data 按鈕時， 會呼叫 deleteAlbum() 方法，並且你所傳遞的 id 就是你從網路取得的資料的 id。這代表你將會刪除 與你從網路擷取的相同資料。
從 deleteAlbum() 方法回傳回應
#當刪除請求發送後， 你可以從 deleteAlbum() 方法回傳一個回應， 以通知螢幕資料已經被刪除。
dart
Future<Album> deleteAlbum(String id) async {
final http.Response response = await http.delete(
Uri.parse('https://jsonplaceholder.typicode.com/albums/$id'),
headers: <String, String>{
'Content-Type': 'application/json; charset=UTF-8',
},
);
if (response.statusCode == 200) {
// If the server did return a 200 OK response,
// then return an empty Album. After deleting,
// you'll get an empty JSON `{}` response.
// Don't return `null`, otherwise `snapshot.hasData`
// will always return false on `FutureBuilder`.
return Album.empty();
} else {
// If the server did not return a "200 OK response",
// then throw an exception.
throw Exception('Failed to delete album.');
}
}FutureBuilder() 現在會在收到回應時重新建構。 由於如果請求成功，回應的主體通常不會有任何資料， 所以 Album.fromJson() 方法會以預設值（在我們的範例中是 null）建立一個 Album 物件的實例。 你可以根據需求，隨意調整這個行為。
就是這樣！ 現在你已經擁有一個能從網路上刪除資料的函式了。
完整範例
#dart
import 'dart:async';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
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) as Map<String, dynamic>);
} else {
// If the server did not return a 200 OK response, then throw an exception.
throw Exception('Failed to load album');
}
}
Future<Album> deleteAlbum(String id) async {
final http.Response response = await http.delete(
Uri.parse('https://jsonplaceholder.typicode.com/albums/$id'),
headers: <String, String>{
'Content-Type': 'application/json; charset=UTF-8',
},
);
if (response.statusCode == 200) {
// If the server did return a 200 OK response,
// then return an empty Album. After deleting,
// you'll get an empty JSON `{}` response.
// Don't return `null`, otherwise `snapshot.hasData`
// will always return false on `FutureBuilder`.
return Album.empty();
} else {
// If the server did not return a "200 OK response",
// then throw an exception.
throw Exception('Failed to delete album.');
}
}
class Album {
int? id;
String? title;
Album({this.id, this.title});
Album.empty();
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> {
late Future<Album> _futureAlbum;
@override
void initState() {
super.initState();
_futureAlbum = fetchAlbum();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Delete Data Example',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
),
home: Scaffold(
appBar: AppBar(title: const Text('Delete Data Example')),
body: Center(
child: FutureBuilder<Album>(
future: _futureAlbum,
builder: (context, snapshot) {
// If the connection is done,
// check for response data or an error.
if (snapshot.connectionState == ConnectionState.done) {
if (snapshot.hasData) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(snapshot.data?.title ?? 'Deleted'),
ElevatedButton(
child: const Text('Delete Data'),
onPressed: () {
setState(() {
_futureAlbum = deleteAlbum(
snapshot.data!.id.toString(),
);
});
},
),
],
);
} else if (snapshot.hasError) {
return Text('${snapshot.error}');
}
}
// By default, show a loading spinner.
return const CircularProgressIndicator();
},
),
),
),
);
}
}