Pengembangan Aplikasi Kantin Sederhana Menggunakan Flutter


Deskripsi Aplikasi

Aplikasi kantin ini merupakan aplikasi mobile sederhana yang dibuat menggunakan Flutter dan bahasa pemrograman Dart. Aplikasi ini dirancang untuk memudahkan pengguna dalam memilih menu makanan, menentukan jumlah pembelian, melakukan perhitungan total otomatis, hingga mengirim pesanan melalui WhatsApp. Aplikasi ini cocok sebagai simulasi digitalisasi proses pemesanan di kantin sekolah maupun kantin umum.


Tujuan dari pembuatan aplikasi ini adalah:

  • Memberikan kemudahan dalam melakukan pemesanan makanan secara digital.

  • Menjadi contoh implementasi state management sederhana menggunakan setState.

  • Menerapkan konsep dasar pembuatan UI/UX di Flutter.

  • Menyediakan pengalaman pemesanan makanan dengan ringkasan pesanan dan integrasi ke WhatsApp.

  • Membantu pembelajaran mahasiswa atau siswa dalam membuat aplikasi Flutter dengan fitur lengkap namun mudah dipahami.




Halaman Daftar Menu

  • Menampilkan minimal 5 menu makanan/minuman.

  • Setiap menu memiliki nama, harga, dan gambar/icon.

  • Item ditampilkan menggunakan widget seperti ListView, Card, Row, dan Column

Penentuan Jumlah Pembelian

  • Setiap item memiliki tombol tambah (+) dan kurang (–).

  • Jumlah item akan dihitung menggunakan state management setState.

  • Subtotal otomatis berubah sesuai jumlah.

Halaman Checkout

  • Menampilkan daftar item yang dibeli dan jumlah masing-masing.

  • Menghitung total pembayaran secara otomatis.

  • Menyediakan tombol Kirim ke WhatsApp.



Menggunakan link:https://wa.me/62xxxxxxxxxx?text=...
Format pesan otomatis seperti:
    Pesanan Kantin:
    - Nasi Goreng x2 = 20.000
    - Teh Es x1 = 5.000
    Total: 25.000
    

Desain Tampilan

  • Tampilan rapi dan sederhana.

  • Menggunakan warna dasar yang nyaman dilihat.

  • Memperhatikan spacing, padding, dan layout agar mudah digunakan.


Dokumentasi Tampilan





Potongan Kode Penting

models/menu.dart

import 'package:flutter/material.dart';

class Menu {
  final int id;
  final String name;
  final int price; // harga dalam rupiah
  final IconData icon;
  int quantity; // mutable supaya mudah pakai setState

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

  int get subtotal => price * quantity;
}




Kode file pages/home_page.dart Daftar Menu

class _HomePageState extends State<HomePage> {
  final List<Menu> menus = [
    Menu(id: 1, name: 'Nasi Goreng', price: 10000, icon: Icons.rice_bowl),
    Menu(id: 2, name: 'Mie Ayam', price: 12000, icon: Icons.set_meal),
    Menu(id: 3, name: 'Teh Es', price: 5000, icon: Icons.local_drink),
    Menu(id: 4, name: 'Es Jeruk', price: 7000, icon: Icons.emoji_food_beverage),
    Menu(id: 5, name: 'Snack (Keripik)', price: 8000, icon: Icons.fastfood),
  ];





Kode file pages/checkout_page.dart Integrasi WhatsApp dan perhitungan total checkout


import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher_string.dart';
import '../models/menu.dart';

class CheckoutPage extends StatelessWidget {
  const CheckoutPage({super.key});

  String _formatRupiah(int value) {
    final s = value.toString().split('').reversed.join();
    final parts = <String>[];
    for (var i = 0; i < s.length; i += 3) {
      parts.add(s.substring(i, i + 3 > s.length ? s.length : i + 3));
    }
    return parts.join('.').split('').reversed.join();
  }

  String _buildMessage(List<Menu> items) {
    final buffer = StringBuffer();
    buffer.writeln('Pesanan Kantin:');
    for (var m in items) {
      buffer.writeln('- ${m.name} x${m.quantity} = ${_formatRupiah(m.subtotal)}');
    }
    final total = items.fold<int>(0, (p, m) => p + m.subtotal);
    buffer.writeln('Total: ${_formatRupiah(total)}');
    return buffer.toString();
  }

