🍹 Aplikasi Pemesanan Kantin Es Berbasis Flutter We

Penulis: [Daffa Arief Nugraha]

Tanggal: 10 Desember 2024

Kategori: Mobile Development, Flutter, Dart

📱 Deskripsi Aplikasi

Kantin Es adalah aplikasi pemesanan minuman segar berbasis web yang dibangun menggunakan Flutter dan bahasa pemrograman Dart. Aplikasi ini dirancang khusus untuk memudahkan pemesanan minuman di kantin sekolah atau warung dengan antarmuka yang modern, user-friendly, dan terintegrasi langsung dengan WhatsApp untuk proses pemesanan yang lebih praktis.

Aplikasi ini menampilkan daftar menu minuman lengkap dengan foto, harga, dan fitur keranjang belanja yang interaktif. Pengguna dapat dengan mudah menambah atau mengurangi jumlah pesanan, melihat total pembayaran secara real-time, dan langsung mengirim pesanan ke penjual melalui WhatsApp hanya dengan satu klik.

🎯 Tujuan Pembuatan Aplikasi

Aplikasi Kantin Es dikembangkan dengan beberapa tujuan utama:

Mempermudah Proses Pemesanan
Menghilangkan kebutuhan untuk antri panjang atau menulis pesanan manual, sehingga menghemat waktu pembeli dan penjual.
Meningkatkan Efisiensi Operasional
Dengan sistem digital, penjual dapat menerima pesanan secara terstruktur dan terorganisir melalui WhatsApp.
Memberikan Pengalaman Pengguna Modern
Interface yang menarik dengan animasi smooth, gradient warna kuning cerah, dan desain responsif membuat pengalaman pengguna lebih menyenangkan.
Implementasi Pembelajaran Flutter
Sebagai project pembelajaran untuk menguasai konsep state management, widget composition, navigation, dan integrasi API eksternal di Flutter.
Solusi Praktis untuk UMKM
Memberikan solusi digital yang mudah diakses tanpa perlu instalasi aplikasi, cukup melalui browser web.

✨ Fitur-Fitur Aplikasi

1. Daftar Menu dengan Foto Real

Menampilkan 6 menu minuman dengan foto berkualitas tinggi
Setiap menu dilengkapi dengan nama, harga, dan gambar menarik
Loading indicator saat gambar dimuat
Error handling dengan fallback icon jika gambar gagal dimuat

2. Keranjang Belanja Interaktif

Icon keranjang di pojok kanan atas dengan badge jumlah item
Badge merah dengan animasi elastic saat item ditambahkan
Klik icon keranjang untuk langsung ke halaman checkout

3. Quantity Control yang Intuitif

Tombol + dan - vertikal di setiap menu card
Counter quantity di tengah dengan desain gradient
Perhitungan subtotal otomatis per item
Visual feedback dengan perubahan warna saat item dipilih

4. Floating Action Button (FAB)

Button "Checkout Sekarang" muncul dengan animasi
Hanya muncul ketika ada minimal 1 item di keranjang
Design dengan shadow dan warna amber yang eye-catching

5. Halaman Checkout Modern

Ringkasan pesanan lengkap dengan foto, quantity, dan subtotal
Total pembayaran dengan format rupiah yang rapi
Card design dengan gradient dan border yang elegan
Animasi staggered saat list item muncul

6. Integrasi WhatsApp Otomatis

Button "Pesan via WhatsApp" dengan icon dan gradient hijau
Saat diklik, otomatis membuka WhatsApp Web/App
Format pesan terstruktur dengan detail pesanan lengkap
Loading indicator saat memproses pengiriman
Snackbar konfirmasi setelah berhasil

7. Responsive Design

Tampilan optimal di berbagai ukuran layar
SliverAppBar dengan expandable header
Smooth scrolling dengan CustomScrollView
SafeArea untuk perangkat dengan notch

8. Animasi dan Transisi Smooth

Staggered animation saat menu list muncul
Scale animation pada badge keranjang
Elastic animation pada FAB
Hover effect pada card (untuk web)
Smooth page transition

9. Visual Feedback yang Jelas

Snackbar untuk notifikasi error dan sukses
Perubahan warna UI saat item dipilih
Badge "Popular" untuk menu favorit
Disabled state yang jelas pada button

10. Format Harga Rupiah

Pemisah ribuan dengan titik (contoh: Rp 15.000)
Konsisten di seluruh aplikasi
Helper function untuk format currency

📸 Dokumentasi Tampilan

Halaman Utama (Home Page)

Tampilan halaman utama dengan menu list, header gradient, dan keranjang belanja

Penjelasan:

Header dengan gradient kuning-amber yang menarik
Welcome card dengan info total pesanan
6 menu minuman dengan foto real dan tombol quantity
Badge keranjang di pojok kanan atas menampilkan jumlah item

Halaman Checkout

Tampilan halaman checkout dengan ringkasan pesanan dan tombol WhatsApp

Penjelasan:

