Part 3: Membangun Aplikasi Tiruan Grab dengan Flutter — Widget Change for Onscreen Keyboard Login Screen
Pada part 2 kita telah membuat halaman login. Tetapi disana tidak terlihat tombol navigasi untuk berpindah halaman. Ternyata perubahan widget saat terdapat onscreen keyboard pada aplikasi Grab ini merupakan kunci untuk bisa keluar dari halaman login bagi yang ingin masuk menggunakan nomor ponsel. Kenapa? Karena tombol lanjut ke halaman berikutnya baru muncul saat ada onscreen keyboard.
Jadi apa saja perubahan widget saat terdapat onscreen keyboard? Jika di list, kira-kira berikut yang berubah :
- Terdapat icon back pada pojok kiri atas.
- Logo Grab hilang.
- Text ‘continue with social media’ hilang.
- Tombol dan background sosial media hilang.
- Terdapat tombol Continue.
Untuk mencapai hal tersebut, kunci utamanya yaitu bisa mendeteksi apakah ada onscreen keyboard atau tidak, kemudian dari kondisi tersebut diubah menjadi if-else untuk widget yang muncul atau hilang.
Jadi bagaimana mendeteksi terdapat keyboard atau tidak pada layar?.Cukup banyak solusinya. Saya memilih metode yang paling mudah, yaitu dengan menggunakan mediaQuery menggunakan kode berikut :
bool isKeyboardShowing = MediaQuery.of(context).viewInsets.bottom > 0;Letakkan kode tersebut pada baris pertama di dalam method build, tepatnya sebelum return karena kode ini membutuhkan context dari aplikasi yang sedang berjalan.
Kebanyakan aplikasi, jika user melakukan tap di luar TextField, biasanya akan dissmiss keyboard. Tapi tidak pada aplikasi ini. Sekarang kita akan ubah aplikasi ini menjadi bisa dissmiss keyboard jika tap di luar TextField. Cara mencapainya dengan menggunakan GestureDetector dan RequestFocus.
Letakkan kursor pada Scaffold, lalu klik ikon bohlam kuning, pilih “Wrap with widget..” kemudian ganti menjadi GestureDetector. Pada onTap gunakan kode berikut:
Menambahkan Back Button, Menampilkan dan Menghilangkan Bergantung pada Onscreen Keyboard
Pada widget padding pertama, hilangkan padding bottom. Disini kita akan memberi child Opacity IconButton pada padding , menambah left padding dan menghilangkan bottom padding.
Menampilkan dan menghilangkan icon button dicapai dengan menggunakan Opacity widget. Opacity widget ini dalam keadaan widget tersembunyi, akan tetap mengambil ruang. Namun ia tetap berfungsi menampilkan ripple apabila di-tap meskipun saat keadaan hidden sehingga onTap dari IconButton harus di-set menjadi null saat widget tersembunyi.
Menyembunyikan Logo Grab
Untuk logo Grab, saat terdapat onscreen keyboard, logo tersebut hilang. Disini saya akan menggunakan widget Opacity kembali.
Menghilangkan Text “or continue with a social account”
Sama dengan sebelumnya, disini juga digunakan widget Opacity.
Mengganti Section Social Media dengan tombol Continue
Untuk bagian ini, akan dihilangkan dan diganti dengan widget lain, sehingga tidak menggunakan Opacity widget. Jadi disini kita akan menggunakan operator ternary. Jika teman teman-teman prefer menggunakan if-else, gunakan pengaturan pubspec.yaml pada Part 1 untuk mengaktifkan eksperimental fitur dari Flutter. Karena defaultnya if-else akan menimbulkan error apabila digunakan di widget tree.
Disini ada beberapa perubahan yang diperlukan, yaitu :
- Mengatur bottom padding dari social media container
- Mengubah warna background
- Mengganti widget
Sesuaikan kode di dalam container menjadi berikut. Untuk error navigator silahkan di comment saja terlebih dahulu. kita akan selesaikan nanti.
Akhirnya selesai bagian perubahan widget ketika terdapat onscreen keyboard. Kode lengkapnya dapat dilihat dibawah ini.
Selanjutnya kita akan membuat halaman verifikasi OTP untuk login ponsel.
Lihat kode lengkap sampai halaman verifikasi pada link dibawah :
Tulisan lain dalam seri ini :
