Sunday, February 23, 2020

Membuat Pencarian List dengan Highlight Text pada Flutter

Membuat Search dengan Highligh Text
Membuat Search dengan Highlight Text pada Flutter - Dalam pembuatan aplikasi mobile, salah satu fitur yang paling umum ditemui dalam aplikasi mobile adalah pencarian list atau data. Pencarian data sangat penting terutama pada form dengan daftar data yang sangat banyak yang biasa nya kita tampilkan dalam sebuah list.
hasil aplikasi
Pada artikel-artikel dan contoh source code sebelumnya, saya sudah membahas dan memberikan contoh pencarian sederhana diserta dengan CRUD. Untuk meningkatkan kualits dan user experience pada pencarian list yang kita tampilkan pada pengguna, kita bisa menambahkan highlight text yang sesuai dengan kata pencarian yang di-input oleh pengguna.


Dengan penambahan highlight pada text yang cocok dengan input yang dimasukan oleh pengguna, tentu saja akan meningkatkan user experience aplikasi yang kita buat.

Cara Membuat Highlight?

Pada pembuatan pencarian dengan tambahan fitur highlight pada artikel ini, saya menggunakan widget RichText yang mendukung style text yang sangat beragam pada widget tersebut dengan memasukan widget anak-anak nya berupa TextSpan dengan style tertentu. Prinsip pembuatan highlight text pada pencarian yang saya buat adalah sebagai berikut:
  • Menentukan item dan dijadikan sebagai variabel utama (misal: Makanan Manusia).
  • Jika pengguna memasukan kata pencarian, variabel utama akan di pecah (split) dengan kata pencarian tersebut.
  • Pecahan dari variabel utama menjadi sebuah Array String.
  • Array String disusun kembali melalui TextSpan, dan text dari input pencarian akan disisipkan diantara element Array.
  • Kusus untuk text yang cocok dengan input dari pencarian pengguna akan diberikan latar belakang kuning supaya terlihat berbeda (highlight).
Nah, agar sobat eduprog lebih bisa memahami cara pembuatan pencarian list dengan tambahan fitur highlight text, sobat eduprog bisa melihat dan mendownload source code lengkap implementasi tersebut pada Flutter.


Source code lengkap dari projek di atas bisa diambil melalui link dibawah ini
Share This
Latest
Next Post

Halo, Saya A.M Hirin seorang Penulis Buku IT, International Freelance Programmer, dan Senior Developer di Perusahaan Konsultan IT. Saya penggila kode dan sudah berkutat selama 15 tahun di dunia pemrograman. Anda membutuhkan bantuan terkait skill dan keahlian saya? Kontak saya melalui email : nump.info@gmail.com

0 komentar: