Membuat Layout di

Flutter
 State
State : informasi yang dibaca ketika suatu komponen ketika suatu
komponen dibuat dan mungkin akan mengalami perubahan keadaan
komponen tersebut tampil di layar
Komponen dalam flutter dibedakan 2 jenis yaitu
• Stateless : komponen yang tidak memiliki state dan digunakan untuk
membuat tampilan yang bersifat statis (Text, Icon, dll).
• Stateful : komponen yang dilengkapi dengan state (Checkbox, Radio,
Slider, dll)
 StatelessWidget
• Tidak memiliki state dan pengguna aplikasi tidak dapat berinteraksi
secara langsung dengan komponen
• Melakukan override (modifikasi) terhadap metode build() dan
mengembalikan objek bertipe Widget
• Digunakan untuk membuat tampilan statis
Contoh StatelessWidget
 StatefulWidget
• Pengguna dapat berinteraksi dengan komponen, untuk mengubah
nilai yang terdapat didalam komponen yang bersangkutan.
• Melakukan override (modifikasi) terhadap metode createState() dan
mengembalikan objek bertipe State.
• Digunakan untuk membuat tampilan dinamis.
• Ketika state(keadaan) pada suatu komponen berubah maka objek
akan memanggil setState() untuk menggambar ulang tampilan baru
Contoh StatefulWidget
 Kelas Row dan Column
• Kelas Row
Menyusun komponen-komponen yang terdapat didalamnya dengan
susunan horizontal
• Kelas Column
Menyusun komponen-komponen yang terdapat didalamnya dengan
susunan vertikal
Struktur Widget Flutter
Struktur Widget Flutter
 Material App
• Kelas ini menyatakan bahwa aplikasi dibuat menggunakan
komponen-komponen Material Design dan digunakan sebagai
container utama di dalam layar.
• Tiga property yang sering digunakan pada saat bekerja dengan
Material App adalah title, theme, dan home.
 Scaffold
• Berfungsi untuk membentuk struktur tampilan yang terdiri dari
application bar (bagian header) dan body.
• Untuk membuat application bar, kita perlu mengisi nilai ke dalam
appBar pada kelas Scaffold.
 AppBar
• Kelas AppBar berfungsi untuk membuat application bar, yang nantinya
diisi ke dalam appBar.
• Properti yang paling sering digunakan dalam kelas AppBar adalah title
 Contoh Row
body: SafeArea(
child: Row(
children: [
buatKotak(Colors.greenAccent, 100),
buatKotak(Colors.orangeAccent[400], 70),
buatKotak(Colors.greenAccent, 50),
buatKotak(Colors.orangeAccent[400], 90),
],
),
)
 Contoh Column

body: SafeArea(
child: Column(
children: [
buatKotak(Colors.greenAccent, 100),
buatKotak(Colors.orangeAccent[400], 70),
buatKotak(Colors.greenAccent, 50),
buatKotak(Colors.orangeAccent[400], 90),
],
),
)
Material-body
• Contoh : Text Field
 Mengatur jarak antar komponen

• Metode EdgeInsets.all() digunakan untuk mengatur margin maupun

padding di seluruh container (atas, kanan, bawah dan kiri).
margin: const EdgeInsets.all(5.0)
*objek dengan kondisi diatas akan memiliki margin/jarak dengan objek lain 5px
(atas, kanan, bawah, kiri)

• Metode EdgeInsets.only() digunakan jika kita hanya ingin mengatur

margin atau padding pada sisi tertentu saja
padding: const EdgetInsets.only(left: 5.0)
*objek dengan kondisi diatas akan memiliki jarak padding sebelah kiri sebesar 5px
 ListView

• Kelas ListView
digunakan untuk
membuat tampilan
komponen dengan
susunan vertikal
dalam bentuk daftar
yang dapat di-scroll
 Navigator
• Metode push()
Digunakan untuk menempatkan layar tertentu ke dalam stack
(diatas layar sebelumnya) dan menampilkannya sebagai layar aktif.

• Metode pop()
Merupakan kebalikan dari metode push(), yang akan mengambil
layar aktif (layar pada posisi paling atas) dari dalam stack sehingga
layar aktif kembali ke layar sebelumnya (layar yang terdapat
dibawahnya)
 Navigator
• SnackBar
Kelas SnackBar digunakan untuk menampilkan informasi singkat
dengan durasi tertentu. Jika parameter duration tidak disertakan
pada saat pembuatan objek dari kelas SnackBar, maka nilai dari
property tersebut akan diisi dengan 4.0s (4 detik)

• Drawer
Kelas Drawer digunakan untuk membuat panel yang tampil
secara horizontal dari samping layar. Komponen ini biasanya
digunakan untuk membuat daftar link navigasi
 TapBar

 Kelas TapBar digunakan untuk membuat tab, biasanya

dijadikan sebagai bagian bawah dari komponen AppBar.
 Untuk membuat komponen TabBar, kita juga memerlukan
TabController dan TabBarView.
 Komponen Tab Controller digunakan untuk menentukan
banyaknya tab yang akan dibuat dan indeks awal yang akan
diaktifkan, sedangkan TabBarView digunakan untuk
menampilkan halaman dari tiap tab.
 Bottom NavigationBar
 Komponen ini mirip fungsinya mirip dengan TabBar, tetapi
posisinya ada di bagian bawah layar.
 Komponen BottomNaigationBar dibuat didalam komponen
Scaffold. Yaitu dengan mengisi property bottomNavigationBar.
 Daftar elemen (item) yang terdapat di dalam komponen
ButtonNavigationBar dibuat menggunakan kelas
BottomNavigationBarItem
 Contoh Pembuatan Layout dan
Navigasi
• https://
drive.google.com/file/d/1DPE0KUFd_hXCj4T5qDkDn07qGfDcFvyO/vi
ew?usp=sharing

• https://drive.google.com/file/d/1jX9dkI-4gvx-dNgBKZHKW_-
KiBva9kjq/view?usp=sharing

• https://drive.google.com/file/d/19JQepbc6tRrD031nJ0lxWATBOItN9
CeR/view?usp=sharing
 Tugas
 Buatlah Aplikasi Mobile secara kelompok (2-3 orang) yang memiliki
kriteria sebagai berikut
 Terdapat menu Login
 Halaman Utama terdiri 4 menu yang ada ditengah layar secara
vertikal : Daftar Anggota, Aplikasi Stopwatch, Daftar Hobby
(halaman hobby diberi gambar dan keterangan hobby tiap
anggota), Logout
 Menu bottom Navigation Bar terdiri dari 2 menu yaitu halaman
utama dan menu bantuan yang berisi cara penggunaan aplikasi
 Tugas dipresentasikan secara kelompok dan diupload secara individu
di SPADA