Membuat Halaman Data PerKelompok
Belajar Flutter: Membuat Halaman Data Kelompok Belajar
M.Rizky
Desta
Fitra
Rianto
Halo teman-teman! 👋
Beberapa waktu lalu saya sedang belajar Dart & Flutter dan mencoba membuat sebuah project sederhana. Tujuannya adalah menampilkan data kelompok belajar di dalam 1 halaman aplikasi.
Project ini sangat cocok untuk pemula yang ingin berlatih layout, menampilkan data, dan membuat popup dialog di Flutter.
Konsep Halaman yang Dibuat
Struktur halaman yang saya rancang sebagai berikut:
Bagian atas → Nama kelompok.
Di bawahnya → Foto kelompok secara keseluruhan.
Selanjutnya → Daftar anggota (berisi foto, nama, nomor absen, dan alamat).
Di bagian bawah → Tombol yang bila ditekan akan memunculkan popup dialog berisi rincian anggota kelompok:
Nama lengkap
Nama kelompok
Nomor absen
Alamat rumah
Kode Program Lengkap (main.dart)
Berikut kode lengkap yang saya tulis di main.dart menggunakan zapp.run.
Foto-foto anggota disimpan di folder assets/, jadi pastikan kamu menaruh gambar sesuai dengan path yang dipanggil.
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.grey),
home: const GroupPage(),
debugShowCheckedModeBanner: false,
);
}
}
class GroupPage extends StatelessWidget {
const GroupPage({super.key});
// Dummy data anggota kelompok
final List<Map<String, String>> anggota = const [
{
"nama": "M.Rizky Firmansyah",
"absen": "16",
"alamat": "Jl.Lobak,No.416",
"foto": "assets/AM.png"
},
{
"nama": "Desta Adila K",
"absen": "05",
"alamat": "Batukuya,Pamarican",
"foto": "assets/desta.png"
},
{
"nama": "Fitra Anzani",
"absen": "09",
"alamat": "Doboku,Pataruman",
"foto": "assets/fitra.png"
},
{
"nama": "Rianto",
"absen": "27",
"alamat": "Girimukti,Cisaga",
"foto": "assets/rianto.png"
},
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(""),
centerTitle: true,
),
body: Column(
children: [
const SizedBox(height: 16),
const Text(
"CODE4CREW",
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
const SizedBox(height: 16),
// Foto kelompok
Image.asset(
"assets/PM.png",
height: 180,
fit: BoxFit.cover,
),
const SizedBox(height: 16),
Expanded(
child: ListView.builder(
itemCount: anggota.length,
itemBuilder: (context, index) {
final data = anggota[index];
return Card(
margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
child: ListTile(
leading: CircleAvatar(
backgroundImage: AssetImage(data["foto"]!),
radius: 28,
),
title: Text("${data["nama"]} (No. ${data["absen"]})"),
subtitle: Text(data["alamat"]!),
trailing: ElevatedButton(
onPressed: () {
showDialog(
context: context,
builder: (_) => AlertDialog(
title: const Text("Rincian Anggota"),
content: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Nama Lengkap : ${data["nama"]}"),
Text("Nama Kelompok : Flutter Dev Squad"),
Text("No Absen : ${data["absen"]}"),
Text("Alamat : ${data["alamat"]}"),
],
),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: const Text("Tutup"),
),
],
),
);
},
child: const Text("Detail"),
),
),
);
},
),
),
],
),
);
}
}
flutter:
assets:
- assets/PM.png
- assets/AM.png
- assets/desta.png
- assets/fitra.png
- assets/rianto.png
Hasil yang Didapat
Dengan kode ini, kamu bisa melihat:
Judul halaman dengan nama kelompok.
Foto kelompok secara keseluruhan.
Daftar anggota dengan foto profil, nama, nomor absen, alamat singkat.
Tombol Detail untuk setiap anggota yang memunculkan popup dialog berisi data lengkap.
Penutup
Project kecil ini sangat membantu saya memahami dasar-dasar Flutter:
Cara membuat layout dengan Column dan ListView
Cara menampilkan gambar dari assets
Cara membuat interaksi dengan popup dialog (AlertDialog)
Semoga artikel ini bisa menjadi inspirasi buat teman-teman yang sedang belajar Flutter juga. Yuk, coba kembangkan ide ini agar lebih menarik, misalnya menambahkan fitur edit data anggota, ganti foto, atau bahkan simpan data ke database! 🚀
🔗 https://z2s4062e2s50.zapp.page/#/
Komentar
Posting Komentar