  Future<void> _sendToWhatsApp(BuildContext context, List<Menu> items) async {
    final phone = '6287782239404'; // ganti sesuai simulasi, format: 62...
    final message = _buildMessage(items);
    final encoded = Uri.encodeComponent(message);
    final url = 'https://wa.me/$phone?text=$encoded';

    if (await canLaunchUrlString(url)) {
      await launchUrlString(url);
    } else {
      ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('Tidak dapat membuka WhatsApp')));
    }
  }

  @override
  Widget build(BuildContext context) {
    final args = ModalRoute.of(context)!.settings.arguments;
    final items = (args is List<Menu>) ? args : <Menu>[];

    final total = items.fold<int>(0, (p, m) => p + m.subtotal);

    return Scaffold(
      appBar: AppBar(title: const Text('Checkout')),
      body: Padding(
        padding: const EdgeInsets.all(12.0),
        child: items.isEmpty
            ? const Center(child: Text('Tidak ada item. Kembali dan pilih produk.'))
            : Column(
                children: [
                  Expanded(
                    child: ListView.builder(
                      itemCount: items.length,
                      itemBuilder: (context, index) {
                        final m = items[index];
                        return ListTile(
                          leading: CircleAvatar(child: Icon(m.icon)),
                          title: Text(m.name),
                          subtitle: Text('Qty: ${m.quantity}  —  Rp ${_formatRupiah(m.subtotal)}'),
                        );
                      },
                    ),
                  ),
                  const SizedBox(height: 8),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text('Total: Rp ${_formatRupiah(total)}', style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
                      ElevatedButton.icon(
                        onPressed: () => _sendToWhatsApp(context, items),
                        icon: const Icon(Icons.send),
                        label: const Text('Kirim Pesanan ke WA'),
                      )
                    ],
                  )
                ],
              ),
      ),
    );
  }
}



Kesimpulan

Aplikasi kantin sederhana ini berhasil dibuat menggunakan Flutter dengan memanfaatkan widget dasar dan state management setState. Aplikasi ini mampu menampilkan menu, mengatur jumlah pembelian, menghitung total secara otomatis, hingga mengintegrasikan pengiriman pesanan melalui WhatsApp. Dengan fitur-fitur tersebut, aplikasi ini dapat menjadi contoh penerapan Flutter dalam digitalisasi proses pemesanan makanan yang sederhana namun fungsional.



link demo project: apk-kantin




Komentar

Posting Komentar

Postingan populer dari blog ini

Membuat APK Jastip Online

Gambar
  📱 Deskripsi Aplikasi: Jastip Kantin Sekolah Jastip Kantin Sekolah adalah aplikasi pemesanan makanan dan minuman dari kantin sekolah secara online. Dengan aplikasi ini, siswa tidak perlu lagi antre di kantin. Cukup pesan lewat aplikasi, lalu pesanan akan diproses sesuai warung dan menu yang dipilih. ✨ Fitur Utama: 🔍 Pencarian Cepat Cari makanan, minuman, atau warung dengan mudah melalui fitur search bar. 🍔 Kategori Menu Menyediakan berbagai kategori seperti makanan dan minuman untuk memudahkan pencarian. 🏪 Daftar Warung Kantin Menampilkan daftar warung yang tersedia di kantin sekolah beserta menu dan harga. 🛒 Keranjang Belanja Tambahkan menu ke keranjang sebelum melakukan checkout. 📦 Pesanan Saya Melihat status pesanan yang sedang berjalan maupun yang sudah selesai. 👤 Profil Pengguna Setiap pengguna memiliki profil untuk mengatur informasi pribadi. 🌙 Mode Gelap & Terang Mendukung tema sistem (otomatis menyesuaikan dengan dark mode atau li...
Baca selengkapnya

CRUD Flutter

Gambar
Project ini adalah contoh aplikasi CRUD sederhana menggunakan Flutter dengan bantuan MockAPI sebagai server palsu. Tujuannya untuk belajar bagaimana cara aplikasi Flutter berkomunikasi dengan API. Apa yang Bisa Dilakukan Aplikasi Ini? Tambah data (Create) → Bisa menambahkan nama dan email. Lihat data (Read) → Data yang sudah ada akan tampil dalam daftar. Edit data (Update) → Data bisa diubah lewat tombol pensil. Hapus data (Delete) → Data bisa dihapus lewat tombol tempat sampah. Alat yang Dipakai Flutter → Buat tampilan dan logika aplikasi. MockAPI → Jadi backend dummy tempat menyimpan data. http package → Supaya aplikasi bisa kirim/terima data ke API. Bagaimana Cara Kerjanya? 1. Saat dibuka, aplikasi otomatis ambil data dari MockAPI. 2. Kalau menambah data, aplikasi akan mengirim ke MockAPI dan tampil langsung di daftar. 3. Kalau edit atau hapus, data di API juga ikut berubah. Intinya Aplikasi ini mirip buku kontak sederhana yang datanya tersimpan di server online (MockAPI). Jadi sela...
Baca selengkapnya