Postingan

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

Gambar
## Pendahuluan Di era digital saat ini, hampir semua aplikasi mobile membutuhkan fitur **login** sebagai pintu masuk bagi pengguna. Halaman login yang didesain dengan baik tidak hanya memberikan kesan **profesional**, tetapi juga meningkatkan **pengalaman pengguna** (user experience). Pada artikel ini, kita akan belajar cara membuat **desain halaman login mobile** menggunakan **Dart Flutter** yang bisa dijalankan langsung di web **Flutter Zapp.run**, tanpa perlu instalasi rumit di komputer. --- ## 🎯 Tujuan Pembelajaran Dengan mengikuti artikel ini, Anda akan: * Memahami cara membuat tampilan halaman login di Flutter. * Mengenal widget Flutter seperti **Scaffold, AppBar, TextField, dan ElevatedButton**. * Mendesain tampilan login agar **menarik, modern, dan responsif**. --- ## ✨ Fitur Desain Halaman Login Halaman login yang dibuat dalam tutorial ini memiliki: ✅ **AppBar** dengan judul *Login*. ✅ **Background hijau** yang memberi nuansa segar. ✅ **Lingkaran dengan ikon pengguna** di bag...
Posting Komentar
Baca selengkapnya

🍲 Aplikasi Jastip Baso Soteng dengan Flutter

Gambar
Halo semuanya! 👋 Di artikel ini saya Afrizal Herlambang mau berbagi project kecil yang saya buat menggunakan **Flutter**. Project ini berupa aplikasi **Jastip Baso Soteng**, yaitu aplikasi sederhana untuk memesan makanan online. Aplikasi ini saya buat dengan tujuan belajar **Flutter Web** dan juga biar lebih mudah kalau ada yang mau pesan jajanan lewat WhatsApp. --- ### ✨ Fitur Utama * Menampilkan daftar menu jajanan (**Baso Soteng, Piscok, Karoket Bihun, dan Donat**). * Bisa menambah/mengurangi jumlah pesanan. * Hitung otomatis total harga pesanan. * Tersedia tombol **Pesan Sekarang** yang langsung terhubung ke WhatsApp penjual. * Desain simpel tapi modern, cocok untuk UMKM kuliner. --- ### 🛠️ Teknologi yang digunakan * **Flutter** (untuk frontend aplikasi) * **Dart** (bahasa pemrograman) * **WhatsApp API (wa.me)** untuk mengirim pesanan --- ### 📸 Tampilan Aplikasi Aplikasi ini tampilannya sederhana, ada list menu dengan foto, deskripsi, dan tombol tambah/kurangi jumlah pesanan. Di...
Posting Komentar
Baca selengkapnya

FLUTTER + MOCKAPI🥀

 Membuat Aplikasi Absensi dengan Flutter & MockAPI Halo semuanya! 👋 Perkenalkan, saya Afrizal Herlambang, dari kelas XII RPL 2. Kali ini saya ingin berbagi pengalaman saya dalam membuat aplikasi absensi sederhana menggunakan Flutter dengan dukungan MockAPI sebagai backend-nya. Kenapa Flutter & MockAPI? Flutter menjadi pilihan saya karena: ✨ Bisa membuat aplikasi multiplatform (Android & iOS) dengan satu codebase. ✨ Tampilan UI mudah dikustomisasi dan terlihat modern. ✨ Banyak library yang mendukung pengembangan. Sementara MockAPI sangat membantu dalam tahap awal pengembangan karena: ⚡ Mudah membuat REST API tanpa harus setup server. ⚡ Bisa membuat schema data sendiri sesuai kebutuhan. ⚡ Sangat cocok untuk testing aplikasi sebelum nanti dihubungkan ke database asli. Schema Absensi Di aplikasi absensi ini, saya membuat schema sederhana seperti berikut: id → nomor unik absensi name → nama siswa date → tanggal absensi timeIn → jam masuk timeOut → jam pulang status → status...
Posting Komentar
Baca selengkapnya

🚀 Project Flutter Web: Lokasi Mie Gacoan dengan Google Maps & WhatsApp 📍📱

Hai teman-teman! 👋 Kali ini aku mau share project Flutter Web yang aku buat untuk tugas, yaitu aplikasi sederhana yang membantu kita menemukan lokasi Mie Gacoan Banjar Mayjen dengan mudah lewat peta Google Maps dan langsung bisa chat via WhatsApp! ✨ Fitur Utama 🗺️ Tampilan peta interaktif menggunakan Google Maps embed iframe 📍 Mendapatkan lokasi kamu secara otomatis (kalau diizinkan browser) 🚗 Tombol navigasi yang langsung mengarahkan kamu ke Gacoan lewat Google Maps 💬 Tombol WhatsApp untuk chat langsung ke nomor Gacoan tanpa ribet 🛠️ Teknologi yang Digunakan 💙 Flutter Web : untuk UI modern dan responsif 🌐 dart:html : akses fitur browser seperti geolocation dan membuka link baru 🗺️ Google Maps Embed API : tampilkan peta tanpa ribet dengan iframe 🔥 Kode Main Code [ https://pastecode.io/s/mx3i4opd] 🎨 Tampilan Aplikasi Aplikasi ini hadir dengan desain yang fresh dan clean, pakai warna merah khas Gacoan, tombol besar yang mudah ditekan, s...
1 komentar
Baca selengkapnya

📱 Aplikasi Jadwal Guru Akatsuki - Solusi Simpel Atur Jadwal Mengajar 🎯

Gambar
✨  Fitur CRUD Kekinian + Tema Akatsuki yang Memukau!  ✨ Halo, guru-guru keren! 👋 Hari ini aku mau share project terbaruku:  Aplikasi Jadwal Guru Akatsuki  - teman setia untuk mengatur jadwal mengajar dengan gaya ninja! ⚡   ---   🌟  Keunggulan Aplikasi 1.  Tema Akatsuki Epic  🖤❤️      - Desain dark mode merah-hitam khas Akatsuki      - Efek gradien dan card tematik   2.  Fitur CRUD Powerfull    ➕ Tambah jadwal super cepat      👀 Lihat jadwal dalam list rapi      ✨ Edit dengan satu klik      🚮 Hapus dengan konfirmasi   3.  User Experience Juara    🎯 Form input simpel      🔄 Scroll smooth untuk banyak jadwal      📱 Responsive di semua device   4.  Tanpa Ribet    🚫 No permission needed      🔄 Dat...
Posting Komentar
Baca selengkapnya

kode program Flutter untuk aplikasi To-Do List dengan fitur CRUD menggunakan database SQLite

  Berikut adalah contoh kode program Flutter untuk aplikasi To-Do List dengan fitur CRUD menggunakan database SQLite: 1. Tambahkan Dependency di pubspec.yaml dependencies: flutter: sdk: flutter sqflite: ^2.3.0 path: ^1.8.0 path_provider: ^2.1.1 2. Model ToDo class ToDo { final int? id; final String title; final String description; ToDo({this.id, required this.title, required this.description}); Map<String, dynamic> toMap() { return { 'id': id, 'title': title, 'description': description, }; } factory ToDo.fromMap(Map<String, dynamic> map) { return ToDo( id: map['id'], title: map['title'], description: map['description'], ); } } 3. Database Helper import 'package:sqflite/sqflite.dart'; import 'package:path/path.dart'; import 'package:path_provider/path_provider.dart'; import 'dart:io'; import 'todo.dart...
2 komentar
Baca selengkapnya