TO-DO-QUEST

-

🎮 Pixel Quest To-Do — Ubah Daftar Tugasmu Jadi Petualangan Seru!

Pernah ngerasa bosan pakai aplikasi to-do list yang tampilannya itu-itu aja? Nah, Pixel Quest To-Do hadir buat ngubah cara kamu nyelesain tugas jadi lebih seru — kaya main game RPG pixel art!

🌟 Konsep Aplikasi

Pixel Quest To-Do adalah aplikasi to-do list berbasis web (dibuat dengan Flutter) yang dikemas dengan gaya RPG. Kamu bisa memilih karakter emoji favoritmu, lalu setiap tugas yang berhasil diselesaikan akan menambah XP untuk naik level. Jadi, bukan cuma checklist biasa — tapi benar-benar terasa seperti petualangan kecil setiap hari!

  • 🎭 Pilih Karakter — mulai dari penyihir, elf, astronot, dan lainnya.
  • 📝 Buat dan kelola misi harian (tugas-tugasmu).
  • ⚡ Dapatkan XP setiap kali menyelesaikan misi.
  • ⬆️ Naik Level setelah XP penuh!
  • 💾 Data tersimpan otomatis di local storage browser.
  • 🎨 Tema pixel RPG gelap biar vibes-nya kaya game retro.

🧱 Teknologi yang Digunakan

Aplikasi ini dibangun menggunakan:

  • ⚙️ Flutter Web — untuk membuat aplikasi cross-platform.
  • 🗂️ dart:html — menyimpan data ke localStorage.
  • 🎮 Material Design — untuk tampilan yang rapi dan responsif.

💡 Cara Kerja Singkat

  1. Pilih karakter emoji favoritmu.
  2. Tambahkan tugas baru lewat kolom input.
  3. Centang tugas setelah selesai → kamu dapat XP!
  4. Kalau XP sudah cukup, karaktermu naik level otomatis 🎉.
  5. Semua data tersimpan di browser, jadi kamu gak perlu login apa pun.

🧠 Fitur Cerdas

Aplikasi ini juga punya logika agar XP tidak bisa dieksploitasi. Kalau kamu uncheck tugas yang sudah selesai, XP kamu otomatis berkurang. Artinya, kamu cuma dapat XP sekali per tugas yang benar-benar diselesaikan — adil dan realistis!

🎨 Tampilan & Desain

Tema utama menggunakan palet warna gelap dengan sentuhan cyan futuristik untuk efek RPG modern: 

#1A1A1A (background)
#393E46 (card)
#00ADB5 (accent)
#FFFFFF (text)

UI-nya dibuat simpel tapi tetap ada nuansa game, lengkap dengan emoji karakter besar di bagian atas dan progress bar XP di bawahnya. Semua terasa ringan karena berjalan langsung di browser.

🚀 Kesimpulan

Pixel Quest To-Do bukan sekadar aplikasi catatan tugas — tapi juga cara baru untuk memotivasi diri sendiri. Setiap checklist yang kamu buat bukan cuma kerjaan yang selesai, tapi juga langkah menuju level baru!

Ingat: setiap hari adalah petualangan baru, dan kamu adalah hero-nya ⚔️

📦 Source Code & Preview

🔗 Source Code: Klik di sini
🌐 Live Preview: Jalankan di Zapp.run

Ditulis oleh Fathan Gunawan — dibuat menggunakan Flutter di Zapp.run.

Komentar

Posting Komentar

Postingan populer dari blog ini

-
Gambar
📱 Widget Dasar Flutter/Dart 1 Stateless Widget Widget Stateless adalah widget yang tidak dapat berubah (immutable). Cocok untuk menampilkan konten statis yang tidak perlu diperbarui berdasarkan interaksi pengguna. 💡 Lihat Contoh Kode Dart Code - Stateless Widget Salin Kode class MyStatelessWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Container( padding: EdgeInsets.all(20), child: Text( 'Halo, saya Stateless Widget!', style: TextStyle(fontSize: 18), ), ); } } 2 Stateful Widget Widget Stateful adalah widget yang dapat berubah (mutable). Digunakan ketika widget perlu diperbarui berdasarkan interaksi pengguna atau data yang berubah. 💡 Lihat Contoh Kode Dart Code - Stateful Widget Sa...
Baca selengkapnya

Kunci Jawaban Soal Pilihan Ganda Flutter UI (State Management)

-
Gambar
Kunci Jawaban Soal Pilihan Ganda Flutter UI (State Management) Sedikit latihan untuk memahami konsep dasar Flutter seperti Widget , Layout , State Management , dan Animasi . Soal ini cocok buat kamu yang ingin menguji seberapa jauh pemahaman tentang cara kerja UI di Flutter. 📄 Halaman 1 Jawaban: B. MyApp D. Widget tersebut tidak memiliki state yang dapat berubah selama runtime. A. Karena ia memerlukan controller. D. Di dalam TodoListScreenState . C. setState() C. Scaffold C. Column D. Expanded C. Menempatkan FAB di tengah bawah layar. C. SizedBox 📄 Halaman 2 Jawaban: C. TextField B. TextEditingController C. Pengguna menekan tombol "Enter/Done" pada keyboard. C. SnackBar C. AnimatedList A. Memberikan identifikasi unik pada setiap item daftar. D. Card B. ListTile B. Mengubah status selesai/belum selesai dari tugas. B. Teks dicoret dengan garis. 📄 Halaman 3 Jawaban: C. BoxDecoration dengan LinearGradient ...
Baca selengkapnya

🎮 Review Aplikasi Flutter: Pixel Quest To-Do

-
Gambar
🎮 Review Aplikasi Flutter: Pixel Quest To-Do 1️⃣ Halaman Pemilihan Karakter 📸 Screenshot Tampilan 💻 Potongan Kode Wrap( spacing: 16, children: _emojis.map((e) { final selected = _selected == e; return GestureDetector( onTap: () => setState(() => _selected = e), child: AnimatedContainer( duration: const Duration(milliseconds: 180), transform: Matrix4.identity()..scale(selected ? 1.06 : 1.0), padding: const EdgeInsets.all(12), decoration: BoxDecoration( color: selected ? const Color(0xFF00ADB5) : const Color(0xFF393E46), borderRadius: BorderRadius.circular(12), border: Border.all( color: selected ? Colors.cyanAccent : Colors.transparent, width: 2), ), child: Text(e, style: const TextStyle(fontSize: 40)), ), ); }).toList(), ) 🧩 Penjelasan Singkat Bagian kode ini menampilkan daftar karakter dalam bentuk e...
Baca selengkapnya