Custom Reusable Search Bar in Flutter

Astrida Nayla
5 min readJun 8, 2021

--

Ilustrasi search bar di aplikasi SIMPK BPKH

Flutter merupakan salah satu teknologi open-source untuk mobile development yang banyak digunakan saat ini. Flutter dipercaya lebih mudah untuk dipahami oleh mobile developer pemula dibanding teknologi mobile development lainnya. Pemrograman frontend aplikasi mobile pada Flutter dipermudah dengan keberadaan built-in widgets yang mudah untuk dipakai dan dimodifikasi. Pada artikel ini, saya akan membahas bagaimana tim saya menggunakan Flutter untuk membuat komponen custom search bar yang bersifat reusable.

Tentang Flutter

Flutter adalah software development kit (SDK) bersifat open-source yang dikembangkan oleh Google. Dengan Flutter, aplikasi yang dikembangkan dapat diakses di berbagai platform meski hanya dibuat dari satu codebase. Flutter sendiri menggunakan bahasa pemrograman Dart yang juga dikembangkan oleh Google.

Keunggulan dari Flutter:

  • Memiliki fitur hot reload yang mempercepat proses kerja, kita bisa langsung melihat perubahan tanpa perlu build dari awal.
  • Bahasa pemrograman yang digunakan, yaitu Dart, tidak jauh berbeda dengan Java.
  • Memiliki berbagai koleksi user interface (UI) elements yang bisa langsung dipakai, berdasarkan design system Google Material Design yang telah terbukti kualitasnya. UI elements tersebut juga mudah dimodifikasi sesuai keinginan.
  • Tampilan aplikasi yang dibuat dengan Flutter akan sama di berbagai platform tanpa perlu ada banyak penyesuaian.

Dengan pengetahuan ini, tim saya memutuskan untuk menggunakan Flutter dalam proyek perangkat lunak kami. Mula-mula, kami melakukan set up Flutter di komputer masing-masing. Langkah set up tersebut dapat dilihat di tautan ini. Setelah itu, kami mulai dari tahap design sebelum memasuki implementasi program.

#1 Membuat Desain

Untuk membuat custom search bar, pertama-tama kami mendesain panduan UI element-nya. Kami membuat sendiri desain search bar-nya, dengan spesifikasi desain sebagai berikut.

Panduan UI element untuk search bar

Desain komponen kami juga menspesifikasikan state dari search bar ini untuk kasus-kasus tertentu. Setelah panduan UI element difinalisasi, barulah kami bisa mulai membuat program untuk search bar ini. Namun, mula-mula kami perlu membuat test terlebih dahulu.

#2 Membuat Test

Sesuai dengan aturan Test Driven Development, kami membuat test terlebih dahulu. Untuk membuat test UI element pada Flutter, cukup tes apakah static elements-nya sudah sesuai. Karena search bar bukan sebuah halaman, pertama-tama kita perlu membungkusnya dengan widget MaterialApp agar bisa di-test. Untuk itu, kami membuat fungsi berikut.

Fungsi yang membungkus widget dengan MaterialApp

Lalu, barulah kita membuat unit test yang sesuai. Untungnya, Flutter memiliki built-in function yang memudahkan test tampilan widget dalam berbagai kasus. Fungsi expect di Flutter mirip dengan fungsi assertEquals. Di contoh berikut, kami membuat test apakah search bar mengandung label dan prefix icon yang sesuai.

Keseluruhan functional test untuk widget custom search bar

Jalankan test dan pastikan bahwa test failed, namun tidak error. Setelah itu, barulah kita membuat implementasi program yang sesungguhnya.

#3 Implementasi Program

Sebelum membuat program, perlu diketahui bahwa search bar merupakan stateful widget. Stateful widget adalah widget yang dinamis, dapat berubah tampilan berdasarkan kejadian yang disebabkan oleh interaksi pengguna atau ketika ia menerima data. Search bar merupakan stateful widget karena ia bersifat dinamis terhadap input dari pengguna.

Pertama, kita membuat class search bar yang extend class StatefulWidget. Jangan lupa untuk meng-import package yang sesuai.

Membuat class search bar yang extend StatefulWidget

Kedua, agar search bar bersifat reusable, maka kita perlu menspesifikasikan parameter. Parameter merupakan aspek dari search bar yang implementasinya dapat beragam, misalkan teks untuk label.

Menspesifikasikan parameter untuk widget search bar

Ketiga, search bar pada dasarnya adalah sebuah widget TextFormField yang dimodifikasi. Sehingga, kami menggunakan widget tersebut dengan mengubah beberapa parameternya agar bisa berfungsi sebagai search bar.

Implementasi program untuk widget custom search bar

Keempat, beri tambahan di InputDecoration agar tampilan search bar sesuai dengan desain.

Menambah parameter InputDecoration untuk mengatur tampilan search bar

Hore! Akhirnya kita berhasil membuat custom search bar yang reusable. Untuk menggunakannya, cukum import file Dart berisi search bar-nya ke file Dart dimana search bar tersebut akan digunakan. Lalu, panggil widget-nya dan spesifikasikan parameternya. Berikut merupakan contoh implementasinya.

Contoh pemanggilan custom search bar di file lain

Dengan ini, program kita tidak hanya lebih terbaca, namun kita juga dapat menghemat waktu pengerjaan. Kita dapat mengimplementasikan proses ini untuk elemen-elemen UI lain selain search bar pada aplikasi kita.

Kesimpulan

Flutter merupakan teknologi open-source yang dapat memudahkan kita untuk membuat aplikasi mobile dengan built-in widgets-nya. Pada Flutter, terdapat dua macam widget, yaitu stateful widget dan stateless widget. Pada artikel kali ini, saya membahas bagaimana saya membuat custom search bar yang merupakan stateful widget. Sebagai mobile developer pemula, saya sangat merekomendasikan Flutter, karena mudah dipahami dan bahasanya cukup familiar. Search bar merupakan contoh widget sederhana yang bisa kita coba. Nanti, semakin terbiasa dengan Flutter, kita akan bisa membuat berbagai widget yang lebih kompleks seperti card, date picker, dan time picker. Semoga artikel ini bisa berguna bagi kalian yang ingin belajar menggunakan Flutter!

--

--

Astrida Nayla

アストリッド / product designer, passionate in design & sustainability