Latihan membuat desain apk cleaning service sederhana pada flutter

     Pada pembahasan kali ini, saya akan membagikan program khususnya desain aplikasi cleaning service sederhana dengan menggunakan flutter. Dengan menggunakan software android studio, saya dapat melakukan sebuah pemrograman dari aplikasi tersebut. 

    Sebelum masuk ke source codenya, langkah awal yang harus kita lakukan yaitu membuat sebuah projek flutter di android studio, kemudian isikan identitas dari projek tersebut seperti nama projek, package, dan lain sebagainya. Setelah mengisi identitas projek, langkah berikutnya yang harus dilakukan yaitu menyiapkan assets yang akan digunakan untuk projek tersebut, di dalam projek flutter buatlah sebuah direktori baru dengan nama "assets" yang di dalamnya ada folder fonts, images, dan icons.

    Agar lebih jelasnya, perhatikan gambar berikut ini :

Struktur data

    Setelah itu, di masing-masing folder tersebut, masukkan file assets yang akan kita gunakan, seperti pada folder fonts yang berisi file dari fonts yang akan kita gunakan pada projek aplikasi, file icons, yang berisi file gambar icon-icon yang akan digunakan pada projek, dan folder images yang berisi gambar-gambar yang akan digunakan pada projek ini, sehingga hasilnya seperti berikut ini :

File assets

    Setelah menyiapkan file assets, lakukan konfigurasi file "pubspec.yaml", seperti berikut ini :

pubspec.yaml

    Setelah itu simpan atau save, kemudian lanjut kita akan mengganti program dari file "main.dart' yang ada di folder "lib", jadi program yang ada di file main.dart akan kita hapus semuanya, kemudian ganti. untuk program main.dart nya yaitu sebagai berikut :

main.dart

    Setelah itu, di dalam folder lib buat folder atau direktori baru lagi dengan nama pages, yang akan digunakan untuk menyimpan program dari halamann atau screen yang akan dibuat. perhatikan gambar berikut ini :

folder pages

    Kemudian di dalam folder pages, buatlah tampilan SplashScreen yang nantinya akan tampil di halaman awal aplikasi begitu dibuka. untuk nama filenya disini saya berikan "splash_screen.dart", kemudian untuk programnya yaitu sebagai berikut : 

splash_screen.dart

    Setelah itu, di dalam folder pages lagi, buatlah file program dengan nama "main_screen.dart", sebagai program tampilan utama dari aplikasi ini. berikut ini adalah program dari main_screen.dart :

main_screen.dart

    Dan ketika di jalankan, maka hasilnya adalah sebagai berikut ini :

Splash Screen

    Jika button lanjutkan di klik, maka akan muncul tampilan utama aplikasi seperti ini :

Main Screen