Header dengan icon receipt dan info jumlah item
List pesanan dengan foto, quantity, dan subtotal
Total pembayaran dalam box gradient dengan border
Button WhatsApp hijau untuk mengirim pesanan

WhatsApp Integration

Format pesan WhatsApp yang terkirim otomatis

Penjelasan:

Format pesan terstruktur dengan emoji
Detail setiap item dengan quantity dan subtotal
Total pembayaran yang jelas
Ready to send ke nomor penjual

💻 Potongan Kode Penting

1. Model Data Menu

class Menu {
  final String id;
  final String name;
  final int price;
  final String imageUrl;
  int quantity;

  Menu({
    required this.id,
    required this.name,
    required this.price,
    required this.imageUrl,
    this.quantity = 0,
  });

  // Getter untuk menghitung subtotal
  int get subtotal => price * quantity;
}

Penjelasan: Class Menu menyimpan data setiap menu dengan properti imageUrl untuk foto dan quantity untuk tracking jumlah pesanan. Getter subtotal menghitung otomatis harga × quantity.

2. State Management dengan setState

void incrementQuantity(int index) {
  setState(() {
    menuList[index].quantity++;
    _animationController.forward(from: 0);
  });
}

void decrementQuantity(int index) {
  setState(() {
    if (menuList[index].quantity > 0) {
      menuList[index].quantity--;
    }
  });
}

Penjelasan: Menggunakan setState() untuk update UI secara reactive. Setiap kali quantity berubah, UI otomatis rebuild dan animasi badge keranjang dipicu.

3. Integrasi WhatsApp dengan dart:html

import 'dart:html' as html;

void sendToWhatsApp(BuildContext context) async {
  setState(() => isProcessing = true);

  String message = '🍹 *Pesanan Kantin Es*\n';
  message += '━━━━━━━━━━━━━━━━━\n\n';
  
  for (var menu in widget.selectedItems) {
    message += '• ${menu.name}\n';
    message += '  ${menu.quantity}x @ Rp ${formatPrice(menu.price)}\n';
    message += '  Subtotal: Rp ${formatPrice(menu.subtotal)}\n\n';
  }
  
  message += '━━━━━━━━━━━━━━━━━\n';
  message += '💰 *TOTAL: Rp ${formatPrice(widget.totalPrice)}*\n';

  const String sellerNumber = '6281234567890';
  final url = 'https://wa.me/$sellerNumber?text=${Uri.encodeComponent(message)}';

  await Future.delayed(const Duration(milliseconds: 500));
  html.window.open(url, '_blank');

  setState(() => isProcessing = false);
}

Penjelasan: Menggunakan dart:html untuk membuka WhatsApp di browser. Pesan diformat dengan unicode escape dan dibuka di tab baru dengan window.open().

4. CustomScrollView dengan SliverAppBar

CustomScrollView(
  slivers: [
    SliverAppBar(
      expandedHeight: 180,
      floating: false,
      pinned: true,
      flexibleSpace: FlexibleSpaceBar(
        background: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [
                Colors.amber[700]!,
                Colors.amber[500]!,
                Colors.amber[300]!,
              ],
            ),
          ),
        ),
      ),
    ),
    SliverList(...),
  ],
)

Penjelasan: CustomScrollView dengan SliverAppBar memberikan efek collapsing header yang smooth. AppBar tetap terlihat saat scroll dengan pinned: true.

5. Animation Controller untuk Badge

late AnimationController _animationController;

@override
void initState() {
  super.initState();
  _animationController = AnimationController(
    vsync: this,
    duration: const Duration(milliseconds: 300),
  );
}

// Di dalam widget
ScaleTransition(
  scale: Tween<double>(begin: 0.5, end: 1.0).animate(
    CurvedAnimation(
      parent: _animationController,
      curve: Curves.elasticOut,
    ),
  ),
  child: Badge(...),
)

Penjelasan: AnimationController dengan SingleTickerProviderStateMixin digunakan untuk menganimasikan badge keranjang. Animasi elastic memberikan efek bouncy yang menarik.

6. Format Rupiah Helper Function

String formatPrice(int price) {
  return 'Rp ${price.toString().replaceAllMapped(
    RegExp(r'(\d{1,3})(?=(\d{3})+(?!\d))'),
    (Match m) => '${m[1]}.',
  )}';
}

Penjelasan: Regular expression untuk menambahkan pemisah ribuan (titik) pada angka. Contoh: 15000 → Rp 15.000

7. Image Loading dengan Error Handling

Image.network(
  menu.imageUrl,
  fit: BoxFit.cover,
  errorBuilder: (context, error, stackTrace) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [Colors.amber[200]!, Colors.amber[400]!],
        ),
      ),
      child: const Icon(Icons.local_drink, size: 60),
    );
  },
  loadingBuilder: (context, child, loadingProgress) {
    if (loadingProgress == null) return child;
    return Center(
      child: CircularProgressIndicator(
        value: loadingProgress.expectedTotalBytes != null
            ? loadingProgress.cumulativeBytesLoaded /
                loadingProgress.expectedTotalBytes!
            : null,
      ),
    );
  },
)

