Cara Menampilkan Data Api dan Filter Data dengan Getx Flutter

Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan belajar cara menggunakan state management getx dalam studi kasus membuat filter pencarian data. Penasaran?, ayo ikuti tutorialnya di bawah ini.

Getx adalah salah satu package state management flutter yang cukup populer digunakan saat ini. Pada kesempatan kali ini kita akan belajar cara menampilkan data api dan melakukan filter data yang didapat dengan menggunakan state management. 

Tutorial ini juga sudah pernah saya ulas di link https://www.sahretech.com/2022/02/cara-mudah-membuat-fitur-pencarian-flutter.html. Tapi sayangnya, tutorial tersebut belum menggunakan state management, sehingga belum efisien dalam penggunaan resource. Tapi tutorial tersebut, cukup sebagai bahan pembelajaran.

Selain itu, saya juga sudah membuat beberapa tutorial state management dengan getx yang bisa kalian ikuti di link berikut ini.

1. State Management dengan GetX Studi Kasus Counter App
2. State Management GetX Studi Kasus Pemesanan Barang

Cara Menampilkan Data Api dan Filter Data dengan Getx Flutter

1. Buatlah sebuah project flutter baru dengan nama yang diinginkan. Gunakan flutter versi terbaru atau flutter yang support null safety.

2. Buka file pubspec.yaml lalu tambahkan package get: dan http: cara menambahkannya dapat kalian lihat pada gambar di bawah ini. Dan save file untuk mengunduh package yang dibutuhkan.

3. Buat file baru dengan nama post_controller.dart di dalam folder lib. Ikuti scriptnya seperti di bawah ini.

  import 'dart:convert';

  import 'package:get/get.dart';
  import 'package:http/http.dart' as http;
  
  class PostController extends GetxController {
    var posts = <dynamic>[].obs;
    var originalPosts = <dynamic>[].obs;
    var searchQuery = ''.obs;
  
    @override
    void onInit() {
      super.onInit();
      fetchPosts();
    }
  
    Future<void> fetchPosts() async {
      try {
        var response = await http.get(Uri.parse('https://dummyjson.com/posts'));
  
        if (response.statusCode == 200) {
          var data = json.decode(response.body)['posts'];
          posts.value = data;
          originalPosts.value = data;
  
          print(posts);
        }
      } catch (e) {
        print(e);
      }
    }
  
    void searchPosts(String query) {
      searchQuery.value = query;
  
      if (query.isEmpty) {
        posts.value = originalPosts.toList(); // Menampilkan semua data
      } else {
        var filteredData = originalPosts
            .where((item) => item['title']
                .toString()
                .toLowerCase()
                .contains(query.toLowerCase()))
            .toList();
        posts.value = filteredData;
      }
    }
  }

Penjelasan mengenai script di atas:

1. import 'dart:convert';: Mengimpor pustaka dart:convert yang digunakan untuk melakukan encoding dan decoding data JSON.
2. import 'package:get/get.dart';: Mengimpor pustaka get untuk menggunakan GetX sebagai state management.
3. import 'package:http/http.dart' as http;: Mengimpor pustaka http untuk melakukan permintaan HTTP ke API.
4. class PostController extends GetxController { ... }: Mendefinisikan kelas PostController yang merupakan turunan dari GetxController.
5. var posts = <dynamic>[].obs;: Mendeklarasikan variabel. 
6. var originalPosts = <dynamic>[].obs;: Mendeklarasikan variabel originalPosts. Variabel ini digunakan untuk menyimpan daftar asli sebelum diterapkan filter pencarian.
7. var searchQuery = ''.obs;: Mendeklarasikan variabel searchQuery. Variabel ini digunakan untuk menyimpan kata kunci pencarian yang dimasukkan pengguna.
8. void onInit() { ... }: Metode yang dipanggil saat PostController diinisialisasi. Di dalam metode ini, kita memanggil fetchPosts() untuk mengambil data dari API.
9. Future<void> fetchPosts() async { ... }: Metode yang digunakan untuk mengambil data dari API menggunakan metode http.get(). Data yang diterima kemudian di-decode dari format JSON menggunakan json.decode(). Setelah itu, nilai posts dan originalPosts diperbarui dengan data yang diterima. Pada contoh ini, nilai posts dicetak menggunakan print().
10. void searchPosts(String query) { ... }: Metode yang digunakan untuk melakukan pencarian pada data posts berdasarkan query (kata kunci pencarian). Jika query kosong, maka posts akan diatur kembali dengan daftar asli originalPosts, sehingga menampilkan semua data. Jika query tidak kosong, maka dilakukan filter pada originalPosts berdasarkan judul menggunakan where() dan contains(), dan hasil filter diberikan kepada posts.

4. Buka lib/main.dart lalu ganti dengan script di bawah ini.

  import 'package:flutter/material.dart';
  import 'package:get/get.dart';
  
  import 'post_controller.dart';
  
  void main() {
    runApp(MyApp());
  }
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return GetMaterialApp(
        title: 'Your App Name',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: HomePage(),
      );
    }
  }
  
  class HomePage extends StatelessWidget {
    final postController = Get.put(PostController());
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Your App Name'),
        ),
        body: Column(
          children: [
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: TextField(
                onChanged: (value) => postController.searchPosts(value),
                decoration: InputDecoration(
                  labelText: 'Search',
                  prefixIcon: Icon(Icons.search),
                ),
              ),
            ),
            Expanded(
              child: Obx(
                () {
                  if (postController.posts.isEmpty) {
                    return Center(
                      child: CircularProgressIndicator(),
                    );
                  } else {
                    return ListView.builder(
                      itemCount: postController.posts.length,
                      itemBuilder: (context, index) {
                        final post = postController.posts[index];
                        return Card(
                          child: ListTile(
                            leading: Image.network(
                              'https://cdn.pixabay.com/photo/2022/09/10/23/28/city-7445873_1280.jpg',
                              fit: BoxFit.cover,
                              width: 80, 
                              height: 80,
                            ),
                            title: Text(
                              post['title'],
                              maxLines: 2,
                              overflow: TextOverflow.ellipsis,
                            ),
                            subtitle: Text(
                              post['body'],
                              maxLines: 3,
                              overflow: TextOverflow.ellipsis,
                            ),
                          ),
                        );
                      },
                    );
                  }
                },
              ),
            ),
          ],
        ),
      );
    }
  }

5. Ok, semua step sudah kita kerjakan. Jalankan emulator dan jika berhasil maka tampilannya akan tampak seperti gambar di bawah

  

Baca Artikel Lain ✨

📰 1. Membuat Restful Api di Laravel Tanpa Library Tambahan Part 1 read more

📰 2. Menampilkan Data dengan API dan Token di Laravel Part 2 read more

📰 3. Cara Membuat Custom Registrasi dan Prosesnya di Laravel Part 1 read more

📰 4. Cara Membuat Custom Login di Laravel Part 2 read more

Sekian tutorial kali ini tentang cara "Cara Menampilkan Data Api dan Filter Data dengan Getx Flutter". Semoga tutorial singkat ini membantu, dan jika ada pertanyaan silahkan tanya langsung di kolom komentar di bawah ini. Sekian dan terima gaji.