Berikut contoh kode praktikum Flutter yang sederhana
(Boleh menggunakan code program ini, boleh juga cari referensi lain asal tentang Fitur: CRUD sederhana (Tambah, Edit, Hapus) + setState )
๐ Cocok untuk pembelajaran mandiri hari ini
๐ป ๐ฑ KODE PRAKTIKUM FLUTTER
๐ฏ Aplikasi: Jadwal Pelajaran Sederhana
✅ Sudah include:
Tambah data
Edit data
Hapus data
ListView
Dialog input
๐ LANGKAH AWAL
Buat project baru:
flutter create jadwal_app
Ganti isi file
lib/main.dartdengan kode berikut
๐งฉ KODE LENGKAP
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: JadwalPage(),
);
}
}
class JadwalPage extends StatefulWidget {
@override
_JadwalPageState createState() => _JadwalPageState();
}
class _JadwalPageState extends State<JadwalPage> {
List<String> jadwalList = [];
void tambahData(String data) {
setState(() {
jadwalList.add(data);
});
}
void editData(int index, String dataBaru) {
setState(() {
jadwalList[index] = dataBaru;
});
}
void hapusData(int index) {
setState(() {
jadwalList.removeAt(index);
});
}
void tampilDialog({String? dataLama, int? index}) {
TextEditingController controller =
TextEditingController(text: dataLama ?? "");
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text(dataLama == null ? "Tambah Jadwal" : "Edit Jadwal"),
content: TextField(
controller: controller,
decoration: InputDecoration(
hintText: "Contoh: Matematika - Senin",
),
),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: Text("Batal"),
),
ElevatedButton(
onPressed: () {
if (controller.text.isNotEmpty) {
if (dataLama == null) {
tambahData(controller.text);
} else {
editData(index!, controller.text);
}
}
Navigator.pop(context);
},
child: Text("Simpan"),
),
],
);
},
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Jadwal Pelajaran"),
centerTitle: true,
),
body: jadwalList.isEmpty
? Center(child: Text("Belum ada jadwal"))
: ListView.builder(
itemCount: jadwalList.length,
itemBuilder: (context, index) {
return Card(
margin: EdgeInsets.all(8),
child: ListTile(
title: Text(jadwalList[index]),
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
icon: Icon(Icons.edit, color: Colors.blue),
onPressed: () => tampilDialog(
dataLama: jadwalList[index],
index: index,
),
),
IconButton(
icon: Icon(Icons.delete, color: Colors.red),
onPressed: () => hapusData(index),
),
],
),
),
);
},
),
floatingActionButton: FloatingActionButton(
onPressed: () => tampilDialog(),
child: Icon(Icons.add),
),
);
}
}
๐ฏ TARGET PRAKTIKUM SISWA
Setelah pakai kode ini, siswa diminta:
✅ Level Wajib
Jalankan aplikasi
Tambah data
Edit data
Hapus data
๐ Level Pengembangan (Opsional)
Suruh siswa modifikasi:
Tambah hari & jam
Senin - Matematika - 08:00Tambah warna berbeda tiap item
Tambah konfirmasi sebelum hapus
๐งช TUGAS PRAKTIKUM
๐ Kirim ke siswa:
Tugas Praktikum Flutter:
Jalankan aplikasi yang diberikan
Pastikan fitur berikut berjalan:
Tambah jadwal
Edit jadwal
Hapus jadwal
Modifikasi:
Tambahkan keterangan hari & jam
Percantik tampilan
Screenshot hasil:
Tampilan utama
Saat tambah data
Saat edit
Upload ke Google Drive
๐ก CATATAN
Kode ini sengaja:
Tidak terlalu kompleks ✅
Mudah dimodifikasi ✅
Minim error untuk pemula ✅
๐ Rencana Level Berikutnya
Saran Pengembangan:
✅ Versi pakai database (Hive / SQLite)
✅ Versi pakai Provider (lebih profesional)
✅ Versi sudah dipisah folder (clean code)
Salam, Redaksi.







Tidak ada komentar:
Posting Komentar