Aplikasi Kantin Sekolah Digital: Mini Project Flutter untuk Transaksi Makanan di Sekolah

---

1. DESKRIPSI APLIKASI

Kantin Sekolah Digital adalah aplikasi mobile berbasis Flutter yang dirancang untuk mempermudah proses pemesanan makanan di lingkungan sekolah. Aplikasi ini menghubungkan siswa dengan kantin sekolah melalui sistem pemesanan digital yang efisien, transparan, dan praktis.

Aplikasi ini memungkinkan siswa untuk:

• Melihat daftar menu yang tersedia

• Memilih dan menyesuaikan jumlah pesanan

• Melakukan checkout secara digital

• Mengirim pesanan langsung ke WhatsApp admin kantin

2. TUJUAN PEMBUATAN APLIKASI

2.1 Tujuan Praktis

• Mengurangi antrian di kantin sekolah

• Mempercepat proses pemesanan makanan

• Meminimalisir kesalahan dalam pencatatan pesanan

• Memberikan pengalaman pemesanan yang modern dan efisien

2.2 Tujuan Edukasi
Sebagai proyek akhir semester, aplikasi ini bertujuan untuk:

• Menerapkan konsep pemrograman mobile menggunakan Dart dan Flutter

• Menguasai penggunaan widget-widget dasar Flutter

• Memahami manajemen state dalam aplikasi

• Mempelajari integrasi dengan aplikasi eksternal seperti WhatsApp

3. FITUR-FITUR APLIKASI

3.1 Halaman Daftar Menu

Aplikasi menampilkan berbagai menu kantin dengan informasi lengkap:

dart
List<Map<String, dynamic>> menuData = [
{
'id': 1,
'name': 'Mie Goreng Spesial',
'price': 15000,
'image': 'https://...',
'category': 'Mie',
'description': 'Mie goreng dengan telur dan sayuran segar',
'rating': 4.8,
'discount': 20,
'popular': true
},
];

Fitur halaman menu:

• Kategori menu (Semua, Mie, Minuman, Cemilan)

• Gambar menu dengan loading indicator

• Informasi harga dan diskon

• Tombol penambahan atau pengurangan jumlah

• Indikator menu populer

3.2 Sistem Keranjang Belanja

dart
void _addToOrder(Map<String, dynamic> item) {
_updateQuantity(item, 1);
}

void _removeFromOrder(Map<String, dynamic> item) {
_updateQuantity(item, -1);
}

3.3 Halaman Checkout
Halaman checkout menampilkan:

• Ringkasan pesanan lengkap

• Form data diri pemesan

• Perhitungan total otomatis

• Opsi catatan tambahan

3.4 Integrasi WhatsApp

dart
String _generateWhatsAppMessage() {
return '''
KANTIN SEKOLAH DIGITAL - PESANAN BARU
DATA PEMESAN
Nama: ${_namaController.text}
Kelas: ${_kelasController.text}
No. WA: ${_waController.text}
DETAIL PESANAN
${itemsText}
TOTAL: Rp ${totalHarga.toStringAsFixed(0)}
WAKTU PESAN: ${DateTime.now().toString().substring(0, 16)}
''';
}

3.5 Responsive Design

• Mobile view dengan layout vertikal

• Desktop view dengan tampilan lebih lebar dan proporsional

4. DOKUMENTASI TAMPILAN

4.1 Tampilan Utama

Terdiri dari:

• Header dengan logo

• Promo banner

• Kategori menu

• Daftar menu

4.2 Tampilan Keranjang

Menampilkan:

• Item yang dipilih

• Tombol pengaturan jumlah

• Total sementara

• Tombol checkout

4.3 Tampilan Checkout

Terdiri dari:

• Input data diri

• Ringkasan pesanan

• Tombol kirim ke WhatsApp

5. POTONGAN KODE PENTING

5.1 State Management

dart
class _JastipHomePageState extends State {
List<Map<String, dynamic>> selectedItems = [];
double totalHarga = 0;

void _calculateTotal() {
totalHarga = selectedItems.fold(0, (sum, item) {
return sum + (item['price'] * item['quantity']);
});
}
}

5.2 Widget Custom Menu Item

dart
Widget _buildMenuItem(Map<String, dynamic> item) {
final quantity = _getItemQuantity(item['id']);

return Container(
margin: EdgeInsets.symmetric(vertical: 8),
child: Material(
elevation: 2,
borderRadius: BorderRadius.circular(16),
child: InkWell(
onTap: () => _addToOrder(item),
child: Container(
padding: EdgeInsets.all(16),
child: Row(
children: [
Container(
width: 100,
height: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
gradient: LinearGradient(
colors: [Color(0xFFFAF3E0), Color(0xFFFFF8E1)],
),
),
child: Image.network(item['image']),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(item['name'], style: TextStyle(fontWeight: FontWeight.bold)),
Text('Rp ${item['price']}'),
],
),
),
quantity > 0
? _buildQuantityController(item, quantity)
: _buildAddButton(item),
],
),
),
),
),
);
}

5.3 Integrasi WhatsApp Launcher

dart
Future _launchWhatsApp(String message) async {
String url = 'https://wa.me/6285176907011?text=${Uri.encodeComponent(message)}';
try {
if (await canLaunchUrl(Uri.parse(url))) {
await launchUrl(Uri.parse(url));
} else {
_showErrorSnackBar('Tidak dapat membuka WhatsApp');
}
} catch (e) {
_showErrorSnackBar('Terjadi kesalahan');
}
}

6. STRUKTUR FOLDER PROJECT

lib/
main.dart
pages/
home_page.dart
models/
menu.dart
widgets/
menu_card.dart
checkout_card.dart

7. TANTANGAN DAN SOLUSI

Tantangan:

• Manajemen state cukup kompleks

• Responsive design

• Error loading gambar

• User experience

Solusi:

• Menggunakan setState untuk state sederhana

• MediaQuery untuk responsive layout

• Menambahkan errorBuilder pada Image.network

• User testing internal

8. TEKNOLOGI YANG DIGUNAKAN

• Flutter 3.x

• Dart

• url_launcher

• Material Design

9. KESIMPULAN
   Proyek Kantin Sekolah Digital berhasil menerapkan konsep Flutter, state management dasar, integrasi WhatsApp, serta UI yang responsif dan mudah digunakan.

10. HASIL PENGUJIAN
    Semua fitur berjalan normal, WhatsApp terkirim dengan baik, tampilan responsif, dan aplikasi stabil.

    

    
    
    
    

11. REPOSITORY 

Repository : https://zsb406f9sb50.zapp.page/#/

Nama: (Sela Salafiah)
Kelas: XII RPL 2
Sekolah: (SMKN 1 Banjar)
Mata Pelajaran: Pemrograman Mobile (Dart dan Flutter)
Guru Pengampu: Darsu
Tahun Ajaran: 2025/2026

Artikel ini dibuat sebagai tugas praktikum Ujian Akhir Semester Ganjil 2025/2026.

---