Posts

Showing posts from August, 2025

🍧 Tukang Es Kawan Baru – Aplikasi Menu Minuman Kekinian

Image
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 membuatka...

📚 Membuat Aplikasi Jadwal Mengajar dengan Flutter + REST API

Image
  Di era digital saat ini, kebutuhan untuk mengelola jadwal sekolah atau perkuliahan semakin penting. Guru, murid, maupun admin sekolah sering kali kewalahan jika jadwal hanya ditulis di papan tulis atau buku catatan. Oleh karena itu, saya membuat sebuah aplikasi Flutter sederhana bernama “Jadwal Mengajar” yang terhubung dengan REST API (MockAPI) agar data bisa diakses secara online, fleksibel, dan bisa di-update kapan saja. --- ✨ Fitur Utama Aplikasi 1. Login Multi Role Admin → bisa menambah, mengubah, dan menghapus jadwal. Guru → hanya melihat dan logout/login. Murid → langsung masuk tanpa login untuk melihat jadwal. 2. Pengelolaan Jadwal per Hari Senin – Jumat dengan list pelajaran yang bisa di-expand. Menampilkan jam, ruangan, pakaian, dan catatan tambahan. 3. Integrasi API (CRUD) C (Create) → Tambah jadwal baru. R (Read) → Menampilkan jadwal per hari dari MockAPI. U (Update) → Edit jadwal yang sudah ada. D (Delete) → Hapus jadwal tertentu. 4. UI Modern dengan Material Design M...

🎮 Membuat Game Brick Breaker dengan Flutter

Image
  Kalau kamu pernah main game Arkanoid atau Brick Breaker, pasti sudah familiar dengan konsep memantulkan bola untuk menghancurkan blok di layar. Nah, kali ini kita akan membuat versi sederhananya menggunakan Flutter. ✨ Fitur Game Dalam game ini, kamu akan menemukan: Kontrol Paddle: Gerakkan paddle ke kiri atau kanan dengan drag jari. Bola Memantul: Bola akan memantul dari dinding, paddle, dan blok. Blok dengan Nyawa: Beberapa blok perlu dipukul beberapa kali sebelum hancur. Power-up:   Wide Paddle: Paddle melebar sementara.   Multi-ball: Menambah bola ekstra. Sistem Skor & High Score Game Over & Restart Round Baru jika semua blok hancur. 🛠 Penjelasan Struktur Kode 1. State Management – Game menggunakan `StatefulWidget` untuk mengatur posisi bola, paddle, blok, dan power-up secara real-time. 2. Timer Game Loop – Menggunakan `Timer.periodic` untuk memperbarui posisi objek setiap frame (sekitar 60 FPS). 3. Physics Sederhana – Deteksi tabrakan bola dengan dinding, p...

Membuat Desain Halaman Login Mobile dengan Flutter di Web Flutter Zapp.run

Image
 Pendahuluan Pada era digital saat ini, hampir semua aplikasi mobile memerlukan fitur login sebagai pintu masuk bagi pengguna. Desain halaman login yang menarik dan responsif akan meningkatkan pengalaman pengguna serta memberikan kesan profesional pada aplikasi yang kita buat. Dalam artikel ini, kita akan belajar membuat desain halaman login mobile menggunakan Dart Flutter, yang dapat dijalankan langsung di web Flutter Zapp.run tanpa perlu instalasi rumit. Tujuan Pembelajaran Memahami cara membuat tampilan halaman login di Flutter. Menggunakan Widget Flutter seperti Scaffold, AppBar, TextField, dan ElevatedButton. Mendesain tampilan login agar menarik dan responsif. Fitur Desain Halaman Login Tampilan login yang akan kita buat memiliki: AppBar dengan judul Login. Background berwarna hijau untuk memberikan nuansa segar. Lingkaran dengan ikon pengguna di bagian atas form login. Kolom Username dan Password dengan ikon di dalamnya. Tombol Sign In berwarna oranye. Tautan Forgot Password...

Membuat Aplikasi Peta dan Rute Menggunakan Flutter: Praktis & Interaktif

Membuat Aplikasi Peta dan Rute Menggunakan Flutter: Praktis & Interaktif Di era digital saat ini, aplikasi peta dan navigasi sangat membantu kita dalam menemukan lokasi dan mendapatkan rute tercepat menuju tujuan. Kali ini, saya akan membagikan tutorial sederhana membuat aplikasi peta interaktif menggunakan Flutter yang dapat menampilkan lokasi, membuka rute di Google Maps, serta fitur langsung menghubungi via WhatsApp! Fitur Utama Aplikasi Peta interaktif dengan marker lokasi yang bisa dipindah dengan mengetuk peta. Tombol untuk membuka rute ke lokasi tujuan langsung di Google Maps. Tombol untuk menghubungi nomor WhatsApp melalui aplikasi WhatsApp dengan pesan otomatis. Menampilkan dialog informasi koordinat saat marker ditekan. Inti Kode Flutter Kode ini menggunakan beberapa package utama: flutter_map untuk menampilkan peta berbasis OpenStreetMap. latlong2 untuk mengelola koordinat lokasi. url_launcher untuk membuka URL seperti Google Maps dan W...