🎮 Review Aplikasi Flutter: Pixel Quest To-Do

🎮 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 emoji menggunakan widget Wrap. Setiap emoji dibungkus GestureDetector agar bisa diklik oleh pengguna. Saat salah satu karakter diklik, emoji itu disimpan ke variabel _selected dengan setState(), dan tampilannya berubah warna serta sedikit membesar berkat AnimatedContainer.

Efek animasi ini membuat pemilihan karakter terasa interaktif dan menyenangkan. Setelah karakter dipilih, tombol "Mulai Petualangan" aktif dan akan membawa pengguna ke halaman utama permainan.

---

2️⃣ Halaman Utama (To-Do List)

📸 Screenshot Tampilan

(Masukkan screenshot halaman utama To-Do List di sini)

💻 Potongan Kode

Column(
  children: [
    LinearProgressIndicator(value: progress, color: accent, backgroundColor: Colors.grey[800], minHeight: 8),
    const SizedBox(height: 12),
    Row(
      children: [
        Expanded(
          child: TextField(
            controller: _controller,
            decoration: InputDecoration(
              hintText: 'Tambah misi...',
              filled: true,
              fillColor: card,
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(12),
                borderSide: BorderSide.none,
              ),
            ),
            style: const TextStyle(color: Colors.white),
            onSubmitted: (_) => _addTask(),
          ),
        ),
        const SizedBox(width: 8),
        ElevatedButton(
          onPressed: _addTask,
          style: ElevatedButton.styleFrom(backgroundColor: accent),
          child: const Icon(Icons.add, color: Colors.black),
        ),
      ],
    ),
    const SizedBox(height: 16),
    Expanded(
      child: _tasks.isEmpty
        ? const Center(child: Text('Belum ada quest — tambahkan sekarang!'))
        : ListView.builder(
            itemCount: _tasks.length,
            itemBuilder: (_, i) {
              final t = _tasks[i];
              final done = t['done'] as bool? ?? false;
              return Card(
                color: card,
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
                child: ListTile(
                  leading: Icon(
                    done ? Icons.check_circle : Icons.radio_button_unchecked,
                    color: done ? accent : Colors.white70,
                  ),
                  title: Text(
                    t['text'] as String,
                    style: TextStyle(
                      color: done ? Colors.grey : Colors.white,
                      decoration: done ? TextDecoration.lineThrough : null,
                    ),
                  ),
                  onTap: () => _toggleTask(i),
                  trailing: IconButton(
                    icon: const Icon(Icons.delete),
                    onPressed: () => _deleteTask(i),
                  ),
                ),
              );
            },
          ),
    ),
  ],
)
  

🧩 Penjelasan Singkat

Kode ini membangun tampilan utama aplikasi, yaitu halaman daftar misi (To-Do List). Pengguna bisa menambahkan misi baru melalui TextField dan tombol “+”. Setiap misi ditampilkan dalam ListView.builder menggunakan kartu (Card) dengan ikon status.

Jika misi disentuh, maka fungsi _toggleTask() akan mengubah status selesai/belum selesai sekaligus menambahkan XP ke karakter. Ada juga progress bar di bagian atas yang menampilkan perkembangan XP menuju level berikutnya.

Semua data disimpan di localStorage agar tetap tersimpan meskipun aplikasi ditutup. Tampilan ini memadukan elemen produktivitas dan sistem level seperti game sehingga membuat pengguna lebih semangat menyelesaikan tugas harian mereka 💪.

✨ Halaman ini menunjukkan bagaimana Flutter bisa digunakan untuk membuat aplikasi produktif yang tetap menyenangkan dan interaktif.