Membuat halaman Data Kelompok Belajar Zapp.run Isa

Membuat Halaman Data Kelompok Belajar dengan Flutter di Zapp.run

Flutter adalah framework yang sangat populer untuk membuat aplikasi mobile cross-platform (Android & iOS). Kali ini kita akan belajar membuat satu halaman aplikasi yang menampilkan data kelompok belajar dengan foto anggota, detail informasi (nama, no absen, alamat, kelas, hobi), serta tombol di bagian bawah yang memunculkan popup sederhana.

Struktur Halaman yang Akan Dibuat

1. Bagian atas → Judul "Wededen Squad".

2. Bagian isi → Daftar anggota kelompok dengan foto, nama, no absen, alamat. Jika salah satu anggota ditekan, akan terbuka halaman detail berisi informasi lebih lengkap.

3. Bagian bawah → Tombol "Awas Meledug". Jika ditekan, akan muncul popup dengan pesan salam.

Persiapan di Zapp.run

1. Masuk ke Zapp.run.

2. Buat project Flutter baru.

3. Simpan foto anggota kelompok di folder assets/ pada project.

4. Tambahkan path assets di file pubspec.yaml. Contoh:

   flutter:
     assets:
       - assets/Azka.jpg
       - assets/Isa.jpg
       - assets/RianR.jpg
       - assets/Dara.jpg
       - assets/Yuni.jpg
   

Full Kode main.dart

Berikut adalah kode lengkap main.dart yang bisa langsung dijalankan di Zapp.run:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Kelompok Belajar',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const KelompokPage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class KelompokPage extends StatelessWidget {
  const KelompokPage({super.key});

  final List<Map<String, String>> anggota = const [
    {
      "nama": "Azka Yaqiz",
      "absen": "02",
      "alamat": "Cimaragas",
      "kelas": "XI RPL 1",
      "hobi": "Jogging",
      "foto": "assets/Azka.jpg",
    },
    {
      "nama": "Isa",
      "absen": "13",
      "alamat": "Lembur balong",
      "kelas": "XI RPL 1",
      "hobi": "Play game",
      "foto": "assets/Isa.jpg",
    },
    {
      "nama": "Rian Rama R",
      "absen": "26",
      "alamat": "Cisaga",
      "kelas": "XI RPL 1",
      "hobi": "Bernyanyi",
      "foto": "assets/RianR.jpg",
    },
    {
      "nama": "Dara Tri Y",
      "absen": "04",
      "alamat": "Jajawar",
      "kelas": "XI RPL 1",
      "hobi": "Badminton",
      "foto": "assets/Dara.jpg",
    },
    {
      "nama": "Yuniyasih",
      "absen": "34",
      "alamat": "Sumanding",
      "kelas": "XI RPL 1",
      "hobi": "Ngoding",
      "foto": "assets/Yuni.jpg",
    },
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Wededen Squad"),
        centerTitle: true,
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: anggota.length,
              itemBuilder: (context, index) {
                final item = anggota[index];
                return GestureDetector(
                  onTap: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (_) => DetailPage(data: item),
                      ),
                    );
                  },
                  child: Container(
                    margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                        colors: [Colors.blue.shade100, Colors.white],
                        begin: Alignment.topLeft,
                        end: Alignment.bottomRight,
                      ),
                      borderRadius: BorderRadius.circular(20),
                      boxShadow: [
                        BoxShadow(
                          color: Colors.grey.withOpacity(0.3),
                          blurRadius: 6,
                          offset: const Offset(2, 4),
                        ),
                      ],
                    ),
                    child: ListTile(
                      contentPadding: const EdgeInsets.all(16),
                      leading: Hero(
                        tag: item["nama"]!,
                        child: CircleAvatar(
                          radius: 30,
                          backgroundImage: AssetImage(item["foto"]!),
                        ),
                      ),
                      title: Text(
                        "${item["nama"]} (No. ${item["absen"]})",
                        style: const TextStyle(fontWeight: FontWeight.bold),
                      ),
                      subtitle: Row(
                        children: [
                          const Icon(Icons.location_on, size: 16, color: Colors.grey),
                          const SizedBox(width: 4),
                          Text(item["alamat"]!),
                        ],
                      ),
                      trailing: const Icon(Icons.arrow_forward_ios, size: 16),
                    ),
                  ),
                );
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: SizedBox(
              width: double.infinity,
              child: ElevatedButton(
                onPressed: () {
                  showDialog(
                    context: context,
                    builder: (context) => AlertDialog(
                      title: const Text("Salam"),
                      content: const Text("Wededen"),
                      actions: [
                        TextButton(
                          onPressed: () => Navigator.pop(context),
                          child: const Text("OK"),
                        )
                      ],
                    ),
                  );
                },
                child: const Text("Awas Meledug"),
              ),
            ),
          )
        ],
      ),
    );
  }
}

class DetailPage extends StatelessWidget {
  final Map<String, String> data;

  const DetailPage({super.key, required this.data});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(data["nama"]!),
      ),
      body: Container(
        width: double.infinity,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [Colors.blue.shade50, Colors.white],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
          ),
        ),
        padding: const EdgeInsets.all(24),
        child: Column(
          children: [
            Hero(
              tag: data["nama"]!,
              child: CircleAvatar(
                radius: 60,
                backgroundImage: AssetImage(data["foto"]!),
              ),
            ),
            const SizedBox(height: 20),
            Text(
              data["nama"]!,
              style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 8),
            Text("Absen: ${data["absen"]}"),
            const Divider(height: 32),
            ListTile(
              leading: const Icon(Icons.class_),
              title: const Text("Kelas"),
              subtitle: Text(data["kelas"]!),
            ),
            ListTile(
              leading: const Icon(Icons.sports_esports),
              title: const Text("Hobi"),
              subtitle: Text(data["hobi"]!),
            ),
            ListTile(
              leading: const Icon(Icons.home),
              title: const Text("Alamat"),
              subtitle: Text(data["alamat"]!),
            ),
          ],
        ),
      ),
    );
  }
}

Hasil Tampilan

• Daftar anggota tampil dalam card bergaya gradient dengan foto profil bulat.

• Jika ditekan, akan terbuka halaman DetailPage berisi informasi lebih lengkap (kelas, hobi, alamat).

• Tombol "Awas Meledug" di bawah layar akan menampilkan popup dengan pesan salam.

Penutup

Dengan kode ini, kita sudah bisa membuat aplikasi Flutter sederhana untuk menampilkan data kelompok belajar dengan fitur halaman detail. Kalian bisa mengembangkan lebih lanjut, misalnya menambahkan animasi, warna tema berbeda, atau menambah anggota kelompok baru.