Membuat Halaman Data Kelompok Belajar dengan Flutter dan Dart
Judul:
Membuat Halaman Data Kelompok Belajar dengan Flutter dan Dart
Isi Artikel:
Flutter adalah framework open-source yang dikembangkan oleh Google untuk membuat aplikasi mobile, web, dan desktop dengan satu basis kode. Dalam artikel ini, saya akan berbagi contoh sederhana bagaimana membuat halaman data kelompok belajar menggunakan Flutter dan Dart.
📌 Fitur yang Dibuat
1. Bagian atas menampilkan nama kelompok.
2. Menampilkan foto anggota kelompok lengkap dengan data:
Nama
Nomor Absen
Alamat
kelas
hobby
no hp
3. Di bagian bawah terdapat sebuah tombol. Jika ditekan, akan muncul popup ucapan terima kasih.
Hasil yang Diharapkan
Dengan kode di atas, aplikasi akan menampilkan:
Nama kelompok di bagian atas.
Daftar anggota dengan foto dan data lengkap.
Tombol di bagian bawah yang menampilkan popup ucapan terima kasih.
contoh kode:
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": "Andika Ali",
"absen": "01",
"alamat": "Batulawang",
"kelas": "XI RPL 1",
"hobi": "Main game",
"nohp": "085314200681",
"foto": "assets/ali.jpg",
},
{
"nama": "Azzura",
"absen": "03",
"alamat": "Mulyasari",
"kelas": "XI RPL 1",
"hobi": "Menyanyi",
"nohp": "081211858212",
"foto": "assets/azzura.jpg",
},
{
"nama": "Revan",
"absen": "25",
"alamat": "Cisaga",
"kelas": "XI RPL 1",
"hobi": "Futsal",
"nohp": "0895391457512",
"foto": "assets/revan.jpg",
},
{
"nama": "Sifa",
"absen": "32",
"alamat": "Pintu Singa",
"kelas": "XI RPL 1",
"hobi": "Membaca",
"nohp": "087782238822",
"foto": "assets/sifa.jpg",
},
{
"nama": "Hacdik",
"absen": "12",
"alamat": "Pataruman",
"kelas": "XI RPL 1",
"hobi": "Ngoding",
"nohp": "08990735247",
"foto": "assets/hacdik.jpg",
},
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Sigma 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("THANKS"),
content: const Text("BAKEKOK"),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: const Text("OK"),
)
],
),
);
},
child: const Text("jangan di pencet"),
),
),
)
],
),
);
}
}
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"]!),
),
ListTile(
leading: const Icon(Icons.phone),
title: const Text("No HP"),
subtitle: Text(data["nohp"]!),
),
],
),
),
);
}
}
📌 Kesimpulan
Belajar Flutter bisa dimulai dari membuat project kecil seperti halaman data kelompok belajar ini. Selain melatih pemahaman tentang widget, project ini juga mengajarkan cara mengatur layout, menampilkan gambar dari assets, serta membuat dialog popup sederhana.
Komentar
Posting Komentar