Part 4 : Membangun Aplikasi Tiruan Grab dengan Flutter — Verification Screen
Sudah dua screen selesai, tapi kita masih belum masuk ke screen utama. Pada part 1 kita telah membuat splash screen, part 2 membuat login screen dan part 3 membuat perubahan pada login screen. Sekarang lanjut membuat screen untuk verifikasi. Untuk tampilan halaman verifikasi ini cukup mudah. Tampilan hanya berisi text dan navigasi.
Sebenarnya bisa saja membuat fungsional membaca sms. Kalau di native bisa menggunakan SmsRetriever. Pada Flutter saya menemukan dua package, yaitu sms_retriever dan sms_autofill. Tapi yang support andoidx hanya sms_autofill. Sms Retriever itu apa sih? Jadi di android, ada package yang bisa baca sms masuk tanpa perlu minta izin. Biasanya ya untuk OTP. Kalau bawaan ini biasanya sms masuk seperti ini, pasti familiar.
<#> ExampleApp: Your code is 123456
FA+9qCX9VSuSebelumnya yang diatas itu hanya untuk berbagi sedikit ilmu aja ya, belum akan diimplementasikan disini. Nanti di lain fokus akan dicoba untuk buat tulisannya kalau ada yang butuh.
Balik ke tema, sedikit menampilkan kembali tentang tampilan yang akan kita buat.
Oke, sekarang buat file baru bernama verification_screen.dart di dalam folder screens. Karena sebelumnya kita sudah melihat widget Spacer, Text, TextField, SizedBox dll. Saya berikan langsung semua kode tampilannya.
Jangan lupa daftarkan screen ke route main.dart
... //another import
import 'package:grab_clone/screens/verification_screen.dart';...initialRoute: SplashScreen.id,
routes: {
SplashScreen.id: (context) => SplashScreen(),
LoginScreen.id: (context) => LoginScreen(),
VerificationScreen.id : (context) => VerificationScreen(),
},
...
Pada halaman login screen di widget Flat Button untuk tombol Continue, tambahkan onPress untuk navigasi ke halaman verifikasi.
Sehingga keseluruhan file login_screen.dart menjadi seperti berikut :
Pada screen ini bisa kita tambahkan timer dan/atau membuat benar-benar membaca sms yang masuk. Tapi mungkin akan saya buatkan pada kesempatan lain. Teman-teman mungkin bisa mencoba sendiri bagian tersebut sebagai latihan.
Untuk berpindah dari halam verifikasi ke halaman utama, kita akan memanfaatkan TextField onChanged. Jadi jika kata dalam TextField lebih dari 6 karakter, maka proses dan pindah ke halaman berikutnya. Potongan kodenya berikut ini :
onChanged: (value) {
if (value.length >= 5) {
Navigator.of(context).pushNamed(MainScreen.id);
}
},Tapi sebelumnya kita buat dulu halaman utama. Buat folder baru di dalam folder screen, bebas saja namanya, tapi saya akan menggunakan nama bottom_navigation. Tujuannya untuk mengindikasikan bahwa semua halaman utama nanti berada dalam bottom navigation. Buat file baru dalam folder tersebut dengan nama main_screen.dart. Tuliskan kode minimal beserta dengan static string untuk route di main.dart. Pada Vs. Code bisa menggunakan snippet ‘stl’ untul StatelessWidget atau ‘stf’ untuk StatefulWidget. Kode yang saya gunakan untuk halaman utama adalah berikut ini :
Jangan lupa daftarkan juga pada main.dart
... //another import
import 'package:grab_clone/screens/login_screen.dart'...initialRoute: SplashScreen.id,
routes: {
SplashScreen.id: (context) => SplashScreen(),
LoginScreen.id: (context) => LoginScreen(),
VerificationScreen.id : (context) => VerificationScreen(),
MainScreen.id: (context) => MainScreen(),
},
...
Kode akhir dari verification_screen.dart adalah berikut :
Kode sumber untuk tutorial pertama sampai tahap ini bisa teman-teman lihat pada repository berikut. Nah, selanjutnya kita akan membuat bottom navigation untuk halaman utamanya.
Tulisan lain dalam seri ini:
