Delete Data di Flutter

View Categories

Delete Data di Flutter

Dalam artikel ini, kita akan mencoba untuk menghapus data di internet pada aplikasi Flutter. Untuk melakukannya, kita perlu mengikuti 3 langkah penting:

  1. Mengimpor paket http
  2. Menghapus data pada server
  3. Memperbarui layar setelah penghapusan

Sekarang, mari kita jelajahi langkah-langkah tersebut secara detail.

Mengimport Paket http

Pertama, tambahkan paket http ke dalam file pubspec.yaml seperti di bawah ini.

Tangkapan layar ketika menambahkan library http pada pubspec.yaml

Setelah menambahkan http di pubspec.yaml lalu ketikkan command “flutter pub get” pada terminal agar flutter menginstal dependency paket yang telah ditambahkan pada pubspec.yaml ke dalam aplikasi.

flutter pub get

Setelah menambahkan paket di pubspec.yaml, selanjutnya import dependency http di file dart yang akan menggunakan http dengan kode sebagai berikut

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

Menghapus Data Pada Server

Gunakan metode http.delete pada JSONPlaceHolder, untuk menghapus Album dengan id=1 seperti contoh di bawah ini:

Future 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) {
    return Album.fromJson(jsonDecode(response.body));
  } else {
    throw Exception('Item Not Deleted!');
  }
}

Memperbarui Layar

Di sini kita akan membuat tombol hapus data yang dapat memverifikasi apakah data telah dihapus dari server dengan memanggil fungsi  http.get seperti yang ditunjukkan di bawah ini:

                  Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(snapshot.data?.title == null
                          ? 'Data telah dihapus'
                          : snapshot.data!.title!),
                      ElevatedButton(
                        child: const Text('Hapus Data'),
                        onPressed: () {
                          setState(() {
                            _futureAlbum =
                                deleteAlbum(snapshot.data!.id.toString());
                          });
                        },
                      ),
                    ],
                  );

Sekarang, ketika Anda klik tombol Hapus Data, fungsi deleteAlbum akan dipanggil dan id yang Anda kirimkan adalah id dari data yang Anda ambil sebelumnya.

Mengembalikan Response

Setelah data dihapus, kita akan memerlukan untuk mengirimkan response sukses atau gagal. Untuk melakukannya, lihat implementasi respons di bawah ini:

Future 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) {
    return Album.fromJson(jsonDecode(response.body));
  } else {
    throw Exception('Item Not Deleted!');
  }
}

Di bawah ini adalah source code lengkapnya.

import 'dart:async';
import 'dart:convert';

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

Future fetchAlbum() async {
  final response = await http
      .get(Uri.parse('https://jsonplaceholder.typicode.com/albums/3'));

  if (response.statusCode == 200) {
    //status code 200 OK artinya
    //data JSON siap untuk di parsing
    return Album.fromJson(json.decode(response.body));
  } else {
    //jika response todak 200
    //maka exception akan ditampilkan
    throw Exception('Failed to load album');
  }
}

Future 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',
    },
  );
  print(response.statusCode);
  print(response.body);

  if (response.statusCode == 200) {
    return Album.fromJson(jsonDecode(response.body));
  } else {
    throw Exception('Item Not Deleted!');
  }
}

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

  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({Key? key}) : super(key: key);

  @override
  State createState() {
    return _MyAppState();
  }
}

class _MyAppState extends State {
  late Future _futureAlbum;

  @override
  void initState() {
    super.initState();
    _futureAlbum = fetchAlbum();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Menghapus Data',
      theme: ThemeData(
          primarySwatch: Colors.blue,
          useMaterial3: true,
          brightness: Brightness.dark),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Nextgen Tutorial'),
          backgroundColor: Colors.blue,
        ),
        body: Center(
          child: FutureBuilder(
            future: _futureAlbum,
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                if (snapshot.hasData) {
                  return Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(snapshot.data?.title == null
                          ? 'Data telah dihapus'
                          : snapshot.data!.title!),
                      ElevatedButton(
                        child: const Text('Hapus Data'),
                        onPressed: () {
                          setState(() {
                            _futureAlbum =
                                deleteAlbum(snapshot.data!.id.toString());
                          });
                        },
                      ),
                    ],
                  );
                } else if (snapshot.hasError) {
                  return Text("${snapshot.error}");
                }
              }
              return const CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }
}

Output:

Tutorial sebelumnya : Get Data Dari Internet Di Flutter
Tutorial setelahnya : Mengirimkan Data Ke Internet Di Flutter
Semua Tutorial Flutter : Tutorial Flutter

Tinggalkan Balasan