Part 3 | main.dart

Pada part 3 dari tutorial ini saya baru akan memulai menulis kode yang sebenarnya, dan semua pekerjaan yang menggunakan framework Flutter akan dimulai dari file bernama main.dart yang ada pada folder lib. Oleh sebab itu bagian ini dinamakan main.dart, begitu juga untuk artikel part-part selanjutnya akan dinamakan sesuai dengan nama file yang akan ditambahkan.

Oleh sebab itu bagian ini dinamakan main.dart, begitu juga untuk artikel part-part selanjutnya akan dinamakan sesuai dengan nama file yang akan ditambahkan.

Pada folder Flutter yang telah dibuat pada part 2 sebelumnya akan terdapat sebuah folder yang bernama "lib" dan didalam folder tersebut akan terdapat file dart yang bernama "main.dart".

Didalam file tersebut akan ditemukan kode bawaan dari aplikasi Flutter dan saya tidak memerlukannya sehingga semua kode tersebut akan saya hapus kecuali bagian import material-nya saja.

Bahasa Dart memiliki function `main()` sebagai entry point-nya, sebagai entry point untuk menjalankan aplikasi Flutter maka dibutuhkan function `runApp()` untuk mendapatkan semua widget sebagai argumen dalam membuat tampilan pada layar, untuk itu saya perlu menambahkan function-function ini pertama kali dibawah import material.

Entry point runApp ini akan memanggil sebuat StatelessWidget yang diberi nama MyApp..

Pada MyApp tersebut, saya akan menggunakan function materialApp dalam membangun aplikasi ini, sehingga ada beberapa hal yang perlu diatur pada fuction tersebut:

pertama, title: merupakan sebuah variable String yang digunakan untuk memberi nama judul pada aplikasi ini, jika dijalankan pada laman web biasanya akan muncul pada title di tab browser.

kedua, debugShowCheckedModeBanner: merupakan variable Boolean yang digunakan untuk mengaktifkan atau menonaktifkan tanda "debug" banner di layar kanan atas pada aplikasi yang dikerjakan, agar tampilan yang dibuat dapat terlihat jelas.

ketiga, theme: merupakan properti dasar untuk visual aplikasi, dan saya akan menambahkan 2 skema warna dasar pada aplikasi sehingga membutuhkan function ThemeData() pada properti ini.

Untuk menggunakan colorSceme maka saya perlu membuat warna dari materialColor Swatch lalu mendefinisikannya pada primary color dan secondary color.

Diluar itu, aplikasi ini akan menggunakan properti Scaffold() dan untuk generalisasi warna dari scaffoldnya saya definisikan warna latar belakang scaffold tersebut pada function ThemeData().

keempat, home: merupakan properti widget yang akan mengarahkan kepada bentuk widget dari tampilan utama aplikasi, biasanya akan diarahkan pada state component yang lain.

Sehingga properti home ini akan saya arahkan pada state component yang diberi nama dengan "NavActive" dimana state component tersebut akan saya buat pada file yang berbeda.

Untuk selanjutnya, sebelum membuat state component, saya memerlukan beberapa folder baru yang akan saya tambahkan didalam folder "lib" agar file aplikasi ini akan lebih terorganisir.

pertama, Navigations: nantinya akan berisi kumpulan file navigasi aplikasi.

kedua, pages: nantinnya akan berisi kumpulan file halaman yang akan digunakan pada masing-masing konten.

ketiga, sections: nantinya akan berisi kumpulan file widget yang akan mengisi beberapa section penting dalam halaman konten.

keempat, widgets: nantinya akan berisi kumpulan file widget yang akan membatu bagian navigasi bekerja.