🚀 KantinExpress
Aplikasi Pemesanan Makanan Kantin Sekolah Modern
Tampilan utama aplikasi KantinExpress menampilkan 2 kantin yaitu Kantin Sejahtera (Rating 4.9, Buka jam 07:00) dan Kantin Bahari (Rating 4.7, Buka jam 07:30). Setiap kartu kantin menampilkan informasi lengkap seperti rating, jam operasional, dan status buka/tutup dengan indikator warna hijau.
📱 Apa itu KantinExpress?
KantinExpress adalah aplikasi pemesanan makanan berbasis mobile yang dirancang khusus untuk memudahkan siswa SMKN 1 Banjar dalam memesan makanan dari berbagai kantin sekolah. Dengan tampilan modern dan fitur lengkap, siswa dapat memesan makanan favorit dengan mudah dan cepat!
Aplikasi ini dikembangkan menggunakan Flutter dengan desain UI/UX yang estetik, responsif, dan user-friendly. Dilengkapi dengan fitur keranjang belanja, checkout via WhatsApp, dan profil pengguna.
✨ Fitur Unggulan
Daftar Kantin
Informasi lengkap kantin sekolah dengan rating dan jam operasional
Menu Populer
Rekomendasi menu terlaris dengan jumlah terjual
Keranjang Belanja
Tambah/kurang item, hitung total otomatis
Checkout WhatsApp
Pesanan langsung terkirim ke kurir via WhatsApp
Profil Pengguna
Informasi akun dan member platinum
Pencarian
Cari makanan favorit dengan mudah
📸 Analisis Detail Screenshot
🏪 1. Header Aplikasi
Pada bagian atas screenshot, terlihat header dengan gradien warna ungu ke pink yang menampilkan sapaan "Selamat Datang, Divo Pratama". Ini menunjukkan bahwa aplikasi memiliki personalisasi pengguna yang baik.
🏪 2. Section Kantin Sekolah
Terdapat 2 kartu kantin yang ditampilkan:
-
Kantin Sejahtera - Rating 4.9, Buka jam 07:00, status BUKA (hijau)
-
Kantin Bahari - Rating 4.7, Buka jam 07:30, status BUKA (hijau)
Setiap kartu dilengkapi dengan deskripsi singkat, rating bintang, jam operasional, dan indikator status buka/tutup. Desain kartu menggunakan gradient dan shadow yang memberikan efek premium.
📌 3. Bottom Navigation
Bagian bawah layar terdapat navigasi dengan 3 menu utama: Menu, Keranjang, dan Profil. Menu "Keranjang" memiliki badge counter yang menampilkan jumlah item yang dipesan.
🎨 4. Tema Warna
Aplikasi menggunakan tema gelap (dark mode) dengan kombinasi warna:
- Primary: Ungu (#7C3AED)
- Secondary: Pink (#DB2777)
- Accent: Emas untuk rating (#FFD700)
- Background: Hitam kebiruan (#0F172A)
🛠️ Teknologi yang Digunakan
Flutter
Framework UI modern untuk mobile
Dart
Bahasa pemrograman utama
WhatsApp API
Integrasi checkout otomatis
Material 3
Desain modern Google
🎨 UI/UX Design Principles
-
Clean & Modern - Desain bersih dengan gradien premium
-
Dark Mode - Mengurangi kelelahan mata
-
Responsive - Tampilan optimal di berbagai device
-
Intuitive Navigation - Navigasi mudah dengan bottom bar
-
Visual Feedback - Animasi dan efek hover pada interaksi
📖 Cara Penggunaan Aplikasi
- Pilih Kantin - Klik kartu kantin untuk melihat detail menu
- Tambah Menu - Klik tombol "+ Tambah" pada menu favorit
- Cek Keranjang - Buka halaman Keranjang untuk review pesanan
- Atur Jumlah - Tambah/kurang jumlah item di keranjang
- Checkout - Klik "PESAN SEKARANG" untuk kirim ke WhatsApp
- Konfirmasi - Pesanan otomatis terkirim ke kurir
🏆 Keunggulan KantinExpress
Cepat
Pemesanan instan via WhatsApp
Estetik
Tampilan modern dengan gradien
Aman
Data tersimpan di local storage
Akurat
Perhitungan total otomatis
Ingin Mencoba Demo?
Klik tombol di bawah untuk melihat demo interaktif KantinExpress
💻 Contoh Kode Flutter
Berikut adalah contoh kode untuk membuat kartu kantin seperti pada screenshot:
class _KantinCard extends StatelessWidget {
final Kantin kantin;
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Color(0xFF7C3AED), Color(0xFFA855F7)],
),
borderRadius: BorderRadius.circular(24),
),
child: Column(
children: [
Container(
height: 120,
child: Center(
child: Text(kantin.foto, style: TextStyle(fontSize: 56)),
),
),
Padding(
padding: EdgeInsets.all(12),
child: Column(
children: [
Text(kantin.nama, style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
)),
Row(
children: [
Icon(Icons.star, color: Colors.amber, size: 14),
Text('${kantin.rating}'),
Icon(Icons.access_time, size: 12),
Text(kantin.jamBuka),
],
),
Container(
child: Text(kantin.sedangBuka ? 'BUKA' : 'TUTUP'),
),
],
),
),
],
),
);
}
}
🎯 Kesimpulan
KantinExpress adalah solusi modern untuk pemesanan makanan di lingkungan sekolah. Dengan desain yang estetik, fitur lengkap, dan kemudahan penggunaan, aplikasi ini membantu siswa memesan makanan dengan lebih praktis dan efisien.
Aplikasi ini dibangun menggunakan Flutter dengan memperhatikan aspek User Experience (UX) dan User Interface (UI) yang menarik. Fitur checkout via WhatsApp memudahkan komunikasi antara pembeli dan kurir.
📢 Status Proyek: ✅ Selesai | 🚀 Siap Deploy | 📱 Support Android & iOS
Komentar
Posting Komentar