Project Flutter

 👀Selamat Melihat👀

🚀 Flutter Project: Halaman Data Kelompok "Stateful Squad" dengan Popup Interaktif 💬

Halo teman-teman developer! 👋
Kali ini aku mau sharing salah satu latihan Flutter yang aku buat saat belajar UI dasar. Proyek ini bertujuan membuat halaman data kelompok belajar dengan tampilan clean, foto anggota, dan tombol interaktif yang menampilkan popup.

Let’s dive in! 💡

---

🎯 Tujuan Proyek

Dengan menggunakan Flutter, aku membuat halaman yang berisi:

✨ Judul aplikasi & nama kelompok
🧑‍🤝‍🧑 List anggota lengkap dengan foto, nama, no absen, dan alamat
📩 Tombol di bagian bawah yang menampilkan popup bertuliskan "HATUR NUHUN" saat ditekan

---

🎨 Tampilan & Desain

• App bar diberi nama "The CodeCraft"

• Nama kelompok: "Stateful Squad"

• Warna app bar: abu gelap Color.fromARGB(255, 87, 96, 97)

• Desain list: clean & responsive, pakai Card dan ListTile

• Foto anggota dibulatkan pakai CircleAvatar

• Interaksi user: tombol popup dengan dialog

---

👨‍👩‍👧‍👦 Data Anggota Kelompok

Nama	No Absen	Alamat
Ghaizan	10	Cibulan
Melby	18	Langkap Lancar
Sandi	31	Sukarame
Faza	22	Randegan

📸 Semua foto disimpan di folder assets/, dan ditampilkan langsung di list.

---

🧾 Kode Lengkap main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: KelompokPage(),
    );
  }
}

class KelompokPage extends StatelessWidget {
  // Data Anggota Kelompok
  final List<Map<String, String>> anggota = [
    {
      'nama': 'JEJEN LOUNDRY',
      'no_absen': '10',
      'alamat': 'cibulan',
      'foto': 'assets/gaizan.jpeg',
    },
    {
      'nama': 'melby',
      'no_absen': '18',
      'alamat': 'langkap lancar',
      'foto': 'assets/melby.jpeg',
    },
    {
      'nama': 'sandi',
      'no_absen': '31',
      'alamat': 'sukarame',
      'foto': 'assets/sandi.jpeg',
    },
    {
      'nama': 'faza',
      'no_absen': '22',
      'alamat': 'randegan',
      'foto': 'assets/faza.jpeg',
    }
  ];

  // Fungsi untuk menampilkan Popup
  void showHaturNuhun(BuildContext context) {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: Text("kita ucapkan"),
        content: Text("HATUR NUHUN"),
        actions: [
          TextButton(
            onPressed: () {
              Navigator.of(context).pop();
            },
            child: Text("Tutup"),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("The CodeCraft"),
        centerTitle: true,
        backgroundColor: Color.fromARGB(255, 87, 96, 97),
      ),
      body: Column(
        children: [
          // Nama Kelompok
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Text(
              'Stateful Squad',
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
          ),

          // Daftar Anggota Kelompok
          Expanded(
            child: ListView.builder(
              itemCount: anggota.length,
              itemBuilder: (context, index) {
                var anggotaData = anggota[index];
                return Card(
                  margin: EdgeInsets.symmetric(vertical: 10, horizontal: 16),
                  child: ListTile(
                    leading: CircleAvatar(
                      radius: 30,
                      backgroundImage: AssetImage(anggotaData['foto']!),
                    ),
                    title: Text(anggotaData['nama']!),
                    subtitle: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text('No Absen: ${anggotaData['no_absen']}'),
                        Text('Alamat: ${anggotaData['alamat']}'),
                      ],
                    ),
                  ),
                );
              },
            ),
          ),

          // Tombol untuk Popup
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: ElevatedButton(
              onPressed: () => showHaturNuhun(context),
              child: Text('Tampilkan Popup'),
              style: ElevatedButton.styleFrom(
                padding: EdgeInsets.symmetric(vertical: 12, horizontal: 20),
                textStyle: TextStyle(fontSize: 18),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

---

📁 Struktur Folder

lib/
 └── main.dart
assets/
 ├── gaizan.jpeg
 ├── melby.jpeg
 ├── sandi.jpeg
 └── faza.jpeg

Tambahkan ini ke pubspec.yaml:

flutter:
  assets:
    - assets/

---

📌 Kesimpulan

Latihan ini membuat saya lebih memahami:

✅ Cara menampilkan list data di Flutter
✅ Menambahkan foto dari folder lokal
✅ Membuat UI dengan desain rapi & fungsional
✅ Interaksi pengguna dengan tombol dan dialog

Proyek seperti ini bisa jadi batu loncatan sebelum membuat aplikasi yang lebih kompleks seperti buku kontak, daftar siswa, atau profil tim.

---

💬 Penutup

Itu dia proyek kecil saya: halaman kelompok dengan nama keren Stateful Squad! 😄

Semoga contoh ini bermanfaat buat kamu yang juga sedang belajar Flutter. Jangan ragu untuk eksplorasi dan coba kembangkan fiturnya lebih lanjut.

"kita ucapkan HATUR NUHUN"
Terima kasih sudah membaca sampai akhir! 🙌💙

---

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

Tags:
#Flutter #UIUX #PemulaFlutter #BelajarNgoding #StatefulSquad #TheCodeCraft #MobileDev