Lomba Kicau Mania Dengan Dart Flutter

-

Tutorial Flutter: Bikin Aplikasi "Kicau Mania" di zapp.run

Halo temen-temen, di tutorial kali ini gue bakal ngajarin cara bikin aplikasi Flutter sederhana bernama Kicau Mania. Kita bakal ngerjain ini langsung di zapp.run, jadi gak usah repot install apa-apa.

🎯 Apa Itu Kicau Mania?

Kicau Mania adalah aplikasi yang punya 3 halaman utama:

  1. Tim Simdig – menampilkan daftar burung dari tim kita sendiri.

  2. Tim Dhamnis – berisi tim musuh yang punya burung-burung gokil juga.

  3. Arena – tempat adu burung dan kita bisa klik tombol buat nentuin siapa pemenangnya secara acak (random).

🚀 Langkah-langkah Bikin Aplikasi

1. Buka zapp.run

  • Kunjungi: https://zapp.run

  • Pilih Flutter → klik New Project → kasih nama kicau_mania

2. Ganti isi main.dart

  • Di sidebar kiri, buka file main.dart

  • Hapus semua isinya

  • Paste kode yang sudah disiapin (kode lengkap ada di bagian bawah artikel ini)

3. Upload Gambar Burung ke Folder assets

Kita butuh gambar burung-burung buat ditampilin di aplikasi. Buat folder assets, lalu upload gambar-gambar ini:

  • burungabdul.jpeg

  • burung12.jpeg

  • brainrung.jpeg

  • detektif.jpeg

  • burungjawa.jpeg

  • profrung.jpeg

  • pinguin.jpeg

  • bombombini.jpeg

Catatan: Kalau di zapp.run gak bisa upload langsung, bisa pake GitHub atau clone ke VS Code dulu ya.

4. Daftarin Aset di pubspec.yaml

Buka file pubspec.yaml, terus tambahin daftar gambar burung biar bisa dipanggil di aplikasi:

flutter:
  assets:
    - assets/burungabdul.jpeg
    - assets/burung12.jpeg
    - assets/brainrung.jpeg
    - assets/detektif.jpeg
    - assets/burungjawa.jpeg
    - assets/profrung.jpeg
    - assets/pinguin.jpeg
    - assets/bombombini.jpeg

Hati-hati sama spasi! Jangan sampai error karena indentasi salah.

🎮 Cara Gunain Aplikasinya

  • Di halaman Tim Simdig, lo bisa liat burung-burung dari tim lo.

  • Di Tim Dhamnis, musuh-musuh lo siap adu kicau.

  • Di Arena, lo bisa pencet tombol Pemenang buat undi siapa yang menang – hasilnya random yaa!

✨ Fitur yang Ada

  • Navigasi 3 halaman pakai BottomNavigationBar

  • Nampilin data tim dan gambar pakai ListView

  • Animasi pengundian pemenang pake Timer

  • Gambar burung ditampilin lewat assets lokal

📦 Source Code Lengkap

karena kode nya terlalu panjang jadi silahkan kunjungi saja link ini untuk melihat source code nya

https://zapp.run/edit/flutter-z21f8063021f9?entry=lib/main.dart&file=lib/main.dart

dan ini untuk hasil UI nya

https://z21f8063021f9.zapp.page/#/

Kalau lo pengin ganti nama burung, deskripsi, atau jumlah pertandingannya, tinggal modif di bagian ListView masing-masing tim atau List<Map> di PertandinganPage.

Kalau pengin tutorial ini jadi file PDF, tinggal bilang aja, gue buatin juga!

Semoga bermanfaat dan...
Jangan lupa, lebih baik jadi cupu daripada jadi cepu 🐦🔥


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