🍜 Kantinku - Aplikasi Kasir Digital Kantin Sekolah dengan Flutter
**Hai teman-teman! ** 👋
Kali ini saya mau share project keren dari teman saya yang baru aja selesai dikerjain. Namanya **Kantinku** - aplikasi kasir digital khusus untuk kantin sekolah yang dibuat pakai **Flutter Web**. Simple, cepat, dan super user-friendly! Perfect banget buat kantin sekolah atau kampus yang pengen go digital! 📱✨
Yuk kita bahas detailnya!
---
## 🎯 Apa Itu Kantinku?
**Kantinku** adalah aplikasi web-based point of sale (POS) yang dirancang khusus untuk kantin sekolah/kampus. Aplikasi ini memudahkan siswa untuk memesan makanan dan minuman secara digital, tanpa perlu antri panjang di depan kasir!
Tinggal pilih menu → tambah ke keranjang → checkout → kirim pesanan via WhatsApp. Sesimpel itu! 🚀
---
## ✨ Fitur-Fitur Unggulan
### **Untuk Customer (Siswa):**
- 🔍 **Search Real-time** - Cari menu favorit dengan cepat
- 🏷️ **Filter Kategori** - Makanan, Snack, atau Minuman
- 🖼️ **Visual Product Cards** - Lihat gambar menu sebelum pesan
- ⭐ **Rating Display** - Rating setiap menu untuk referensi
- ➕➖ **Quantity Control** - Tambah/kurang jumlah pesanan dengan mudah
- 🛒 **Live Cart Summary** - Total harga dan item terupdate real-time
- 💬 **WhatsApp Checkout** - Kirim pesanan langsung ke admin kantin
- 💰 **Price Calculator** - Hitung otomatis total pembayaran
### **Design & UX:**
- 🎨 **Modern UI/UX** - Clean design dengan Inter font
- 📱 **Responsive Grid** - 2 kolom di mobile, adaptif di berbagai device
- 🎯 **Intuitive Navigation** - User flow yang jelas dan mudah
- ⚡ **Fast & Smooth** - Performance optimal dengan Flutter
- 🌈 **Color-coded Categories** - Setiap kategori punya visual berbeda
---
## 🎬 Demo Project
**[🔗 LINK DEMO WEBSITE - KLIK DI SINI](#)**
*(Ganti dengan link deploy kamu)*
**[🖼️ SCREENSHOT APLIKASI - LIHAT DI SINI](#)**
*(Upload screenshot ke Imgur atau Google Drive)*
---
## 🛠️ Teknologi yang Digunakan
- **Framework:** Flutter Web
- **Language:** Dart
- **UI Library:** Material Design 3
- **Font:** Inter (Google Fonts)
- **Image Source:** Unsplash API
- **Integration:** WhatsApp Web API
---
## 💻 Mari Kita Bedah Kodenya!
Penasaran gimana cara bikin aplikasi sekeren ini? Yuk intip beberapa bagian penting dari kodenya!
### **1. Data Model - Struktur Produk** 🍽️
```dart
final List<Map<String, dynamic>> _allProducts = [
{
"id": 1,
"name": "Mie Ayam Bakso",
"price": 15000,
"qty": 0,
"image": "https://images.unsplash.com/photo-1586190848861-99aa4a171e90",
"category": "Makanan",
"rating": 4.8,
"description": "Mie ayam dengan bakso sapi pilihan",
},
// ... produk lainnya
];
```
**Fungsi:**
Ini adalah "database" lokal yang menyimpan semua menu kantin. Setiap produk punya ID unik, nama, harga, quantity (untuk tracking berapa banyak yang dipesan), gambar dari Unsplash (keren!), kategori, rating, dan deskripsi. Simple tapi powerful!
---
### **2. Real-time Search Filter** 🔍
```dart
void _filterProducts(String query) {
List<Map<String, dynamic>> results = [];
if (query.isEmpty) {
results = List.from(_allProducts);
} else {
results = _allProducts
. where((item) =>
(item['name'] as String).toLowerCase().contains(query.toLowerCase()) ||
(item['category'] as String).toLowerCase().contains(query.toLowerCase()))
.toList();
}
if (_selectedCategory > 0) {
String category = _getCategoryFromIndex(_selectedCategory);
results = results.where((item) => item['category'] == category).toList();
}
setState(() {
_foundProducts = results;
});
}
```
**Fungsi:**
Ini fungsi magic yang bikin search bar jadi super responsive! Setiap kali user ngetik sesuatu, aplikasi langsung filter produk berdasarkan:
1. **Nama produk** - Ketik "mie" langsung muncul Mie Ayam
2. **Kategori** - Ketik "minuman" muncul semua minuman
3. **Combined filtering** - Bisa filter kategori + search sekaligus!
Yang bikin keren, filtering ini **case-insensitive** (gak peduli huruf besar/kecil) dan **real-time** (langsung update saat ngetik tanpa perlu klik tombol search).
---
### **3. Category Filter dengan Icon** 🏷️
```dart
Widget _buildCategoryCard(String label, int index, IconData icon) {
bool isSelected = _selectedCategory == index;
return GestureDetector(
onTap: () => _filterByCategory(index),
child: Container(
decoration: BoxDecoration(
color: isSelected ? Color(0xFF2563EB) : Colors.white,
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.05),
blurRadius: 8,
offset: Offset(0, 2),
),
],
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
icon,
size: 20,
color: isSelected ? Colors.white : Color(0xFF6B7280),
),
SizedBox(height: 4),
Text(
label,
style: TextStyle(
fontSize: 11,
fontWeight: FontWeight.w600,
color: isSelected ? Colors.white : Color(0xFF6B7280),
),
),
],
),
),
);
}
```
**Fungsi:**
Komponen ini bikin filter kategori jadi cantik! Ada 4 kategori: Semua, Makanan, Snack, dan Minuman. Setiap kategori punya:
- **Icon yang relevan** - Restaurant untuk Makanan, Cookie untuk Snack, dll
- **Active state** - Kategori yang dipilih berubah warna jadi biru
- **Grid layout 4 kolom** - Simetris dan rapi
- **Tap gesture** - Klik langsung filter produk
User experience-nya smooth banget karena visual feedback langsung terlihat!
---
### **4. Live Cart Summary** 🛒
```dart
int totalItems = _allProducts.fold<int>(0, (int sum, item) => sum + (item['qty'] as int));
int totalPrice = _allProducts.fold<int>(0, (int sum, item) => sum + (item['price'] as int) * (item['qty'] as int));
// Display Cart
if (totalItems > 0)
Container(
child: Row(
children: [
Icon(Icons.shopping_basket),
Text("$totalItems item • Rp ${totalPrice.toString().replaceAllMapped(
RegExp(r'(\d{1,3})(?=(\d{3})+(?!\d))'),
(Match m) => '${m[1]}.',
)}"),
],
),
)
```
**Fungsi:**
Ini adalah "calculator" otomatis yang selalu update! Menggunakan fungsi `fold` yang super efisien untuk:
1. **Hitung total item** - Jumlahkan semua quantity dari produk yang dipilih
2. **Hitung total harga** - Kalikan harga × quantity, lalu jumlahkan semua
3. **Format Rupiah** - Pakai regex untuk tambahin titik pemisah ribuan (15000 → 15.000)
Cart summary ini muncul **conditional** - cuma muncul kalau ada barang di keranjang. Gak ada barang? Gak muncul. Elegant!
---
### **5. Product Card dengan Quantity Control** 🎴
```dart
Widget _buildProductCard(Map<String, dynamic> item) {
int qty = item['qty'] as int;
return Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: Colors.black. withOpacity(0.05),
blurRadius: 8,
offset: Offset(0, 2),
),
],
),
child: Column(
children: [
// Product Image
ClipRRect(
borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
child: Image. network(
item['image'],
height: 120,
width: double.infinity,
fit: BoxFit.cover,
),
),
// Product Info
Padding(
padding: EdgeInsets.all(12),
child: Column(
children: [
Text(item['name'], style: TextStyle(fontWeight: FontWeight.w700)),
Text('Rp ${item['price']}'),
Row(
children: [
Icon(Icons.star, size: 14, color: Colors.amber),
Text('${item['rating']}'),
],
),
// Quantity Controls
if (qty == 0)
ElevatedButton(
onPressed: () => setState(() => item['qty'] = 1),
child: Text("Tambah"),
)
else
Row(
children: [
IconButton(
onPressed: () => setState(() => item['qty']--),
icon: Icon(Icons.remove),
),
Text('$qty'),
IconButton(
onPressed: () => setState(() => item['qty']++),
icon: Icon(Icons.add),
),
],
),
],
),
),
],
),
);
}
```
**Fungsi:**
Card produk yang super interaktif! Punya 2 mode:
1. **Mode Default (qty = 0)** - Tampil button "Tambah" yang stylish
2. **Mode Active (qty > 0)** - Tampil controls minus/plus untuk adjust quantity
Fitur unggulan:
- **Image loading dari URL** - Pakai Unsplash API, gambar real dan menarik
- **Rating display** - Ada bintang + angka rating untuk trust signal
- **Conditional UI** - UI berubah otomatis sesuai state quantity
- **Instant feedback** - Setiap klik langsung update tampilan
---
### **6. Responsive Grid Layout** 📱
```dart
GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2, // 2 kolom di mobile
crossAxisSpacing: 12, // Jarak antar kolom
mainAxisSpacing: 12, // Jarak antar baris
childAspectRatio: 0.85, // Rasio tinggi/lebar card
),
itemCount: _foundProducts.length,
itemBuilder: (context, index) {
return _buildProductCard(_foundProducts[index]);
},
)
```
**Fungsi:**
GridView yang perfectly balanced! Parameter `crossAxisCount: 2` bikin layout jadi 2 kolom di mobile. Parameter `childAspectRatio: 0.85` bikin card sedikit lebih tinggi dari lebar, jadi gambar produk keliatan jelas.
Layout ini auto-scroll dan pake `GridView.builder` yang **lazy loading** - cuma render item yang keliatan di layar, jadi performa tetap kencang meski produk banyak!
---
## 🎨 Kenapa Design-nya Keren?
### **1. Color Scheme yang Konsisten** 🎨
- **Primary Blue (#2563EB)** - Warna brand yang modern dan trustworthy
- **Neutral Gray (#6B7280)** - Untuk teks sekunder, gak bikin mata capek
- **Background (#F9FAFB)** - Off-white yang lembut di mata
- **Accent Colors** - Green untuk success, Red untuk badge
### **2. Typography yang Readable** ✍️
- **Font Inter** - Font modern dari Google yang dirancang untuk screen reading
- **Font weights** - Hierarki jelas: 700 untuk header, 600 untuk emphasis, 400-500 untuk body
- **Font sizes** - Dari 10px (badge) sampai 20px (title), semua proporsional
### **3. Spacing & Padding yang Tepat** 📐
- **Consistent spacing** - 8px, 12px, 16px, 20px (multiple of 4)
- **Breathing room** - Gak terlalu sempit, gak terlalu longgar
- **Visual hierarchy** - Elemen penting dikasih space lebih banyak
### **4. Shadow & Elevation** 🌗
- **Subtle shadows** - Opacity 0.05, blur 8px untuk depth ringan
- **No harsh borders** - Lebih smooth pakai shadow daripada border
- **Card elevation** - Bikin UI jadi layered dan modern
---
## 🔥 Kelebihan Aplikasi Ini
### **1. Super Fast Performance** ⚡
Karena pakai Flutter Web dengan optimasi yang baik:
- **Hot reload** saat development
- **Smooth 60fps** animation
- **Lazy loading** untuk grid
- **Efficient state management** dengan setState
### **2. User-Friendly Interface** 👥
- **Gak perlu tutorial** - UI intuitif, langsung ngerti cara pakainya
- **Visual feedback** - Setiap action ada response visual
- **Error handling** - Gambar gak load? Muncul fallback
- **Clear CTAs** - Button jelas fungsinya
### **3. Real Business Ready** 💼
Bukan cuma mockup! Aplikasi ini siap dipakai untuk:
- Kantin sekolah/kampus
- Warung makan kecil
- Coffee shop mini
- Food court tenant
### **4. Easy to Customize** 🛠️
- **Ganti produk** - Tinggal edit array `_allProducts`
- **Ubah warna** - Edit theme di `ThemeData`
- **Tambah kategori** - Extend function `_getCategoryFromIndex`
- **Ganti WhatsApp number** - Update di CheckoutPage
### **5. No Database Required** 🚀
- **Stateful local data** - Gak perlu server atau database
- **Zero cost** - Hosting gratis, gak ada biaya operasional
- **Privacy friendly** - Data gak disimpan di cloud
### **6. Mobile-First Approach** 📱
- **2 kolom grid** - Perfect untuk screen mobile 320px - 428px
- **Touch-friendly** - Button dan tap area cukup besar
- **Thumb zone** - Elemen penting di area jangkauan ibu jari
- **Fast load** - Image dari CDN Unsplash yang super cepat
---
## 📈 Potensi Pengembangan
Aplikasi ini masih bisa dikembangkan jadi lebih powerful:
- 📊 **Admin Dashboard** - Panel untuk manage menu dan harga
- 💳 **Payment Gateway** - Integrasi QRIS atau e-wallet
- 📱 **QR Code Ordering** - Scan QR → Order → Pay
- 🔔 **Order Notifications** - Push notif ke dapur/kasir
- 📈 **Sales Analytics** - Laporan penjualan harian/bulanan
- 👥 **Multi-tenant** - Satu platform untuk banyak kantin
- 🎟️ **Voucher System** - Promo dan discount codes
- ⏰ **Order Scheduling** - Pre-order untuk istirahat berikutnya
- 📦 **Inventory Management** - Track stok bahan baku
- ⭐ **Review & Rating** - Siswa bisa kasih feedback
---
## 🎓 Cocok Untuk...
✅ **Project Sekolah/Kuliah** - Tugas besar pemrograman mobile/web
✅ **PKL/Magang** - Showcase kemampuan Flutter untuk portfolio
✅ **Skripsi/TA** - Bisa dikembangkan jadi sistem POS lengkap
✅ **Bisnis Kantin** - Langsung deploy dan mulai digitalisasi kantin!
✅ **Learning Flutter** - Code yang clean dan well-structured untuk belajar
✅ **Startup Idea** - Basis untuk aplikasi food ordering
---
## 💡 Lessons Learned
Beberapa hal menarik yang bisa dipelajari dari project ini:
### **1. State Management dengan setState**
Meskipun simple, `setState` sangat powerful untuk aplikasi skala kecil-menengah. Gak perlu Provider/Bloc kalau complexitynya masih manageable.
### **2. Functional Programming with Fold**
Fungsi `fold` untuk aggregation data sangat elegant dan efisien dibanding looping manual.
### **3. Conditional Rendering**
Pakai `if` statement di dalam widget tree bikin code lebih clean daripada ternary operator bertingkat.
### **4. Image Loading Best Practices**
Pakai CDN seperti Unsplash dengan parameter `?q=80&w=400` untuk optimasi loading time.
### **5. Responsive Layout**
`GridView` dengan `SliverGridDelegateWithFixedCrossAxisCount` adalah cara paling simple untuk bikin responsive grid.
---
## 🎯 Kesimpulan
**Kantinku** adalah contoh sempurna dari aplikasi yang **simple but powerful**. Dengan design yang modern, code yang clean, dan fitur yang praktis, aplikasi ini bisa langsung dipakai untuk kebutuhan real!
Yang paling keren? **Gak ribet! ** Gak perlu setup server, gak perlu database, gak perlu payment gateway yang mahal. Tinggal deploy dan aplikasi siap digunakan. Perfect untuk digitalisasi kantin sekolah atau UMKM!
---
## 💬 Penutup
Gimana? Keren kan projectnya? 🎉
Aplikasi kayak gini proof bahwa **teknologi gak harus rumit untuk jadi berguna**. Yang penting adalah solve real problem dengan cara yang efisien dan user-friendly.
Kalau kamu tertarik untuk develop lebih lanjut atau punya ide improvement, jangan ragu untuk explore codenya! Who knows, maybe aplikasi ini bisa jadi startup kamu berikutnya! 🚀
Keep coding, keep learning, and most importantly, **keep building awesome stuff!** 💻✨
---
**Tags:** #Flutter #FlutterWeb #Dart #POS #KantinDigital #WebDevelopment #MobileFirst #UIUXDesign #CodingIndonesia #StudentProject
---
**⭐ Kalau artikel ini helpful, jangan lupa share ke teman-teman yang lagi belajar Flutter ya! ⭐**
---
*Last Updated: December 2025*
*Project by: [Nama Teman Kamu]*
*Reviewed by: [Nama Kamu]*
*Tech Stack: Flutter 3.x, Dart 3.x*
---
**📝 Catatan Tambahan:**
Aplikasi ini adalah hasil kolaborasi dan pembelajaran. Kalau ada bug atau suggestion, feel free to reach out! Mari kita sama-sama belajar dan grow sebagai developer! 🌱
**Happy coding!** 🎨💙
Komentar
Posting Komentar