Part 6 : Membangun Aplikasi Tiruan Grab dengan Flutter — Penyederhanaan Widget (Optional)
Pada Part 5 kita sudah membuat custom widget. Jadi tidak ada salahnya kita membungkus beberapa widget yang ada dan digunakan berulang kali menjadi custom reusable widget sehingga dapat digunakan kembali dan tidak mengetik kode yang sama berulang-ulang.
Reusable Widget pada Splash Screen
Kita mulai dengan logo Grab dari splash_screen.dart karena digunakan dua kali, yaitu pada splash_screen.dart dan login_screen.dart. Extract logo grab ( pada Widget Images) kemudian berikan nama class-nya. Saya memberikan nama GrabLogo.
Lalu pada folder widget, buat file baru dengan nama grab_logo.dart. Pindahkan semua class GrabLogo ke file tersebut. Jangan lupa import material.dart juga.
Menghilangkan GrabLogo dari splash_screen.dart akan memicu error karena class tersebut tidak ditemukan. Untuk menghilangkannya, lakukan import class tersebut.
Reusable Widget pada Login Screen
Karena login screen juga memiliki Grab logo. Ganti kode Images logo Grab menjadi widget GrabLogo. Tentunya jika copy-paste code akan menimbulkan error karena importnya tidak diikut sertakan.
Lalu karena ada beberapa widget memanfaatkan padding kiri sebesar 5% layar, sebaiknya kita ubah juga menjadi reusable widget. Kemudian pindahkan ke file tersendiri dalam folder widgets. Akan tetapi karena child masing-masingnya berbeda, maka di reusable widget ini hanya akan menghilangkan keterangan padding saja. Saya menyimpannya pada folder widgets dengan nama five_percent_padding.dart. Kodenya bisa dipelajari sebagai berikut ini :
Nah, kalau teman-teman ingin melihat atau membandingkan login_screen.dart setelah mengganti beberapa widget menjadi reusable, bisa dilihat pada pada kode berikut:
Lalu kira-kira apalagi yang bisa dirubah menjadi reusable widget? Jika ingin belajar dan memahami lagi, kita convert button untuk memilih kode negara. Klik kanan pada container CountryCodePicker, extract dan beri nama GrabSelectCountry. Pindahkan juga menjadi file tersendiri di folder widgets, beri nama grab_select_country.dart. Jika terdapat error setelah memindahkan widget, lakukan import file tersebut.
Apalagi yang bisa dijadikan reusable? Nah, saya ingin menyederhanakan Social Media Button dan tombol Continue pada footer. Disini saya meng-convert tombol Continue, section untuk login sosial media, dan tombol Facebook/Gmail. Totalnya saya membuat tiga file baru untuk widget, untuk hasil akhirnysa setelah di kostumisasi dapat dilihat di kode berikut :
- grab_social_media_and_continue.dart
- grab_continue_button.dart
- grab_button_login_social_media.dart
Adapun file login_screen.dart menjadi seperti berikut :
Kode penuhnya bisa dilihat pada link di bawah ini
Tulisan lain dalam seri ini :
