• Langkah 1 - Membuat Fungsi Delete
• Kesimpulan

Halo teman-teman sebelumnya kita sudah belajar edit dan update data, pada artikel kali ini kita belajar bagaimana cara hapus data melalu Rest API.

Langkah 1 - Membuat Fungsi Delete

Untuk langkah pertama kalian buat fungsi delete, buka file home.dart dan ketikan kode berikut pada class _HomeState

class _HomeState extends State<Home> {
.......
 Future<void> _deletePost(int postId) async {
    try {
      final response = await _apiService.deletePost(postId);
      if (response) {
        setState(() {
          _posts.removeWhere((post) => post.id == postId);
        });
        _loadMorePosts();
      }
    } catch (e) {
      throw Exception(e.toString());
    }
  }
............
........
}

Pada fungsi _deletePost(int postId) ini di beri parameter yang bernilai int yang dimana isi parameter tesebut id dari post, lalu kita kirim ke server dengan fungsi _apiService.deletePost(postId).

Jangan lupa kita juga panggil fungsi _deletePost pada widget buton icon delete, hapus comment //TODO action delete post sehingga menjadi berikut:

.......
Positioned(
                    bottom: 2,
                    right: 2,
                    child: IconButton(
                      onPressed: () => _deletePost(post.id),
                      icon: const Icon(Icons.delete_rounded),
                    ),
                  )
.............

Sehingga keseluruhan file pada home.dart menjadi berikut:

import 'package:flutter/material.dart';
import 'package:flutter_pemula/api/repository.dart';
import 'package:flutter_pemula/component/post_view.dart';
import 'package:flutter_pemula/model/post.dart';
import 'package:flutter_pemula/screen/add_edit_post_screen.dart';

class Home extends StatefulWidget {
  final String title;

  const Home({
    super.key,
    required this.title,
  });

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final ScrollController _scrollController = ScrollController();
  final Repository _apiService = Repository();

  final List<Post> _posts = [];
  bool _isLoading = false;
  bool _hasMore = true;
  int _currentPage = 1;

  @override
  void initState() {
    super.initState();
    _loadPosts();
    _scrollController.addListener(() {
      if (_scrollController.position.pixels ==
          _scrollController.position.maxScrollExtent) {
        _loadMorePosts();
      }
    });
  }

  Future<void> _loadPosts() async {
    setState(() {
      _isLoading = true;
    });

    try {
      final result = await _apiService.fetchPosts(_currentPage);
      setState(() {
        _currentPage++;
        _posts.addAll(result['posts']);
        _hasMore = result['nextPageUrl'] != null;
      });
    } catch (e) {
      throw Exception(e.toString());
    } finally {
      setState(() {
        _isLoading = false;
      });
    }
  }

  Future<void> _loadMorePosts() async {
    if (_isLoading || !_hasMore) return;

    setState(() {
      _isLoading = true;
    });

    try {
      final result = await _apiService.fetchPosts(_currentPage);
      setState(() {
        _currentPage++;
        _posts.addAll(result['posts']);
        _hasMore = result['nextPageUrl'] != null;
      });
    } catch (e) {
      throw Exception(e.toString());
    } finally {
      setState(() {
        _isLoading = false;
      });
    }
  }

  Future<void> _deletePost(int postId) async {
    try {
      final response = await _apiService.deletePost(postId);
      if (response) {
        setState(() {
          _posts.removeWhere((post) => post.id == postId);
        });
        _loadMorePosts();
      }
    } catch (e) {
      throw Exception(e.toString());
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: _buildPostList(),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          var result = await Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => const AddEditPostScreen(),
            ),
          );
          if (result == true) {
            _currentPage = 1;
            _posts.clear();
            _hasMore = true;
            _loadPosts();
          }
        },
        child: const Icon(Icons.add),
      ),
    );
  }

  Widget _buildPostList() {
    return ListView.builder(
      controller: _scrollController,
      itemCount: _posts.length + (_hasMore ? 1 : 0),
      itemBuilder: (context, index) {
        if (index == _posts.length) {
          return const Center(child: CircularProgressIndicator());
        }
        final post = _posts[index];

        return Padding(
          padding: const EdgeInsets.all(8.0),
          child: Card.filled(
            clipBehavior: Clip.hardEdge,
            child: InkWell(
              onTap: () {
                // Todo action ke detail post
              },
              child: Stack(
                children: [
                  PostView(post: post),
                  Positioned(
                    top: 2,
                    right: 2,
                    child: IconButton(
                      onPressed: () async {
                        final result = await Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) => AddEditPostScreen(post: post),
                          ),
                        );

                        if (result == true) {
                          _currentPage = 1;
                          _posts.clear();
                          _hasMore = true;
                          _loadPosts();
                        }
                      },
                      icon: const Icon(Icons.edit_rounded),
                    ),
                  ),
                  Positioned(
                    bottom: 2,
                    right: 2,
                    child: IconButton(
                      onPressed: () => _deletePost(post.id),
                      icon: const Icon(Icons.delete_rounded),
                    ),
                  )
                ],
              ),
            ),
          ),
        );
      },
    );
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }
}

Sekarang kalian jalankan dan tap pada icon delete jika terhapus berarti kalian sudah berhasil.

Kesimpulan

Pada artikel kali ini, kita belajar bagaimana cara menghapus data melalui Rest API. Bila teman-teman menemui kendala atau error kalian bisa bertanya di grup telegram santrikoding atau memberikan komentar dibawah.

Untuk Source Code kalian bisa ambil di link berikut https://github.com/hunt3r6/flutter-rest-api

Membangun Website dan Aplikasi Android Desa Dengan Laravel, React.js dan React Native

Membangun Aplikasi dan Website News Dengan Laravel, React.js dan Android