membuat halaman data kelompok

💻 Stateful Squad – Aplikasi Flutter Estetik untuk Data Kelompok di Zapp.run 🌿✨

“Coding may change states, but not friendships.” 💙
~ Stateful Squad

---

🧠 Tentang Proyek Ini

Hello, developer keren! 🙌
Dalam proyek ini, saya dan tim kami — Stateful Squad 💻 — membuat sebuah aplikasi Flutter sederhana namun estetis yang menampilkan data anggota kelompok dalam bentuk yang rapi dan interaktif.

Aplikasi ini kami bangun sepenuhnya di Zapp.run — platform coding online yang powerful dan cocok banget untuk belajar Flutter tanpa ribet install.

---

🎯 Tujuan Aplikasi

Aplikasi ini dibuat dengan beberapa fitur utama:

🔹 Menampilkan anggota kelompok dalam bentuk list
🔹 Setiap anggota memiliki:

• 🧑 Nama

• 🔢 Nomor Absen

• 🏡 Alamat

• 📷 Foto profil
  🔹 Terdapat tombol interaktif yang memunculkan popup ucapan "Hatur Nuhun"
  🔹 Desain UI yang bersih, elegan, dan kekinian

---

🧰 Tools yang Digunakan

🛠️ Alat	Fungsi
💻 Zapp.run	Coding Flutter secara online
🧩 Flutter	Framework UI aplikasi mobile & web
🖋️ Dart	Bahasa pemrograman utama
📁 Assets Folder	Tempat menyimpan gambar anggota

---

📁 Struktur Folder

lib/
 └── main.dart
assets/
 ├── ghaizan.jpg
 ├── melby.jpg
 ├── sandi.jpg
 └── faza.jpg

📌 Pastikan path gambarnya benar dan file-nya diunggah langsung ke folder assets/ di Zapp.run.

---

🧑‍💻 Kode Program Lengkap

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Stateful Squad',
      theme: ThemeData(
        primarySwatch: Colors.teal,
        fontFamily: 'Arial',
      ),
      home: KelompokPage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class KelompokPage extends StatelessWidget {
  final List<Map<String, String>> anggota = [
    {
      'nama': 'Ghaizan',
      'no_absen': '10',
      'alamat': 'Cibulan',
      'foto': 'assets/ghaizan.jpg',
    },
    {
      'nama': 'Melby',
      'no_absen': '18',
      'alamat': 'Langkap Lancar',
      'foto': 'assets/melby.jpg',
    },
    {
      'nama': 'Sandi',
      'no_absen': '31',
      'alamat': 'Sukarame',
      'foto': 'assets/sandi.jpg',
    },
    {
      'nama': 'Faza',
      'no_absen': '22',
      'alamat': 'Randegan',
      'foto': 'assets/faza.jpg',
    }
  ];

  void showHaturNuhun(BuildContext context) {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: Text("🎉 Terima Kasih!"),
        content: Text("Hatur nuhun sudah melihat data kami!\nSalam dari Stateful Squad 💻"),
        actions: [
          TextButton(
            onPressed: () => Navigator.of(context).pop(),
            child: Text("Tutup"),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[100],
      appBar: AppBar(
        title: Text("Stateful Squad 💻"),
        centerTitle: true,
        backgroundColor: Colors.teal[700],
      ),
      body: Column(
        children: [
          SizedBox(height: 16),
          Text(
            'The CodeCraft Team 💡',
            style: TextStyle(
              fontSize: 22,
              fontWeight: FontWeight.bold,
              color: Colors.teal[800],
              letterSpacing: 1,
            ),
          ),
          SizedBox(height: 4),
          Text(
            '“Coding may change states, but not friendships.” 💙',
            style: TextStyle(
              fontSize: 14,
              fontStyle: FontStyle.italic,
              color: Colors.grey[700],
            ),
          ),
          SizedBox(height: 12),
          Expanded(
            child: ListView.builder(
              itemCount: anggota.length,
              itemBuilder: (context, index) {
                var a = anggota[index];
                return Card(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(16),
                  ),
                  margin: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
                  elevation: 4,
                  child: ListTile(
                    contentPadding: EdgeInsets.all(12),
                    leading: ClipRRect(
                      borderRadius: BorderRadius.circular(40),
                      child: Image.asset(
                        a['foto']!,
                        width: 60,
                        height: 60,
                        fit: BoxFit.cover,
                      ),
                    ),
                    title: Text(
                      a['nama']!,
                      style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                    ),
                    subtitle: Padding(
                      padding: const EdgeInsets.only(top: 6),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text('No Absen: ${a['no_absen']}'),
                          Text('Alamat: ${a['alamat']}'),
                        ],
                      ),
                    ),
                  ),
                );
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 20),
            child: ElevatedButton.icon(
              onPressed: () => showHaturNuhun(context),
              icon: Icon(Icons.favorite),
              label: Text("Tampilkan Popup"),
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.teal,
                padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
                textStyle: TextStyle(fontSize: 16),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(30),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

---

🎨 Desain UI yang Estetik

Elemen UI	Desain Aesthetic 💅
🎨 Warna utama	teal, grey[100]
🧊 Card anggota	Rounded corner + shadow
🖼️ Gambar	Circular image pakai ClipRRect
🖋️ Font	Clean (default/Arial)
🧘 Spasi	EdgeInsets dan SizedBox agar tidak padat
💬 Emoji	Menambah kesan fun & ringan

---

📸 Tampilan Aplikasi (Deskripsi Visual)

• Header: AppBar dengan judul Stateful Squad 💻

• List anggota: Tampil dalam bentuk card modern dengan foto, nama, absen, dan alamat

• Tombol bawah: "Tampilkan Popup" dengan icon hati ❤️

• Popup dialog: Muncul dengan pesan "Hatur Nuhun!"

---

🧠 Apa yang Saya Pelajari

✅ Membuat layout dengan Column, ListView, dan Card
✅ Menampilkan gambar dari assets
✅ Membuat interaksi dengan AlertDialog
✅ Menata UI agar tampak bersih, modern, dan profesional
✅ Mengelola data kelompok dengan List<Map>

---

🪴 Rencana Pengembangan Selanjutnya

🚀 Berikut fitur lanjutan yang akan kami coba buat:

• 🔍 Fitur pencarian anggota

• 🌙 Dark Mode Toggle

• ➕ Form untuk tambah anggota baru

• 📱 Halaman profil anggota (detail screen)

• 🎬 Animasi transisi halaman

---

🙌 Penutup

Itu dia proyek kecil kami dari Stateful Squad 💻
Semoga aplikasi ini bisa jadi inspirasi buat kamu yang baru belajar Flutter atau ingin buat aplikasi kelompok yang estetik!

“State-nya bisa berubah...
Tapi squad-nya tetap solid.” 🔥

Jangan lupa dicoba juga langsung di zapp.run ya! 🧪

🚀 Coba deh lihat aplikasi Flutter buatan kelompok kami!
Desainnya aesthetic, fiturnya interaktif, dan pastinya dibuat penuh semangat 💻💖

Klik & lihat hasil kerja keras kami di sini 👇

https://z11k06g411l0.zapp.page/#/

---

#Flutter #ZappRun #StatefulSquad #BelajarFlutter #UIAesthetic #CodingTeam #NgodingBareng #KelompokBelajar