インターネット上のデータを削除する

コンテンツ

このレシピでは、データを削除する方法について説明します。を使用してインターネットhttpパッケージ。

このレシピでは次の手順を使用します。

を追加します。httpパッケージ。
サーバー上のデータを削除します。
画面を更新します。

1.`http`パッケージ

追加するには、httpパッケージを依存関係として、走るflutter pub add:

$ flutter pub add http

インポートするhttpパッケージ。

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

2. サーバー上のデータを削除する

このレシピでは、アルバムを削除する方法について説明します。JSONプレースホルダーを使用してhttp.delete()方法。これには、idそのアルバムの削除したい。この例では、たとえば、すでに知っているものを使用するid = 1。

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()メソッドはFutureが含まれているResponse。

Futureを操作するためのコア Dart クラスです。非同期操作。 Future オブジェクトは可能性を表します将来のある時点で使用可能になる値またはエラー。
のhttp.Responseクラスには、成功したプログラムから受け取ったデータが含まれています httpコール。
のdeleteAlbum()メソッドはidという議論サーバーから削除するデータを識別するために必要です。

3. 画面を更新する

データが削除されているかどうかを確認するには、まず、からデータをフェッチしますJSONプレースホルダーを使用してhttp.get()メソッドを選択し、画面に表示します。 (「データのフェッチ完全な例についてはレシピを参照してください。) これで、データの削除そのボタン、押すと、deleteAlbum()方法。

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());
        });
      },
    ),
  ],
);

さて、クリックすると、データの削除ボタン、のdeleteAlbum()メソッドが呼び出され、ID 渡すのは取得したデータのIDですインターネットから。これは削除することを意味しますインターネットから取得したのと同じデータ。

deleteAlbum() メソッドからの応答を返す

削除リクエストが出されましたら、からの応答を返すことができますdeleteAlbum()データが削除されたことを画面に通知するメソッド。

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 parse the JSON. After deleting,
    // you'll get an empty JSON `{}` response.
    // Don't return `null`, otherwise `snapshot.hasData`
    // will always return false on `FutureBuilder`.
    return Album.fromJson(jsonDecode(response.body));
  } else {
    // If the server did not return a "200 OK response",
    // then throw an exception.
    throw Exception('Failed to delete album.');
  }
}

FutureBuilder()応答を受信すると再構築されるようになりました。レスポンスの本文にはデータが含まれないため、リクエストが成功した場合、のAlbum.fromJson()メソッドは、のインスタンスを作成しますAlbumデフォルト値を持つオブジェクト (null私たちの場合には）。この動作は任意の方法で変更できます。

それで全部です！インターネットからデータを削除する機能が追加されました。

完全な例

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));
  } 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 parse the JSON. After deleting,
    // you'll get an empty JSON `{}` response.
    // Don't return `null`, otherwise `snapshot.hasData`
    // will always return false on `FutureBuilder`.
    return Album.fromJson(jsonDecode(response.body));
  } else {
    // If the server did not return a "200 OK response",
    // then throw an exception.
    throw Exception('Failed to delete album.');
  }
}

class Album {
  final int? id;
  final String? title;

  const Album({this.id, this.title});

  factory Album.fromJson(Map<String, dynamic> json) {
    return Album(
      id: json['id'],
      title: json['title'],
    );
  }
}

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(
        primarySwatch: Colors.blue,
      ),
      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();
            },
          ),
        ),
      ),
    );
  }
}

1.httpパッケージ

2. サーバー上のデータを削除する

3. 画面を更新する

deleteAlbum() メソッドからの応答を返す

完全な例

1.`http`パッケージ