Selamat datang di blog pribadi saya, tempat saya berbagi hasil karya, pengalaman belajar, dan perjalanan dalam dunia pemrograman.
Pada kesempatan kali ini, saya ingin memperkenalkan salah satu proyek yang saya buat, yaitu Aplikasi Data Siswa menggunakan Flutter.
Proyek ini menjadi salah satu langkah saya untuk mengembangkan kemampuan dalam bidang teknologi, khususnya pengembangan aplikasi. Melalui proyek ini, saya mencoba menerapkan ilmu yang telah dipelajari ke dalam sebuah karya digital yang sederhana, menarik, dan bermanfaat.
Bagi saya, pemrograman bukan hanya tentang menyusun barisan kode, tetapi juga tentang melatih logika, menyelesaikan masalah, dan mengubah ide menjadi sesuatu yang nyata.
Aplikasi Data Siswa merupakan aplikasi sederhana yang dirancang untuk menampilkan informasi siswa secara terstruktur dan mudah dipahami.
Aplikasi ini dikembangkan menggunakan Flutter dengan bahasa pemrograman Dart. Tampilan dibuat dengan konsep minimalis agar terlihat modern, rapi, dan nyaman digunakan.
Proyek ini masih dapat dikembangkan lebih lanjut dengan menambahkan berbagai fitur, seperti menambah data, mengedit informasi, menghapus data, dan menyimpan data menggunakan basis data.
Setelah melalui proses penulisan kode dan pengembangan, aplikasi ini menghasilkan tampilan yang menampilkan informasi siswa dalam susunan yang rapi dan mudah dibaca.
Melalui proyek ini, saya belajar bahwa tampilan yang baik harus didukung oleh struktur program yang jelas. Keduanya menjadi bagian penting dalam membangun aplikasi yang nyaman digunakan.
Dalam proses pembuatan aplikasi ini, saya menggunakan beberapa teknologi berikut:
Kerangka kerja untuk membangun tampilan dan mengembangkan aplikasi.
Bahasa pemrograman yang digunakan untuk menulis kode aplikasi Flutter.
Perangkat lunak yang digunakan untuk menulis dan mengelola kode program.
Digunakan untuk menjalankan aplikasi dan melihat hasilnya selama proses pengembangan.
Dengan memanfaatkan teknologi tersebut, saya dapat mempelajari proses pembuatan aplikasi dari tahap penulisan kode hingga pengujian hasilnya.
Bagi teman-teman yang ingin mempelajari proses pembuatan aplikasi ini, saya juga membagikan kode program yang digunakan.
Kode program disertakan sebagai bahan pembelajaran agar pengunjung dapat memahami struktur aplikasi Flutter dan mencoba mengembangkannya sesuai kebutuhan.
import 'package:flutter/material.dart';
void main() {
runApp(const StudentDataApp());
}
class StudentDataApp extends StatelessWidget {
const StudentDataApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'StudentData App',
theme: ThemeData(
useMaterial3: true,
colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xFF4F46E5)),
scaffoldBackgroundColor: const Color(0xFFF5F7FB),
appBarTheme: const AppBarTheme(
backgroundColor: Colors.white,
foregroundColor: Color(0xFF1E293B),
elevation: 0,
centerTitle: false,
),
inputDecorationTheme: InputDecorationTheme(
filled: true,
fillColor: const Color(0xFFF8FAFC),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(14),
borderSide: BorderSide.none,
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(14),
borderSide: const BorderSide(color: Color(0xFFE2E8F0)),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(14),
borderSide: const BorderSide(color: Color(0xFF4F46E5), width: 1.5),
),
),
),
home: const StudentHomePage(),
);
}
}
// MODEL DATA SISWA
class Student {
String name;
String nis;
String studentClass;
String gender;
String major;
String address;
Student({
required this.name,
required this.nis,
required this.studentClass,
required this.gender,
required this.major,
required this.address,
});
}
// HALAMAN UTAMA
class StudentHomePage extends StatefulWidget {
const StudentHomePage({super.key});
@override
State<StudentHomePage> createState() => _StudentHomePageState();
}
class _StudentHomePageState extends State<StudentHomePage> {
final List<Student> students = [
Student(
name: 'Andi Saputra',
nis: '2026001',
studentClass: 'X RPL 1',
gender: 'Laki-laki',
major: 'Rekayasa Perangkat Lunak',
address: 'Banjar, Jawa Barat',
),
Student(
name: 'Siti Nurhaliza',
nis: '2026002',
studentClass: 'X RPL 1',
gender: 'Perempuan',
major: 'Rekayasa Perangkat Lunak',
address: 'Pataruman, Banjar',
),
Student(
name: 'Budi Firmansyah',
nis: '2026003',
studentClass: 'X RPL 2',
gender: 'Laki-laki',
major: 'Rekayasa Perangkat Lunak',
address: 'Ciamis, Jawa Barat',
),
];
final TextEditingController searchController = TextEditingController();
String searchQuery = '';
List<Student> get filteredStudents {
return students.where((student) {
return student.name.toLowerCase().contains(searchQuery.toLowerCase()) ||
student.nis.toLowerCase().contains(searchQuery.toLowerCase());
}).toList();
}
@override
void dispose() {
searchController.dispose();
super.dispose();
}
// FORM TAMBAH DAN EDIT SISWA
Future<void> showStudentForm({Student? student}) async {
final formKey = GlobalKey<FormState>();
final nameController = TextEditingController(text: student?.name ?? '');
final nisController = TextEditingController(text: student?.nis ?? '');
final classController = TextEditingController(
text: student?.studentClass ?? '',
);
final majorController = TextEditingController(text: student?.major ?? '');
final addressController = TextEditingController(
text: student?.address ?? '',
);
String gender = student?.gender ?? 'Laki-laki';
final isEditing = student != null;
await showDialog<void>(
context: context,
builder: (dialogContext) {
return StatefulBuilder(
builder: (context, setDialogState) {
return AlertDialog(
title: Text(
isEditing ? 'Edit Data Siswa' : 'Tambah Siswa',
style: const TextStyle(fontWeight: FontWeight.bold),
),
content: SizedBox(
width: 420,
child: SingleChildScrollView(
child: Form(
key: formKey,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
_buildFormField(
controller: nameController,
label: 'Nama Lengkap',
icon: Icons.person_outline,
),
const SizedBox(height: 14),
_buildFormField(
controller: nisController,
label: 'NIS',
icon: Icons.badge_outlined,
),
const SizedBox(height: 14),
_buildFormField(
controller: classController,
label: 'Kelas',
icon: Icons.school_outlined,
),
const SizedBox(height: 14),
DropdownButtonFormField<String>(
value: gender,
decoration: const InputDecoration(
labelText: 'Jenis Kelamin',
prefixIcon: Icon(Icons.people_outline),
),
items: const [
DropdownMenuItem(
value: 'Laki-laki',
child: Text('Laki-laki'),
),
DropdownMenuItem(
value: 'Perempuan',
child: Text('Perempuan'),
),
],
onChanged: (value) {
if (value != null) {
setDialogState(() {
gender = value;
});
}
},
),
const SizedBox(height: 14),
_buildFormField(
controller: majorController,
label: 'Jurusan',
icon: Icons.computer_outlined,
),
const SizedBox(height: 14),
_buildFormField(
controller: addressController,
label: 'Alamat',
icon: Icons.location_on_outlined,
maxLines: 2,
),
],
),
),
),
),
actions: [
TextButton(
onPressed: () {
Navigator.pop(dialogContext);
},
child: const Text('Batal'),
),
FilledButton.icon(
onPressed: () {
if (!formKey.currentState!.validate()) {
return;
}
final newNis = nisController.text.trim();
final duplicateNis = students.any((item) {
return item.nis == newNis && !identical(item, student);
});
if (duplicateNis) {
ScaffoldMessenger.of(this.context)
..hideCurrentSnackBar()
..showSnackBar(
const SnackBar(
content: Text('NIS sudah digunakan siswa lain.'),
),
);
return;
}
setState(() {
if (isEditing) {
student.name = nameController.text.trim();
student.nis = newNis;
student.studentClass = classController.text.trim();
student.gender = gender;
student.major = majorController.text.trim();
student.address = addressController.text.trim();
} else {
students.add(
Student(
name: nameController.text.trim(),
nis: newNis,
studentClass: classController.text.trim(),
gender: gender,
major: majorController.text.trim(),
address: addressController.text.trim(),
),
);
}
});
Navigator.pop(dialogContext);
ScaffoldMessenger.of(this.context).showSnackBar(
SnackBar(
content: Text(
isEditing
? 'Data siswa berhasil diperbarui.'
: 'Siswa berhasil ditambahkan.',
),
),
);
},
icon: Icon(isEditing ? Icons.save_outlined : Icons.add),
label: Text(isEditing ? 'Simpan' : 'Tambah'),
),
],
);
},
);
},
);
nameController.dispose();
nisController.dispose();
classController.dispose();
majorController.dispose();
addressController.dispose();
}
Widget _buildFormField({
required TextEditingController controller,
required String label,
required IconData icon,
int maxLines = 1,
}) {
return TextFormField(
controller: controller,
maxLines: maxLines,
decoration: InputDecoration(
labelText: label,
prefixIcon: Icon(icon),
alignLabelWithHint: maxLines > 1,
),
validator: (value) {
if (value == null || value.trim().isEmpty) {
return '$label wajib diisi';
}
return null;
},
);
}
// KONFIRMASI HAPUS DATA
Future<void> deleteStudent(Student student) async {
final confirmed = await showDialog<bool>(
context: context,
builder: (dialogContext) {
return AlertDialog(
title: const Text('Hapus Data Siswa'),
content: Text('Apakah kamu yakin ingin menghapus ${student.name}?'),
actions: [
TextButton(
onPressed: () {
Navigator.pop(dialogContext, false);
},
child: const Text('Batal'),
),
FilledButton(
style: FilledButton.styleFrom(backgroundColor: Colors.red),
onPressed: () {
Navigator.pop(dialogContext, true);
},
child: const Text('Hapus'),
),
],
);
},
);
if (confirmed == true && mounted) {
setState(() {
students.remove(student);
});
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Data siswa berhasil dihapus.')),
);
}
}
// TAMPILAN UTAMA
@override
Widget build(BuildContext context) {
final displayedStudents = filteredStudents;
return Scaffold(
appBar: AppBar(
title: const Row(
children: [
Icon(Icons.school_rounded, color: Color(0xFF4F46E5), size: 30),
SizedBox(width: 10),
Text(
'StudentData',
style: TextStyle(
fontWeight: FontWeight.bold,
letterSpacing: -0.5,
),
),
],
),
actions: [
Padding(
padding: const EdgeInsets.only(right: 16),
child: CircleAvatar(
backgroundColor: const Color(0xFFEEF2FF),
child: const Icon(Icons.person, color: Color(0xFF4F46E5)),
),
),
],
),
floatingActionButton: FloatingActionButton.extended(
onPressed: () => showStudentForm(),
icon: const Icon(Icons.add),
label: const Text('Tambah Siswa'),
),
body: SafeArea(
child: ListView(
padding: const EdgeInsets.all(20),
children: [
// HEADER
const Text(
'Dashboard Siswa',
style: TextStyle(
fontSize: 27,
fontWeight: FontWeight.bold,
color: Color(0xFF1E293B),
letterSpacing: -0.8,
),
),
const SizedBox(height: 8),
const Text(
'Kelola data siswa dengan mudah dan praktis.',
style: TextStyle(fontSize: 14, color: Color(0xFF64748B)),
),
const SizedBox(height: 24),
// KARTU STATISTIK
LayoutBuilder(
builder: (context, constraints) {
final isWide = constraints.maxWidth >= 520;
final cardWidth = isWide
? (constraints.maxWidth - 24) / 3
: (constraints.maxWidth - 12) / 2;
return Wrap(
spacing: 12,
runSpacing: 12,
children: [
SizedBox(
width: cardWidth,
child: _buildStatCard(
title: 'Total Siswa',
value: students.length.toString(),
icon: Icons.groups_rounded,
color: const Color(0xFF4F46E5),
),
),
SizedBox(
width: cardWidth,
child: _buildStatCard(
title: 'Laki-laki',
value: students
.where((s) => s.gender == 'Laki-laki')
.length
.toString(),
icon: Icons.male_rounded,
color: const Color(0xFF0284C7),
),
),
SizedBox(
width: cardWidth,
child: _buildStatCard(
title: 'Perempuan',
value: students
.where((s) => s.gender == 'Perempuan')
.length
.toString(),
icon: Icons.female_rounded,
color: const Color(0xFFDB2777),
),
),
],
);
},
),
const SizedBox(height: 28),
// JUDUL DAFTAR SISWA
const Text(
'Daftar Siswa',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Color(0xFF1E293B),
),
),
const SizedBox(height: 16),
// PENCARIAN
TextField(
controller: searchController,
onChanged: (value) {
setState(() {
searchQuery = value;
});
},
decoration: const InputDecoration(
hintText: 'Cari nama atau NIS siswa...',
prefixIcon: Icon(Icons.search),
),
),
const SizedBox(height: 18),
// DAFTAR SISWA
if (displayedStudents.isEmpty)
Container(
padding: const EdgeInsets.all(30),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
),
child: const Column(
children: [
Icon(
Icons.person_search_rounded,
size: 55,
color: Color(0xFF94A3B8),
),
SizedBox(height: 12),
Text(
'Data siswa tidak ditemukan',
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 16,
),
),
SizedBox(height: 6),
Text(
'Coba gunakan kata kunci lain.',
style: TextStyle(color: Color(0xFF64748B)),
),
],
),
)
else
...displayedStudents.map((student) => _buildStudentCard(student)),
const SizedBox(height: 80),
],
),
),
);
}
// KARTU STATISTIK
Widget _buildStatCard({
required String title,
required String value,
required IconData icon,
required Color color,
}) {
return Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
border: Border.all(color: const Color(0xFFEFF2F7)),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.025),
blurRadius: 14,
offset: const Offset(0, 5),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 42,
height: 42,
decoration: BoxDecoration(
color: color.withValues(alpha: 0.10),
borderRadius: BorderRadius.circular(13),
),
child: Icon(icon, color: color, size: 24),
),
const SizedBox(height: 18),
Text(
value,
style: const TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
color: Color(0xFF1E293B),
),
),
const SizedBox(height: 4),
Text(
title,
style: const TextStyle(fontSize: 13, color: Color(0xFF64748B)),
),
],
),
);
}
// KARTU DATA SISWA
Widget _buildStudentCard(Student student) {
final isMale = student.gender == 'Laki-laki';
return Container(
margin: const EdgeInsets.only(bottom: 12),
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
border: Border.all(color: const Color(0xFFEFF2F7)),
),
child: Column(
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
CircleAvatar(
radius: 25,
backgroundColor: isMale
? const Color(0xFFDBEAFE)
: const Color(0xFFFCE7F3),
child: Icon(
Icons.person_rounded,
color: isMale
? const Color(0xFF2563EB)
: const Color(0xFFDB2777),
size: 28,
),
),
const SizedBox(width: 14),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
student.name,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Color(0xFF1E293B),
),
),
const SizedBox(height: 5),
Text(
'NIS: ${student.nis}',
style: const TextStyle(
fontSize: 13,
color: Color(0xFF64748B),
),
),
const SizedBox(height: 8),
Container(
padding: const EdgeInsets.symmetric(
horizontal: 10,
vertical: 5,
),
decoration: BoxDecoration(
color: const Color(0xFFEEF2FF),
borderRadius: BorderRadius.circular(8),
),
child: Text(
student.studentClass,
style: const TextStyle(
color: Color(0xFF4F46E5),
fontSize: 12,
fontWeight: FontWeight.w600,
),
),
),
],
),
),
PopupMenuButton<String>(
tooltip: 'Pilihan',
onSelected: (value) {
if (value == 'edit') {
showStudentForm(student: student);
} else if (value == 'delete') {
deleteStudent(student);
}
},
itemBuilder: (context) => const [
PopupMenuItem(
value: 'edit',
child: Row(
children: [
Icon(Icons.edit_outlined),
SizedBox(width: 10),
Text('Edit'),
],
),
),
PopupMenuItem(
value: 'delete',
child: Row(
children: [
Icon(Icons.delete_outline, color: Colors.red),
SizedBox(width: 10),
Text('Hapus'),
],
),
),
],
),
],
),
const Divider(height: 26),
_buildInfoRow(Icons.school_outlined, 'Jurusan', student.major),
const SizedBox(height: 10),
_buildInfoRow(Icons.people_outline, 'Jenis Kelamin', student.gender),
const SizedBox(height: 10),
_buildInfoRow(Icons.location_on_outlined, 'Alamat', student.address),
],
),
);
}
Widget _buildInfoRow(IconData icon, String label, String value) {
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(icon, size: 18, color: const Color(0xFF64748B)),
const SizedBox(width: 9),
SizedBox(
width: 100,
child: Text(
label,
style: const TextStyle(fontSize: 12, color: Color(0xFF64748B)),
),
),
const SizedBox(width: 8),
Expanded(
child: Text(
value,
style: const TextStyle(
fontSize: 12,
color: Color(0xFF334155),
fontWeight: FontWeight.w500,
),
),
),
],
);
}
}
Kode tersebut dapat dipelajari untuk memahami cara membuat tampilan aplikasi, menampilkan daftar siswa, dan menyusun informasi menggunakan komponen Flutter.
Bagi yang sedang belajar pemrograman, jangan ragu untuk mencoba dan bereksperimen. Pahami setiap bagian kode agar tidak hanya bisa menjalankannya, tetapi juga mengerti cara kerjanya.
Dalam membuat aplikasi, saya menyadari bahwa proses belajar pemrograman membutuhkan ketelitian, kesabaran, dan kemauan untuk terus berkembang.
Ketika menemukan kesalahan, saya belajar untuk memeriksa kode, memahami penyebabnya, dan mencari solusi yang tepat.
Dari proses tersebut, saya memahami bahwa kemampuan tidak hanya diperoleh dari keberhasilan, tetapi juga dari usaha memperbaiki kesalahan.
Saya ingin terus mengembangkan kemampuan di bidang pemrograman dan menciptakan lebih banyak proyek yang bermanfaat.
Bagi saya, menjadi seorang pengembang bukan hanya tentang seberapa banyak kode yang dapat ditulis, tetapi juga tentang seberapa baik kita memahami masalah dan menemukan solusinya.
Proyek ini merupakan salah satu langkah awal dalam perjalanan saya mempelajari dunia teknologi.
Ke depannya, saya ingin mengembangkan aplikasi dengan fitur yang lebih lengkap, tampilan yang lebih menarik, dan sistem pengelolaan data yang lebih baik.
Saya juga ingin terus mempelajari berbagai teknologi baru agar dapat meningkatkan kemampuan dan menghasilkan karya yang lebih berkualitas.
Karena bagi saya, belajar pemrograman adalah proses yang tidak berhenti ketika sebuah aplikasi selesai dibuat.
Justru, setiap proyek yang selesai menjadi awal untuk mencoba sesuatu yang lebih baik.
Terima kasih telah mengunjungi blog saya dan melihat hasil proyek yang saya bagikan.
Semoga proyek sederhana ini dapat memberikan manfaat dan menjadi referensi bagi teman-teman yang ingin belajar membuat aplikasi menggunakan Flutter.
Saya percaya bahwa setiap orang memiliki kesempatan untuk berkembang selama mau belajar, berusaha, dan tidak takut menghadapi tantangan.
Tidak harus langsung hebat untuk mulai berkarya. Cukup mulai dari hal sederhana, pahami prosesnya, dan terus tingkatkan kemampuan.
Terus belajar, terus berkembang, dan terus ciptakan karya. 🚀
.png)
Komentar
Posting Komentar