Membangun Aplikasi Jastip Kantin Flutter Dart

Aplikasi Flutter Canteen Ordering App adalah solusi mobile yang memungkinkan mahasiswa untuk memesan makanan dari kantin kampus secara digital. Aplikasi ini menyediakan menu kantin lengkap dengan sistem pemilihan kuantitas, perhitungan otomatis, dan integrasi langsung dengan WhatsApp untuk pengiriman pesanan.

Aplikasi ini dikembangkan menggunakan Flutter Framework dengan struktur kode yang terorganisir dan menggunakan state management sederhana dengan setState. Dengan antarmuka yang intuitif, pengguna dapat dengan mudah memilih menu, menentukan jumlah pesanan, dan mengirimkan order ke penjual melalui WhatsApp.

Tujuan utama pengembangan aplikasi ini adalah:

1. Digitalisasi Proses Pemesanan: Mengubah sistem pemesanan kantin dari manual ke digital

2. Efisiensi Waktu: Mempercepat proses pemesanan dan pembayaran

3. Minimalisasi Kesalahan: Menghitung total otomatis untuk menghindari kesalahan perhitungan manual

4. Integrasi dengan WhatsApp: Memanfaatkan platform komunikasi yang sudah familiar bagi pengguna

5. Edukasi Pengembangan Flutter: Sebagai media belajar pengembangan aplikasi mobile dengan Flutter

1. Menu List Page

• Menampilkan daftar menu kantin (minimal 5 item)

• Setiap item terdiri dari: nama, harga, dan gambar

• Menggunakan widget ListView, Card, Row, dan Column

• Kategori menu: Mie Instant, Cireng, dan Snacks lainnya

•                     

2. Quantity Selection System

• Tombol tambah/kurang untuk setiap item

• State management sederhana menggunakan setState

• Perhitungan subtotal per item secara real-time

• Sistem pemilihan jenis/variant untuk item tertentu (Mie & Cireng)

•                       

3. Checkout Page

• Ringkasan pesanan: daftar item yang dipesan beserta kuantitas

• Perhitungan total pembayaran otomatis

• Tombol "Send Order to WhatsApp"

• Format pesan WhatsApp yang terstruktur

•                         

4. WhatsApp Integration

• Menggunakan URL scheme: https://wa.me/6281324001448?text=nama-pesananxharga-item

• Pesan otomatis terformat dengan rincian pesanan

• Support untuk preview pesan sebelum dikirim       

• 
  
  

5. User Interface Design

• Desain clean dan user-friendly

• Warna tema hijau (khas kantin/sehat)

• Padding dan layout yang konsisten

• Feedback visual yang jelas

Important Code Snippets

1. Model Data Menu Item

class MenuItem {

  final String id;

  final String name;

  final double price;

  final String imageUrl;

  int quantity;

  final List<String>? variants;

  String? selectedVariant;

  double get subtotal => price * quantity;

  bool get hasVariants => variants != null && variants!.isNotEmpty;

}

2. Dialog Pemilihan Variant

Future<void> _showVariantDialog(MenuItem item) async {

  String? selectedVariant = await showDialog<String>(

    context: context,

    builder: (context) => AlertDialog(

      title: Text('Pilih Jenis ${item.name}'),

      content: SizedBox(

        width: double.maxFinite,

        child: ListView.builder(

          shrinkWrap: true,

          itemCount: item.variants!.length,

          itemBuilder: (context, index) {

            final variant = item.variants![index];

            return ListTile(

              title: Text(variant),

              onTap: () => Navigator.pop(context, variant),

            );

          },

        ),

      ),

    ),

  );

  if (selectedVariant != null) {

    final updatedItem = item.copyWith(

      selectedVariant: selectedVariant,

      quantity: item.quantity + 1,

    );

    _updateMenuItem(updatedItem);

  }

}

3. WhatsApp Message Generator

String _generateWhatsAppMessage() {

  final buffer = StringBuffer();

  buffer.write('Pesanan Kantin:\n');

  

  for (final item in selectedItems) {

    if (item.selectedVariant != null) {

      buffer.write('- ${item.name} (${item.selectedVariant}) x${item.quantity} = Rp ${item.subtotal.toStringAsFixed(0)}\n');

    } else {

      buffer.write('- ${item.name} x${item.quantity} = Rp ${item.subtotal.toStringAsFixed(0)}\n');

    }

  }

  

  buffer.write('Total: Rp ${totalPrice.toStringAsFixed(0)}');

  return buffer.toString();

}

4. WhatsApp Integration with url_launcher

Future<void> _sendToWhatsApp(BuildContext context) async {

  const phoneNumber = '6281324001448';

  final message = _generateWhatsAppMessage();

  final encodedMessage = Uri.encodeComponent(message);

  final whatsappUrl = 'https://wa.me/$phoneNumber?text=$encodedMessage';

  

  if (await canLaunchUrl(Uri.parse(whatsappUrl))) {

    await launchUrl(Uri.parse(whatsappUrl));

  }

}

5. Menu Card Widget dengan Quantity Control

Widget build(BuildContext context) {

  return Card(

    child: Padding(

      padding: const EdgeInsets.all(12),

      child: Row(

        children: [

          // Image

          Container(

            width: 80,

            height: 80,

            decoration: BoxDecoration(

              image: DecorationImage(

                image: NetworkImage(widget.menuItem.imageUrl),

                fit: BoxFit.cover,

              ),

            ),

          ),

          

          // Quantity Controls

          Container(

            decoration: BoxDecoration(

              color: Colors.grey[100],

              borderRadius: BorderRadius.circular(20),

            ),

            child: Row(

              children: [

                IconButton(

                  icon: Icon(Icons.remove),

                  onPressed: _decrementQuantity,

                ),

                Text(widget.menuItem.quantity.toString()),

                IconButton(

                  icon: Icon(Icons.add),

                  onPressed: _incrementQuantity,

                ),

              ],

            ),

          ),

        ],

      ),

    ),

  );

}

Project Structure

lib/

├── main.dart

├── pages/

│   ├── home_page.dart

│   └── checkout_page.dart

├── models/

│   └── menu_item.dart

└── widgets/

    └── menu_card.dart

Repository Link

GitHub Repository: https://github.com/fahrulriadu22/apk-jastip-kantin

1. Build Success

2. No Errors/Warnings

3. WhatsApp Integration Test