Part 2 : Membangun Aplikasi Tiruan Grab dengan Flutter — Login Screen
Saat belajar membuat UI Grab ini, saya menyadari ada hal yang unik pada design dari Grab, yaitu UI dari Aplikasi Grab berbeda saat papan ketik muncul dan papan ketik tidak muncul berbeda. Mungkin hanya sekedar menghilang-munculkan UI. Tapi di flutter yang memicu method build sedikit membuat kerepotan untuk membaca state keyboard. Jadi screen login akan saya pisah menjadi 2 seri, yaitu untuk membuat halaman static dan halam yang menyesuaikan saat papan ketik muncul. Hasil akhir tampilan bisa dilihat pada Part 1 atau bagian paling bawah dari tulisan ini.
Pada part 1 kita telah membuat halaman splash screen Grab. Untuk halaman login, pertama kita buat style untuk font dulu, agar mirip dengan aplikasi aslinya. Buat file baru dengan nama constant.dart pada folder lib. Isinya nanti berupa konstanta style. Cukup berguna, namun terkadang juga tidak berguna karena harus di modifikasi lagi ukuran dan warna fontnya.
Cukup tidak berguna ya karena hanya merubah beberapa parameter? Ya mohon di maafkaan, karena disini kita saling belajar. Jika ada saran, bisa disampaikan. Cara ini mengadopsi folder values pada android native. Jika terman-teman pernah menggunakan Supernova, hasil generate supernova mengandung folder values. Namun ini hanya versi sederhana dan tidak mengandung banyak konstanta.
Nama variabel yang saya gunakan untuk membuat sebuah konstanta berupa lowerCamelCase. Sedikit berbeda dengan pemrograman lain yang jika menulis konstanta menggunakan huruf kapital dengan pola SCREAMING_CAPS. Bisa dibaca pada link ini. Sebenarnya tidak disarankan menggunakan prefix letter, misal disini letter “k” berdasarkan dokumentasi. Tapi saya masih mempelajari bagian ini.
Oke, sekarang kita masuk ke kode halaman login. disini kita akan menulis kode untuk gambar, text, textfield, container login sosial media dan tombol pemilihan kode negara. Pemilihan kode negara akan dibuat menggunakan package yang telah tersedia di flutter, yaitu country_code_picker.
Sekarang kita ubah body dari Scaffold menjadi column.
Lalu untuk logo, kita gunakan kode dari splash screen. Untuk text, gunakan widget Text dengan style yang sebelumnya telah kita tulis.
Upsss, sepertinya widget yang dibuat tidak berada di zona aman. Posisi ini berpotensi terhalang oleh “poni” smartphone. Flutter menyediakan widget yang menjaga agar setiap widget berada pada zona aman untuk ditulis yang bernama SafeArea. Tapi disini saya belum akan menggunakan widget tersebut. Disini saya akan mengambil nilai dinamis berapa pixel yang dibutuhkan untuk berada pada zona aman drawing widget, yaitu dengan MediaQuery. Tempatkan widget berikut menjadi children pertama pada widget Column.
Untuk TextField dan Country Code Picker, saya akan membungkus widget tersebut dalam masing-masing container untuk memberikan efek background putih dan circular corner. Kemudian agar widget tersebut berada dalam satu baris, widget tersebut akan dibungkus lagi ke dalam Row widget. Terakhir untuk tambahkan sedikit padding.
Jika CountryCodePicker tidak berjalan, silahkan sesuaikan pubspec.yaml kemudian import package dari country_code_picker.
Nah, selanjutnya bagian footer. untuk menjaga footer berada dibawah screen, kita akan menggunakan widget Spacer. Tombol login sosial media akan saa buat custom, tidak menggunakan bawaan tombol dari flutter. Teman-teman bisa membuat tombol sendiri dengan bantuan Container decoration. Tombol ini saya buat tidak berfungsi sebagai tombol. Loh? Tombol tapi tidak sebagai tombol?. Maksud saya begini, tombol ini hanya berupa UI dan tidak dapat di tap ataupun memiliki efek ripple saat di tap. Teman-teman bisa membuat efek menjadi sebuah clickable button dengan menggunakan widget Material dan Inkwell. Nanti kita juga akan belajar hal tersebut pada tampilan yang lain. Untuk sosial media section kodenya berikut. Oh iya, agar bagian bawah tidak berada diluar zona aman, disini saya tambahkan padding dengan MediaQuery. Kodenya sebagai berikut.
Selesai yah widget nya. Tapi kurang rapi sepertinya. Tinggal tambahkan padding dan SizedBox untuk menjaga space antar widget. Disini saya hanya mengunakan metode paling simpel, yaitu membungkus masing-masing widget dengan padding. Tapi seperti tadi, angkanya tidak statis, tapi dinamis dengan menggunakan MediaQuery.
Oh iya, di Flutter untuk membungkus widget bisa menggunakan shortcut, yaitu dengan meletakkan kursor pada nama widget lalu tekan Ctrl + period (titik) atau dengan klik lambang lampu kuning pada awal baris
Halam login statis ini selesai. Selanjutnya kita buat efek untuk mengubah UI saat terdapat onscreen keyboard.
Lihat kode lengkap sampai halaman verifikasi pada link dibawah :
Tulisan lain dalam seri ini :
