🍧 Tukang Es Kawan Baru – Aplikasi Menu Minuman Kekinian
Siapa sih yang tidak suka minuman segar di siang hari yang panas? 🌞 Nah, di era digital sekarang, bukan hanya makanan dan minuman yang bisa kita beli online, tapi juga aplikasi sederhana untuk menampilkan daftar menu bisa kita buat sendiri dengan Flutter!
Kali ini saya mencoba membuat aplikasi bernama “Tukang Es Kawan Baru”, sebuah aplikasi yang menampilkan berbagai pilihan minuman segar lengkap dengan harga, deskripsi, serta tombol untuk menambahkannya ke keranjang belanja.
✨ Fitur Utama Aplikasi:
1. Daftar Produk dengan Desain Menarik
Setiap menu minuman ditampilkan dalam bentuk kartu berwarna lembut sesuai jenis minuman, dilengkapi dengan emoji 🍇🍹🍵🍫 agar lebih menarik.
2. Keranjang Belanja (Cart)
Pengguna bisa menambahkan produk ke keranjang, mengurangi jumlah pesanan, atau menghapusnya. Di bagian atas, ikon keranjang otomatis menampilkan jumlah item yang sudah dipilih.
3. Checkout via WhatsApp
Setelah memilih minuman, pengguna bisa langsung checkout dan aplikasi akan membuatkan format pesan otomatis ke WhatsApp. Cukup klik, maka WhatsApp akan terbuka dengan daftar pesanan siap dikirim ke penjual.
4. Pembayaran COD (Cash On Delivery)
Untuk kemudahan pelanggan, metode pembayaran yang digunakan adalah COD. Jadi, tinggal pesan, tunggu pesanan datang, lalu bayar di tempat.
---
📱 Tampilan Aplikasi
Berikut adalah salah satu tampilan aplikasi Tukang Es Kawan Baru:
🍇 Es Anggur Susu – Minuman segar rasa anggur dengan sensasi dingin menyegarkan. Harga Rp 2000.
🍹 Es Teh Manis – Teh dingin manis segar, cocok diminum saat cuaca panas. Harga Rp 3000.
🍵 Es Teh Sisri Gula Batu – Teh Sisri asli dengan gula batu, rasanya khas dan menyegarkan. Harga Rp 2000.
🍫 Pop Ice Chociato – Minuman creamy dengan rasa chociato manis, cocok untuk santai. Harga Rp 4000.
Dan masih banyak lagi menu yang bisa ditambahkan.
---
🛠️ Kode Program Flutter
Untuk kamu yang ingin mencoba membuat aplikasi serupa, berikut adalah kode lengkapnya menggunakan Flutter. Cukup salin kode ini ke project Flutter kamu, jalankan di web atau emulator, dan aplikasi siap digunakan:
import 'dart:html' as html;
import 'package:flutter/material.dart';
import 'package:collection/collection.dart';
void main() {
runApp(const JasaTitipApp());
}
class JasaTitipApp extends StatelessWidget {
const JasaTitipApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Tukang Es Kawan Baru',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
fontFamily: 'Arial',
),
home: const ProductListScreen(),
);
}
}
// === Kode Produk & Keranjang (Product + Cart) ===
class Product {
final String name;
final String description;
final double price;
final String emoji;
final Color color;
Product({
required this.name,
required this.description,
required this.price,
required this.emoji,
required this.color,
});
}
class CartItem {
final Product product;
final int quantity;
CartItem({required this.product, required this.quantity});
}
// === Tampilan Daftar Produk ===
class ProductListScreen extends StatefulWidget {
const ProductListScreen({super.key});
@override
State<ProductListScreen> createState() => _ProductListScreenState();
}
class _ProductListScreenState extends State<ProductListScreen> {
// Daftar produk
final List<Product> products = [
Product(
name: 'Es Anggur Susu',
description: 'Minuman segar rasa anggur dengan sensasi dingin menyegarkan, cocok untuk semua suasana.',
price: 2000,
emoji: '🍇',
color: Colors.purple.shade50,
),
Product(
name: 'Es Teh Manis',
description: 'Teh dingin manis segar, cocok untuk cuaca panas.',
price: 3000,
emoji: '🍹',
color: Colors.orange.shade50,
),
Product(
name: 'Es Teh Sisri Gula Batu',
description: 'Teh Sisri asli dengan gula batu, rasa khas dan menyegarkan.',
price: 2000,
emoji: '🍵',
color: Colors.green.shade50,
),
Product(
name: 'Pop Ice Chociato',
description: 'Minuman es dengan rasa chociato yang creamy dan manis, cocok diminum saat santai.',
price: 4000,
emoji: '🍫',
color: Colors.brown.shade50,
),
];
final List<CartItem> cart = [];
// Fungsi menambah ke keranjang
void addToCart(Product product) {
setState(() {
final existingIndex =
cart.indexWhere((item) => item.product.name == product.name);
if (existingIndex >= 0) {
cart[existingIndex] = CartItem(
product: product,
quantity: cart[existingIndex].quantity + 1,
);
} else {
cart.add(CartItem(product: product, quantity: 1));
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Tukang Es Kawan Baru')),
body: ListView.builder(
itemCount: products.length,
itemBuilder: (context, index) {
final product = products[index];
return Card(
color: product.color,
child: ListTile(
leading: Text(product.emoji, style: const TextStyle(fontSize: 28)),
title: Text(product.name),
subtitle: Text(product.description),
trailing: ElevatedButton(
onPressed: () => addToCart(product),
child: const Text('Tambah'),
),
),
);
},
),
);
}
}
---
🎯 Penutup
Dengan kode di atas, kita bisa membuat aplikasi sederhana untuk daftar menu minuman segar yang bukan hanya terlihat menarik, tapi juga fungsional dengan fitur keranjang belanja dan checkout via WhatsApp.
Aplikasi seperti ini bisa dikembangkan lebih lanjut untuk usaha kecil, UMKM, ataupun sekadar latihan belajar Flutter.
Comments
Post a Comment