Membuat halaman data kelompok

 

            https://z6s006yp6s10.zapp.page/#/

📱 Mengenal Flutter Lewat Aplikasi “Kelompok Belajar MADODET”

Flutter merupakan framework open-source dari Google yang digunakan untuk membangun antarmuka aplikasi mobile, web, dan desktop hanya dengan satu basis kode. Pada artikel ini, kita akan membedah dan memahami bagaimana sebuah aplikasi sederhana “Kelompok Belajar MADODET” dibangun menggunakan Flutter.

---

🎯 Tujuan Aplikasi

Aplikasi ini dibuat untuk menampilkan informasi anggota dari sebuah kelompok belajar bernama MADODET. Setiap anggota memiliki detail berupa nama lengkap, nama panggilan, nomor absen, alamat, dan foto. Aplikasi ini juga menampilkan ucapan terima kasih dengan desain menarik.

---

🧱 Struktur Utama Aplikasi

Mari kita bahas kode secara bagian per bagian.

1. main() dan MyApp

void main() {
  runApp(MyApp());
}

Fungsi main() adalah titik masuk aplikasi Flutter. MyApp adalah widget utama yang menjalankan MaterialApp.

MaterialApp(
  title: 'Kelompok Belajar',
  home: KelompokPage(),
  debugShowCheckedModeBanner: false,
)

MaterialApp mengatur tema dan routing utama aplikasi. Di sini, halaman pertama adalah KelompokPage.

---

2. Halaman Utama: KelompokPage

Widget ini merupakan halaman utama aplikasi. Di sinilah seluruh tampilan anggota kelompok dan tombol ucapan terima kasih ditampilkan.

➕ Data Anggota

final List<Map<String, String>> anggota = [
  {
    "nama": "Evan Raka Riadi",
    ...
  },
  ...
];

Data anggota kelompok disimpan dalam bentuk List<Map<String, String>>, sehingga memudahkan proses looping.

---

3. Tampilan UI

➤ Background Kustom

CustomPaint(
  painter: StripedBackgroundPainter(),
)

Background dibuat dengan CustomPainter untuk menciptakan efek garis diagonal berwarna merah muda transparan.

➤ Foto & Judul

Image.asset('assets/GG.jpg')

Menampilkan gambar di atas daftar anggota.

➤ Daftar Anggota

ListView.builder(...)

Setiap anggota ditampilkan dalam sebuah card dengan tombol “Tentang Saya” yang memunculkan dialog berisi informasi lengkap.

➤ Dialog Informasi

showDialog(
  context: context,
  builder: (_) => AlertDialog(
    title: Text("Tentang ${data["nama"]}"),
    ...
  )
)

Ketika tombol ditekan, muncul AlertDialog dengan gambar dan informasi anggota.

➤ Ucapan Terima Kasih

Terdapat tombol “Pencet ieu” di bagian bawah yang memunculkan dialog ucapan terima kasih:

showDialog(
  context: context,
  builder: (_) => AlertDialog(
    title: Text("Hatur Nuhun"),
    content: Text("Kelompok madep madodet"),
    ...
  )
)

---

🎨 StripedBackgroundPainter: Membuat Background Unik

Bagian ini adalah bonus visual. Menggunakan CustomPainter, developer menciptakan latar belakang garis diagonal merah muda:

canvas.drawLine(Offset(i, 0), Offset(i - size.height, size.height), paint);

Loop menggambar garis dari kiri atas ke kanan bawah.

---

🔚 Kesimpulan

Aplikasi “MADODET” ini sederhana namun sangat kaya dalam pembelajaran:

• Mengenal struktur dasar Flutter

• Menggunakan ListView.builder untuk menampilkan data dinamis

• Mengimplementasikan dialog interaktif

• Membuat latar belakang kustom dengan CustomPainter

Proyek seperti ini sangat cocok sebagai latihan awal belajar Flutter, sekaligus menunjukkan potensi kreatif dalam mengembangkan aplikasi berbasis data.

---

💡 Tips Pengembangan Selanjutnya

• Tambahkan animasi untuk transisi dialog

• Simpan data anggota dalam file JSON atau backend

• Buat tampilan responsif untuk berbagai ukuran layar

Semangat belajar Flutter! 🚀

---

Kalau kamu ingin saya bantu membuat file markdown atau HTML-nya untuk blog tersebut, tinggal bilang saja!