📱 SERI 3 — Mengenal Layout Flutter: Rahasia Membuat Tampilan Aplikasi yang Menarik

Pernahkah kalian membuka aplikasi Instagram, TikTok, Shopee, atau Gojek?

Pernah memperhatikan mengapa tombol berada di tempat yang pas, gambar tersusun rapi, dan informasi mudah dibaca?

Ternyata semua itu dibuat menggunakan konsep yang disebut Layout.

Di Flutter, Layout adalah cara kita mengatur posisi dan ukuran widget agar aplikasi terlihat rapi, nyaman digunakan, dan menarik dipandang.

Bayangkan jika semua komponen aplikasi diletakkan secara sembarangan.

Tombol bertumpuk.
Teks saling menimpa.
Gambar berantakan.

Tentu pengguna akan langsung menutup aplikasi tersebut.

Karena itulah seorang Mobile Developer harus memahami Layout sebelum membuat aplikasi yang lebih kompleks.

🎯 Tujuan Pembelajaran

Setelah mempelajari materi ini, siswa mampu:

✅ Memahami konsep Layout pada Flutter

✅ Menggunakan widget Layout dasar

✅ Menyusun komponen aplikasi secara rapi

✅ Membuat tampilan Dashboard Siswa RPL

✅ Mengembangkan kreativitas dalam mendesain antarmuka aplikasi

🏗 Apa Itu Layout?

Layout adalah cara mengatur widget agar tampil sesuai keinginan.

Sederhananya:

Jika widget adalah bahan bangunan, maka Layout adalah arsiteknya.

Tanpa Layout, aplikasi hanya menjadi kumpulan komponen yang tidak teratur.

📚 Widget Layout yang Akan Dipelajari

1️⃣ Row

Digunakan untuk menyusun widget secara horizontal (ke samping).

Contoh:

📷 Nama | Kelas | Jurusan


Row(
  children: [
    Icon(Icons.person),
    Text("Darsu"),
  ],
)

Hasil:

👤 Darsu

2️⃣ Column

Digunakan untuk menyusun widget secara vertikal (ke bawah).

Contoh:


Column(
  children: [
    Text("Nama"),
    Text("Kelas"),
    Text("Jurusan"),
  ],
)

Hasil:

Nama

Kelas

Jurusan

3️⃣ Expanded

Digunakan agar widget mengisi ruang yang tersedia.

Contoh penggunaan:


Expanded(
  child: Container(),
)

Widget ini sering digunakan saat membuat menu dashboard atau kartu informasi.

4️⃣ SizedBox

Digunakan untuk memberi jarak.

Contoh:


SizedBox(height: 20)

Manfaat:

Tampilan lebih rapi
Tidak terlalu padat
Lebih nyaman dibaca

5️⃣ Padding

Memberikan ruang di dalam widget.

Contoh:


Padding(
  padding: EdgeInsets.all(16),
  child: Text("Halo Flutter"),
)

Bayangkan seperti memberi margin pada sebuah foto agar tidak menempel ke tepi layar.

6️⃣ Align

Mengatur posisi widget.

Contoh:


Align(
  alignment: Alignment.center,
  child: Text("Tengah"),
)

Bisa diletakkan di:

kiri
kanan
atas
bawah
tengah

7️⃣ Icon

Menampilkan ikon bawaan Flutter.

Contoh:


Icon(Icons.school)

Contoh ikon yang sering digunakan:

school
home
person
settings
favorite
search

8️⃣ Image

Menampilkan gambar.

Contoh:


Image.network(
 'https://...'
)

Atau dari folder assets.

Digunakan untuk:

Foto profil
Logo sekolah
Banner aplikasi
Produk marketplace

9️⃣ Card

Widget favorit para developer Flutter.

Digunakan untuk membuat tampilan seperti kartu.

Contoh:


Card(
  child: ListTile(
    title: Text("Pemrograman Mobile"),
  ),
)

Cocok digunakan untuk:

Dashboard
Daftar tugas
Informasi siswa
Menu aplikasi

🔟 ElevatedButton

Membuat tombol modern.

Contoh:


ElevatedButton(
  onPressed: () {},
  child: Text("Simpan"),
)

Digunakan untuk aksi penting seperti:

Login
Simpan
Hitung BMI
Kirim Data

1️⃣1️⃣ TextField

Digunakan untuk menerima input dari pengguna.

Contoh:


TextField(
  decoration: InputDecoration(
    labelText: "Nama",
  ),
)

Digunakan hampir di semua aplikasi:

Login
Registrasi
Form Data
Pencarian

💡 Proyek Mini: Dashboard Siswa RPL

Pada akhir materi, kita akan membuat tampilan sederhana seperti berikut:


+----------------------+
| Foto Profil          |
| Darsu                |
| XII RPL 1            |
+----------------------+

[ Jadwal ]

[ Tugas ]

[ Nilai ]

[ Profil ]

Di proyek ini siswa akan mempraktikkan:

✅ Row

✅ Column

✅ Card

✅ Icon

✅ Padding

✅ ElevatedButton

✅ Image

🔥 Tantangan untuk Siswa

Coba amati aplikasi di smartphone kalian.

Pilih satu aplikasi:

TikTok
Instagram
Shopee
Gojek
WhatsApp

Kemudian jawab pertanyaan berikut:

Widget apa saja yang kemungkinan digunakan?
Apakah ada Row?
Apakah ada Column?
Apakah ada Icon?
Apakah ada Card?
Bagaimana posisi tombolnya?

Tuliskan hasil pengamatan pada buku atau Google Classroom.

🎯 Kesimpulan

Membuat aplikasi bukan hanya tentang menulis kode.

Seorang Mobile Developer harus mampu menyusun tampilan agar mudah digunakan, nyaman dilihat, dan menarik bagi pengguna.

Layout adalah fondasi dari semua aplikasi modern yang kita gunakan setiap hari.

Hari ini kita belajar bagaimana menyusun widget.

Besok kita mulai membangun tampilan aplikasi yang benar-benar terlihat seperti aplikasi profesional.

"Belajar Flutter bukan tentang seberapa cepat kita mengetik kode. Yang lebih penting adalah memahami bagaimana setiap widget bekerja dan bagaimana widget tersebut disusun menjadi sebuah aplikasi yang bermanfaat bagi pengguna." 🚀

👉 "Sudah siap membuat Dashboard Siswa RPL? Ikuti Seri 3 dan praktikkan langsung di VS Code!"