📱 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:

1. Widget apa saja yang kemungkinan digunakan?
2. Apakah ada Row?
3. Apakah ada Column?
4. Apakah ada Icon?
5. Apakah ada Card?
6. 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!"

Read More