Custom Reusable Search Bar in Flutter
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.
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.
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.
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.
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.
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.
Keempat, beri tambahan di InputDecoration agar tampilan search bar sesuai dengan desain.
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.
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!
