Hai sahabat cymed, setelah kemarin kita menginstall Flutter pada platform windows dan linux, kali ini kita akan ngoprek cara buat halaman login menggunakan Flutter
Membuat Projek
buka terminal atau cmd dan buat folder baru untuk menampung folder project agar tidak tercampur dengan file atau folder yang lain
mkdir Cymed
cd Cymeddan buat project baru bernama “tokobuku” tanpa tanda kutip dan klik enter
flutter create tokobuku
lalu masuk ke folder project yang baru saja kita buat
cd tokobukubuka vscode lalu pilih “File > Add folder to workspace > tempat folder project” atau setelah kita masuk ke folder tokobuku lalu masukan perintah berikut
code .setelah kita membuka folder projek toko buku didalam folder lib kita buat folder baru untuk semua asset yang akan kita gunakan seperti gambar atau bahan font, tapi kali ini kita akan menggunakan gambar saja
dan didalamnya kita tambahkan file logo yang bisa didownload di sini atau temen-temen bisa membuat sendiri atau mencari sendiri di google dan masukanke dalam folder assets
setelah itu kita buka file dengan nama pubspec.yaml dan tambahkan lokasi dimana file asset yang kita tambahan tadi dan save dapat dilakukan dengan crtl+s
assets:
- lib/assets/
setelah itu kita buat folder baru dengan nama “page” tanpa tanda kutip untuk menampung file dari halaman yang ada pada aplikasi
lalu buat 2 buah file dengan nama
login_page.dart
home_page.dartStart Coding…
kita mulai dengan file main.dart dulu, file ini merupakan file utama yang akan dieksekusi oleh flutter yang nantinya akan di build menjadi file debug.apk yang akan diinstall pada perangkat yang terhubung
hapus semua komen dan pindahkan class MyHomePage ke file home_page.dart dan sisakan class MyApp saja
setelah itu kita ubah parameter dari class MyApp menjadi LoginPage(), dan import file login_page agar nantinya dapat terbaca oleh file main.dart
pindah ke file login_page.dart, disini kita akan membuat tampilan dari login aplikasi TokoBuku, sambil aku jelasin sedikit sedikit masukkan kode berikut
sementara pada halaman home page kita bakalan buat tampilannya seperti dibawah ini, yang tampilannya berisi appbar, foto, dan juga tombol untuk logout
dan berikut suber kode nya
setelah itu save file dan lihat aplikasi, huwalaaaaa
kalo ada pertanyaan silahkan komen
