Widget Scaffold Flutter

 

Scaffold

Pemrograman Bergerak Flutter

Scaffold adalah widget yang berfungsi sebagai isi dalam flutter, setelah ada pondasi dan kerangka. Scaffold bisa digunakan dalam widget Stateful ataupun widget Stateless. Dalam kata lain, widget ini adalah implementasi dari UI material desain.

Pada artikel sebelumnya terkait dengan MaterialApp() sebagai kerangka aplikasi, dijelaskan dalam penggunaan properti home. 

Dalam file main.dart, mana yang lebih tepat antara menggunakan Scaffold sebagai class widget sendiri atau langsung dipanggil dengan home ? 

Dalam hal ini, lebih disarankan untuk memisahkan Scaffold dengan class widget sendiri. Baik akan menggunakan widget Stateful/Stateless.

Langsung dipanggil dengan properti home ❎

( Tidak disarankan, walaupun tidak error ) 

Disarankan dengan dibuat class sendiri ✅

( Widget Stateful )

Disarankan  dengan dibuat class sendiri ✅

( Widget Stateless )

Baik menggunakan class widget Stateful/Stateless, Scaffold diletakkan di bagian ini

Stateful

Stateless

Kenapa perlu dipisah? Begini logikanya...

MaterialApp adalah kerangka aplikasi ( kerangka rumah ), bila Scaffold berada dalam satu class maka Scaffold ini dianggap sebagai kerangka. Sedangkan dalam Scaffold inilah kegiatan/perubahan terjadi.

Ibaratnya, seperti pindah ruang 1 ke ruang lainnya, dari kamar mandi mau ke dapur atau ke ruang tamu. 

Tidak mungkin kerangka yang melakukan seperti itu semua bukan? Soalnya kegiatan itu dilakukan di dalam diri kerangka rumah.

Maka akan terjadi error/galat bila sebuah kerangka berubah berulang-ulang. Tidak mungkin kerangka rumah/aplikasi ikut bergerak atau berpindah-pindah.

MaterialApp adalah kerangka dan Scaffold adalah ruangan/segala hal yang ada di dalam rumah.

Paham?

Scaffold ini memiliki dua bagian penting dalam flutter, yaitu AppBar dan body. Ilustrasinya seperti berikut

• AppBar adalah seluruh bagian yang berwarna biru.
• body adalah seluruh bagian yang berwarna putih.

AppBar ini adalah widget yang digunakan menampung judul aplikasi atau beberapa aksi yang biasa muncul pada bagian atas aplikasi. Sedangkan body merupakan bagian interaksi.

Bila menggunakan contoh real aplikasi

UI WhatsApp

Bagian AppBar adalah bagian atas aplikasi yang menampung judul, ikon pecarian, list menu, judul ( chat, status, phone ). Sisanya yang bagian menampilkan chats adalah body.

Paham ? 😀

Selain dua properti penting tersebut, flutter menyediakan berbagai properti yang dibutuhkan dalam mengembangkan aplikasi mobile. Semuanya bisa terlihat langsung dengan menekan CTRL + Spasi