Belajar Membuat Aplikasi Data Kelompok dengan Dart Flutter di Zapp.run

Saat belajar pemrograman mobile dengan Dart Flutter, salah satu latihan menarik adalah membuat tampilan aplikasi sederhana yang menampilkan data sebuah kelompok belajar. Dengan memanfaatkan platform zapp.run, kita bisa langsung mencoba kode Flutter tanpa perlu instalasi IDE yang rumit.

Tujuan Latihan

Dalam latihan ini, saya ingin membuat sebuah aplikasi satu halaman (one page app) dengan fitur:

1. Bagian atas menampilkan judul "Nama Kelompok".

2. Bagian tengah menampilkan daftar anggota kelompok berupa foto, nama, nomor absen, dan alamat.

3. Bagian bawah terdapat tombol, dan ketika ditekan akan muncul popup berisi pesan "Terima Kasih".

Latihan ini sederhana, tetapi melatih pemahaman dasar tentang layout, list, image, card, button, dan dialog popup di Flutter.

Kode Lengkap main.dart

Berikut kode lengkap yang saya tuliskan di main.dart:

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Data Kelompok Belajar',
      debugShowCheckedModeBanner: false,
      home: const KelompokPage(),
    );
  }
}

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

  // Contoh data anggota
  final List<Map<String, String>> anggota = const [
    {
      "nama": "Andi",
      "absen": "01",
      "alamat": "Jl. Merdeka No. 10",
      "foto": "assets/andi.png",
    },
    {
      "nama": "Budi",
      "absen": "02",
      "alamat": "Jl. Mawar No. 5",
      "foto": "assets/budi.png",
    },
    {
      "nama": "Citra",
      "absen": "03",
      "alamat": "Jl. Melati No. 7",
      "foto": "assets/citra.png",
    },
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Nama Kelompok"),
        centerTitle: true,
        backgroundColor: Colors.teal,
      ),
      body: Column(
        children: [
          const SizedBox(height: 10),
          Expanded(
            child: ListView.builder(
              itemCount: anggota.length,
              itemBuilder: (context, index) {
                final item = anggota[index];
                return Card(
                  margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(12),
                  ),
                  elevation: 3,
                  child: ListTile(
                    leading: CircleAvatar(
                      radius: 28,
                      backgroundImage: AssetImage(item["foto"]!),
                    ),
                    title: Text(
                      "${item['nama']} (Absen: ${item['absen']})",
                      style: const TextStyle(fontWeight: FontWeight.bold),
                    ),
                    subtitle: Text(item["alamat"]!),
                  ),
                );
              },
            ),
          ),
          const SizedBox(height: 10),
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: ElevatedButton(
              style: ElevatedButton.styleFrom(
                minimumSize: const Size(double.infinity, 50),
                backgroundColor: Colors.teal,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(12),
                ),
              ),
              onPressed: () {
                showDialog(
                  context: context,
                  builder: (context) => AlertDialog(
                    title: const Text("Pesan"),
                    content: const Text("Terima Kasih!"),
                    actions: [
                      TextButton(
                        onPressed: () => Navigator.pop(context),
                        child: const Text("OK"),
                      ),
                    ],
                  ),
                );
              },
              child: const Text(
                "Tampilkan Pesan",
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
            ),
          )
        ],
      ),
    );
  }
}

Menambahkan Gambar ke Aplikasi

Agar foto anggota kelompok bisa tampil, langkahnya:

1. Buat folder assets/ di project Flutter.

2. Simpan foto anggota (misalnya andi.png, budi.png, citra.png) di dalam folder tersebut.

3. Edit file pubspec.yaml, lalu tambahkan:

   flutter:
     assets:
       - assets/andi.png
       - assets/budi.png
       - assets/citra.png
   

Dengan begitu, Flutter akan mengenali file gambar yang kita simpan.

Hasil Akhir

• Tampilan bagian atas menampilkan judul kelompok.

• Bagian tengah berupa list anggota dengan foto, nama, absen, dan alamat.

• Bagian bawah ada tombol yang ketika ditekan akan memunculkan popup pesan terimakasih.

Latihan sederhana ini membantu saya memahami dasar-dasar UI di Flutter, serta bagaimana menghubungkan data dengan tampilan. Ke depannya, latihan bisa dikembangkan menjadi aplikasi yang lebih kompleks, seperti menambahkan database, fitur pencarian anggota, atau bahkan menampilkan data dari server.

---

👉 Latihan ini bisa langsung dicoba di zapp.run, sehingga pemula tidak perlu repot menginstal Android Studio. Ikuti link ini untuk melihat demo yg sudah saya buat : https://ztpi0651tpj0.zapp.page/#/

---

Salam : Redaksi