Penjelasan: errorBuilder menampilkan icon fallback jika gambar gagal load. loadingBuilder menampilkan progress indicator saat gambar sedang dimuat.

🎓 Kesimpulan

Aplikasi Kantin Es berhasil dikembangkan dengan menerapkan berbagai konsep penting dalam Flutter development, mulai dari state management sederhana dengan setState(), widget composition yang modular, hingga integrasi dengan platform eksternal (WhatsApp).

Pembelajaran yang Didapat:

State Management
Pemahaman mendalam tentang cara kerja setState() dan reactive programming di Flutter untuk update UI secara real-time.
Widget Composition
Membuat custom widget reusable seperti MenuCard yang dapat digunakan berulang dengan data berbeda.
Navigation & Routing
Implementasi page navigation dengan Navigator.push() dan passing data antar halaman.
External Integration
Integrasi dengan WhatsApp menggunakan dart:html untuk platform web dan URL scheme wa.me.
UI/UX Design
Penerapan prinsip design modern dengan gradient, shadow, animation, dan responsive layout.
Error Handling
Implementasi error handling pada image loading, validasi input, dan feedback ke user.
Animation
Penggunaan AnimationController, Tween, dan berbagai transition widget untuk UI yang lebih hidup.

Kelebihan Aplikasi:

✅ Interface modern dan menarik dengan dominan warna kuning-putih
✅ User experience yang smooth dengan animasi dan transisi
✅ Integrasi WhatsApp yang memudahkan proses pemesanan
✅ Responsive design untuk berbagai ukuran layar
✅ Code yang terstruktur dan mudah di-maintain
✅ Real-time calculation untuk total harga
✅ Visual feedback yang jelas untuk setiap interaksi

Peluang Pengembangan:

📌 Fitur Pencarian - Menambahkan search bar untuk mencari menu dengan cepat
📌 Kategori Menu - Mengelompokkan menu berdasarkan kategori (Es, Jus, dll)
📌 Riwayat Pesanan - Menyimpan history pemesanan pengguna
📌 Multiple Payment - Integrasi dengan payment gateway (GoPay, OVO, dll)
📌 Rating & Review - Fitur untuk memberikan rating dan review menu
📌 Dark Mode - Tema gelap untuk pengalaman pengguna yang lebih nyaman
📌 Backend Integration - Koneksi ke database real untuk data dinamis
📌 Push Notification - Notifikasi status pesanan ke pembeli

Tantangan yang Dihadapi:

⚠️ Image Loading - Mengatasi delay saat loading gambar dari internet dengan implementasi loading indicator yang baik.
⚠️ Const Constructor - Debugging error terkait const constructor di Dart yang membutuhkan pemahaman mendalam.
⚠️ WhatsApp Format - Memastikan format pesan WhatsApp tetap rapi dengan unicode encoding.
⚠️ Animation Timing - Menyesuaikan timing animasi agar terasa natural dan tidak berlebihan.

Teknologi yang Digunakan:

Framework: Flutter 3.x
Language: Dart
Architecture: MVC (Model-View-Controller)
State Management: setState (Built-in Flutter)
Platform: Web (Flutter Web)
External API: WhatsApp (wa.me URL scheme)
UI Library: Material Design 3

🔗 Link & Resources

Live Demo

https://z66c065p66d0.zapp.page/#/

Aplikasi dapat diakses langsung melalui browser

📊 Screenshot Hasil Pengujian

Test Case 1: Menambah Item ke Keranjang

✅ Badge keranjang muncul dengan jumlah yang tepat
✅ Animasi elastic berjalan smooth
✅ Total harga terupdate secara real-time
✅ Subtotal per item muncul di card

Test Case 2: Proses Checkout

✅ Navigasi ke halaman checkout berhasil
✅ Data pesanan sesuai dengan yang dipilih
✅ Total pembayaran dihitung dengan benar
✅ List item ditampilkan dengan lengkap

Test Case 3: Kirim ke WhatsApp

✅ Format pesan WhatsApp terstruktur dengan rapi
✅ Detail pesanan lengkap (nama, qty, harga)
✅ Total pembayaran terformat dengan benar
✅ Nomor tujuan sesuai dengan yang diset

📝 Catatan Akhir

Aplikasi Kantin Es ini merupakan implementasi dari pembelajaran Flutter yang diterapkan dalam konteks real-world problem. Project ini menunjukkan bahwa dengan Flutter, kita dapat membuat aplikasi yang functional, beautiful, dan user-friendly dengan codebase yang clean dan maintainable.

Semoga artikel ini bermanfaat bagi teman-teman yang sedang belajar Flutter atau ingin mengembangkan aplikasi serupa. Feel free to fork repository dan customize sesuai kebutuhan!

Happy Coding! 🚀

Tags: #Flutter #Dart #WebDevelopment #MobileDevelopment #WhatsAppAPI #UIUXDesign #StateManagement