Membuat pencarian/search ListView di Flutter

Pada Artikel kali ini akan membahas cara membuat filter atau pencarian ListView di Flutter.
Seperti yang telah kita ketahui bahwa fasilitas search atau pencarian disuatu aplikasi sangat penting,
karena fasilitas ini akan membuat pengguna lebih mudah dalam mencari sesuatu di aplikasi kita.

Kita akan membuat function untuk memfilter data dari model, dan function ini akan dipanggil
ketika user atau pengguna aplikasi melakukan input di kolom teks (onChanged).
Algoritma pencarian dapat berbeda berdasarkan kasus per kasus, namun yang paling sederhana dan populer adalah dengan menggunakan Dart methods berikut:

Methods where() : Returns a new lazy Iterable dengan semua elemen yang memenuhi satu atau banyak kondisi

Methods contains() : Digunakan untuk menentukan apakah suatu string berisi string lain (Anda dapat mencoba metode string lain seperti startWith(), endWith(), dll.)

Methods toLowerCase() : Metode string ini akan mengubah semua karakter dalam string ini menjadi huruf kecil sehingga tidak masalah apakah kata kunci pencariannya huruf besar atau kecil.

Baiklah langsung saja kita akan mempraktekan dengan membuat project baru, Pada kasus ini kita akan membuat daftar menu kategori yang berisi data sebagai berikut :

namamodel : berisi nama kategori

descmodel : berisi penjelasan kategori

images : berisi photo kategori

Pada awalnya, semua menu kategori ini ditampilkan dalam ListView. Jika Anda mengetikkan sesuatu pada kolom pencarian, hanya menu kategori yang namanya sesuai dengan kata kunci yang akan ditampilkan. Jika Anda mengosongkan kolom pencarian, daftar lengkap pengguna akan muncul kembali.

Ada 2 file yang akan kita buat yaitu main.dart dan categori.dart

Code main.dart

import 'package:flutter/material.dart';
import 'package:monsieurspoon/model/categori.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _MysearchAppState();
}

class _MysearchAppState extends State<HomePage> {
  List<CategoriModel> _allCategori = [];

  void _getCategori() {
    _allCategori = CategoriModel.getCategories();
  }

  List<CategoriModel> _foundCategori = [];

  @override
  void initState() {
    _getCategori();
    _foundCategori = _allCategori;
    super.initState();
  }

  void _runFilter(String enteredKeyword) {
    List<CategoriModel> results = [];
    if (enteredKeyword.isEmpty) {
      // if the search field is empty or only contains white-space, we'll display all users
      results = _allCategori;
    } else {
      results = _allCategori
          .where((user) => user.namemodel
              .toLowerCase()
              .contains(enteredKeyword.toLowerCase()))
          .cast<CategoriModel>()
          .toList();
      // we use the toLowerCase() method to make it case-insensitive
    }

    // Refresh the UI
    setState(() {
      _foundCategori = results;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Search Data'),
        ),
        body: Container(
          decoration: const BoxDecoration(
            gradient: LinearGradient(
                colors: [Color.fromARGB(255, 145, 161, 250), Color(0xffBDBDB2)],
                begin: Alignment.topLeft,
                end: Alignment.bottomRight),
          ),
          child: Column(
            children: [
              Container(
                  margin: const EdgeInsets.all(20),
                  child: TextField(
                    onChanged: (value) => _runFilter(value),
                    decoration: const InputDecoration(
                        labelText: 'Search', suffixIcon: Icon(Icons.search)),
                  )),
              Container(

                  //margin: EdgeInsets.all(20),
                  child: Expanded(
                child: _foundCategori.isNotEmpty
                    ? ListView.builder(
                        itemCount: _foundCategori.length,
                        itemBuilder: (context, index) => Card(
                          key: ValueKey(_foundCategori[index].idmodel),
                          color: Colors.amberAccent,
                          elevation: 4,
                          //margin: const EdgeInsets.symmetric(vertical: 10),
                          margin: const EdgeInsets.all(15),
                          child: ListTile(
                            leading: Text(
                              _foundCategori[index].idmodel.toString(),
                              style: const TextStyle(fontSize: 24),
                            ),
                            title: Text(_foundCategori[index].namemodel),
                            subtitle: Text(_foundCategori[index].namemodel),
                          ),
                        ),
                      )
                    : const Text(
                        'No results found',
                        style: TextStyle(fontSize: 24),
                      ),
              )),
            ],
          ),
        ),
      ),
    );
  }
}

Penjelasan kode diatas:

import ‘package:flutter/material.dart’; kode ini berfungsi untuk mengambil library material flutter

import ‘package:monsieurspoon/model/categori.dart’; kode ini berfungsi mengambil data categori yang ada di file categori.dart

class HomePage extends StatefulWidget kode ini berfungsi untuk membuat class HomePage, dimana class ini merupakan turunan/extends dari widget StatefulWidget. Beberapa contoh dari stateful widget bawaan Flutter adalah: Checkbox, Radio, Slider, TextField, dan lain-lain.

List<CategoriModel> _allCategori = []; Kode ini menginisialisasi variabel bernama _allCategori sebagai sebuah list yang berisi objek CategoriModel. List tersebut awalnya kosong ( [ ] menandakan list kosong ) dan akan dapat menyimpan objek-objek dari tipe CategoriModel.

Code categori.dart

class CategoriModel {
  int idmodel;
  String namemodel;
  String descmodel;
  String images;

  CategoriModel({
    required this.idmodel,
    required this.namemodel,
    required this.descmodel,
    required this.images,
  });

  static List<CategoriModel> getCategories() {
    List<CategoriModel> categories = [];

    categories.add(CategoriModel(
      idmodel: 1,
      namemodel: 'viennoiseries',
      descmodel: 'Resepnya : ',
      images: 'assets/images/viennoiseries_cover.jpg',
    ));
    categories.add(CategoriModel(
      idmodel: 2,
      namemodel: 'Pastries',
      descmodel: 'Resepnya : ',
      images: 'assets/images/pastries_cover.jpg',
    ));

    categories.add(CategoriModel(
      idmodel: 3,
      namemodel: 'Bread & Buns',
      descmodel: 'Resepnya : ',
      images: 'assets/images/bread_cover.jpg',
    ));

    categories.add(CategoriModel(
      idmodel: 3,
      namemodel: 'COFFEE',
      descmodel: 'Resepnya : ',
      images: 'assets/images/coffee_cover.jpg',
    ));

    categories.add(CategoriModel(
      idmodel: 3,
      namemodel: 'JUICE',
      descmodel: 'Resepnya : ',
      images: 'assets/images/juice_cover.jpg',
    ));

    categories.add(CategoriModel(
      idmodel: 3,
      namemodel: 'Latte',
      descmodel: 'Resepnya : ',
      images: 'assets/images/latte_cover.jpg',
    ));

    categories.add(CategoriModel(
      idmodel: 3,
      namemodel: 'Crime',
      descmodel: 'Resepnya : ',
      images: 'assets/images/crime_cover.jpg',
    ));
    return categories;
  }

  toLowerCase() {}
}

Jika kode diatas dijalankan akan tampak seperti video dibawah ini

Demikian tutorial Membuat pencarian/search ListView di Flutter semoga bermanfaat ya