🚀 Belajar Flutter dari Nol: Membuat Aplikasi To-Do List di DartPad

Praktik Flutter Pemula Kelas 11 RPL — Belajar Coding dengan Membuat Aplikasi Nyata

Belajar pemrograman akan terasa jauh lebih menyenangkan ketika kita tidak hanya membaca teori, tetapi langsung membuat sesuatu yang bisa digunakan.

Pada pembelajaran Flutter kali ini, kita akan membuat sebuah aplikasi sederhana namun sangat penting untuk memahami konsep dasar pemrograman aplikasi:

📱 To-Do List — Aplikasi untuk mencatat dan mengelola daftar tugas.

Walaupun terlihat sederhana, aplikasi To-Do List sebenarnya mengajarkan banyak konsep fundamental yang nantinya akan digunakan dalam aplikasi yang lebih kompleks.

Mulai dari membuat tampilan, menerima input pengguna, menyimpan data sementara, mengubah status tugas, hingga menghapus data.

Dan yang menarik...

Kita tidak perlu menginstal Flutter terlebih dahulu.

Kita akan menggunakan DartPad.

---

🎯 Apa Itu DartPad?

DartPad adalah lingkungan pemrograman online yang memungkinkan kita menulis dan menjalankan kode Dart langsung dari browser.

DartPad juga mendukung Flutter sehingga kita dapat mencoba membuat aplikasi Flutter tanpa harus melakukan setup Flutter SDK, Android Studio, emulator, dan berbagai konfigurasi lainnya.

Cukup buka:

DartPad — dartpad.dev

Kemudian pilih lingkungan Flutter.

Secara sederhana alurnya:

Browser → DartPad → Tulis kode Flutter → Run → Aplikasi tampil

Inilah yang membuat DartPad sangat cocok digunakan pada tahap awal pembelajaran Flutter.

---

💡 Mengapa Kita Membuat To-Do List?

Pertanyaannya:

"Kenapa tidak langsung membuat aplikasi yang lebih keren?"

Karena dalam belajar pemrograman, yang paling penting bukan seberapa besar aplikasi yang dibuat.

Yang lebih penting adalah:

Apakah kita memahami konsep yang digunakan untuk membuatnya?

To-Do List memiliki konsep yang sangat lengkap untuk pemula.

Dengan satu proyek, siswa dapat belajar:

• Dart

• Flutter

• Widget

• StatefulWidget

• setState()

• TextField

• TextEditingController

• List

• ListView

• Checkbox

• IconButton

• Event

• Function

• Conditional

• Data manipulation

• UI design

Konsep-konsep tersebut nantinya akan menjadi fondasi ketika membuat aplikasi:

• Absensi

• Kas kelas

• Jadwal pelajaran

• Catatan

• Inventaris

• Aplikasi transaksi

• Aplikasi CRUD

• Aplikasi dengan database

---

🧠 Gambaran Aplikasi yang Akan Dibuat

Aplikasi yang kita buat memiliki konsep sederhana.

Pengguna dapat:

1. Menulis tugas.

2. Menekan tombol Tambah.

3. Tugas muncul dalam daftar.

4. Mencentang tugas yang sudah selesai.

5. Menghapus tugas.

6. Melihat jumlah tugas yang sudah selesai.

Contohnya:

┌─────────────────────────────┐
│       MY TO-DO LIST         │
│  Kelola tugasmu hari ini    │
├─────────────────────────────┤
│ [ Belajar Flutter       ] + │
├─────────────────────────────┤
│ ☑ Mengerjakan tugas Dart    │
│ ☐ Membaca materi Flutter    │
│ ☐ Membuat latihan coding    │
│ ☐ Mengerjakan LKPD         │
├─────────────────────────────┤
│ 1 dari 4 tugas selesai      │
└─────────────────────────────┘

Sederhana?

Ya.

Tetapi dari aplikasi sederhana inilah kita mulai memahami bagaimana aplikasi sebenarnya bekerja.

---

🧩 Konsep Utama: UI dan State

Salah satu konsep penting yang perlu dipahami siswa adalah State.

Bayangkan aplikasi To-Do List kita.

Awalnya:

Belum ada tugas

Kemudian pengguna menambahkan:

Belajar Flutter

Maka tampilan berubah:

☐ Belajar Flutter

Kemudian pengguna mencentangnya:

☑ Belajar Flutter

Tampilan berubah lagi.

Artinya terdapat data yang berubah selama aplikasi berjalan.

Data yang dapat berubah inilah yang disebut state.

Flutter menyediakan StatefulWidget untuk bagian antarmuka yang datanya dapat berubah.

---

🔄 Memahami setState()

Di sinilah salah satu konsep penting Flutter muncul:

setState(() {
  // ubah data
});

Misalnya:

setState(() {
  tasks.add(task);
});

Artinya kita mengubah data tasks, kemudian memberi tahu Flutter bahwa state berubah sehingga UI perlu diperbarui.

Dokumentasi Flutter menjelaskan bahwa setState() digunakan untuk memberi tahu framework bahwa state internal telah berubah dan perubahan tersebut dapat memengaruhi tampilan.

Secara sederhana:

User melakukan aksi
        ↓
Data berubah
        ↓
setState()
        ↓
Flutter membangun ulang UI
        ↓
Tampilan berubah

Ini adalah salah satu konsep paling penting yang harus dipahami siswa sebelum masuk ke aplikasi yang lebih kompleks.

---

🏗️ Struktur Dasar Aplikasi

Aplikasi Flutter kita dimulai dari:

void main() {
  runApp(const MyApp());
}

main() adalah titik awal program.

Kemudian:

runApp()

digunakan untuk menjalankan aplikasi Flutter.

Kita kemudian membuat:

class MyApp extends StatelessWidget

Sebagai widget utama aplikasi.

Namun halaman To-Do List akan menggunakan:

StatefulWidget

Mengapa?

Karena daftar tugas dapat berubah.

---

📦 Data To-Do List

Untuk tahap awal kita belum menggunakan database.

Kita cukup menggunakan:

List<Map<String, dynamic>>

Contohnya:

final List<Map<String, dynamic>> tasks = [
  {
    'title': 'Belajar Flutter',
    'done': false,
  },
];

Data tersebut mempunyai dua informasi:

title → nama tugas
done  → status tugas

Sehingga satu tugas dapat direpresentasikan seperti:

{
  title: "Belajar Flutter",
  done: false
}

Jika sudah selesai:

{
  title: "Belajar Flutter",
  done: true
}

Dari sini siswa mulai belajar bahwa aplikasi sebenarnya bekerja menggunakan data.

---

✍️ Menerima Input dari Pengguna

Bagaimana pengguna memasukkan tugas?

Kita menggunakan:

TextField()

Contohnya:

TextField(
  controller: controller,
)

TextEditingController digunakan untuk mengambil teks yang dimasukkan pengguna.

Misalnya pengguna mengetik:

Mengerjakan tugas Flutter

Maka kita dapat mengambilnya dengan:

controller.text

Kemudian memasukkannya ke dalam list.

---

➕ Menambahkan Tugas

Logika tambah tugas sebenarnya sangat sederhana.

void addTask() {
  if (controller.text.isEmpty) return;

  setState(() {
    tasks.add({
      'title': controller.text,
      'done': false,
    });
  });

  controller.clear();
}

Perhatikan alurnya.

1. Cek input

if (controller.text.isEmpty) return;

Jika kosong, jangan lakukan apa-apa.

2. Tambahkan data

tasks.add(...)

3. Perbarui UI

setState(...)

4. Kosongkan TextField

controller.clear();

Ini adalah contoh sederhana bagaimana input pengguna diproses menjadi data aplikasi.

---

☑️ Mengubah Status Tugas

Misalnya pengguna mencentang:

☐ Belajar Flutter

Menjadi:

☑ Belajar Flutter

Kita dapat menggunakan:

Checkbox(
  value: task['done'],
  onChanged: (value) {
    setState(() {
      task['done'] = value;
    });
  },
)

Ketika checkbox berubah:

Checkbox
   ↓
onChanged
   ↓
ubah task['done']
   ↓
setState()
   ↓
UI diperbarui

Siswa sebenarnya sedang belajar konsep event-driven programming.

---

🗑️ Menghapus Tugas

Untuk menghapus data kita dapat menggunakan:

tasks.removeAt(index);

Contohnya:

IconButton(
  icon: const Icon(Icons.delete),
  onPressed: () {
    setState(() {
      tasks.removeAt(index);
    });
  },
)

Konsepnya:

Klik tombol hapus
       ↓
onPressed
       ↓
removeAt(index)
       ↓
setState()
       ↓
UI berubah

---

🎨 Membuat UI Lebih Kekinian

Belajar pemrograman bukan berarti aplikasi harus terlihat membosankan.

Kita dapat menggunakan beberapa widget Flutter seperti:

• Scaffold

• AppBar

• Container

• Card

• Text

• TextField

• ElevatedButton

• IconButton

• Checkbox

• ListView

• Column

• Row

• Padding

• SizedBox

Flutter memang dibangun menggunakan konsep widget, sehingga tampilan aplikasi dapat disusun dari kombinasi berbagai widget.

Siswa tidak perlu menghafal semuanya sekaligus.

Yang penting adalah memahami:

Widget apa yang digunakan dan mengapa widget tersebut digunakan?

---

🧪 Praktik Hari Ini

Sekarang saatnya praktik.

Buka:

DartPad

Pilih Flutter.

Kemudian hapus kode contoh yang tersedia.

Masukkan kode aplikasi To-Do List yang telah disiapkan guru.

Klik:

Run ▶️

Jika berhasil, aplikasi akan tampil di bagian preview.

DartPad menyediakan editor, analisis kode, autocomplete, formatter, serta output aplikasi Flutter langsung di browser.

---

🎯 Tantangan untuk Siswa

Setelah aplikasi berhasil berjalan, jangan berhenti di tahap:

"Pak, sudah berhasil."

😄

Sekarang masuk ke tahap yang lebih menarik.

Challenge 1 — Ubah Judul

Ubahlah:

My To-Do List

menjadi nama aplikasi kalian sendiri.

Contoh:

TaskKu

atau:

Daily Task

---

Challenge 2 — Tambahkan Jumlah Tugas

Tampilkan:

Total tugas: 5

Petunjuk:

Gunakan:

tasks.length

---

Challenge 3 — Hitung Tugas Selesai

Buat tampilan:

3 / 5 tugas selesai

Untuk menyelesaikan tantangan ini siswa perlu belajar bagaimana menghitung data berdasarkan kondisi.

---

Challenge 4 — Buat Tugas Berwarna

Jika tugas selesai:

Belajar Flutter

dapat diberi efek coret.

Petunjuk:

Gunakan:

TextDecoration.lineThrough

---

Challenge 5 — Empty State

Bagaimana jika belum ada tugas?

Jangan hanya menampilkan layar kosong.

Buat tampilan:

🎯
Belum ada tugas

Yuk tambahkan tugas pertamamu!

Ini mulai membawa siswa mengenal konsep UX — User Experience.

---

🧠 Apa yang Sebenarnya Dipelajari?

Mungkin siswa berpikir:

"Hari ini kita cuma membuat To-Do List."

Padahal sebenarnya banyak konsep yang dipelajari.

Konsep	Penerapan
Dart	Bahasa pemrograman
Flutter	Framework UI
Widget	Membuat tampilan
StatelessWidget	UI yang tidak memiliki perubahan state
StatefulWidget	UI dengan data yang dapat berubah
setState()	Memperbarui UI setelah state berubah
List	Menyimpan banyak tugas
Map	Menyimpan informasi tugas
TextField	Input pengguna
Controller	Mengambil input
Function	Membuat logika
Event	Merespons tindakan pengguna
ListView	Menampilkan daftar
Checkbox	Status selesai
IconButton	Tombol aksi
Conditional	Logika berdasarkan kondisi

Dengan kata lain:

Satu aplikasi kecil dapat menjadi laboratorium untuk mempelajari banyak konsep pemrograman.

---

🚀 Dari To-Do List Menuju Aplikasi Profesional

Jangan menganggap aplikasi To-Do List ini sebagai tujuan akhir.

Anggaplah ini sebagai proyek pertama.

Setelah memahami versi sederhana, aplikasi dapat dikembangkan menjadi:

Level 1

To-Do List Basic

• Tambah tugas

• Hapus tugas

• Tandai selesai

Level 2

To-Do List Intermediate

• Edit tugas

• Filter tugas

• Search

• Kategori

• Prioritas

Level 3

To-Do List Advanced

• Penyimpanan lokal

• SQLite

• Hive

• Dark Mode

• Notifikasi

• Deadline

Level 4

To-Do List Professional

• Login

• Firebase

• Cloud Database

• Sinkronisasi

• REST API

• Multi-device

Dari sini siswa mulai melihat bagaimana sebuah aplikasi sederhana dapat berkembang menjadi aplikasi yang jauh lebih kompleks.

---

💭 Cara Berpikir Programmer

Ada satu hal yang lebih penting daripada menghafal syntax.

Yaitu:

Cara berpikir.

Ketika membuat fitur "Tambah Tugas", jangan langsung berpikir:

"Kode Flutter-nya apa?"

Tetapi pikirkan terlebih dahulu:

Apa inputnya?
       ↓
Bagaimana data disimpan?
       ↓
Apa yang terjadi ketika tombol diklik?
       ↓
Bagaimana data berubah?
       ↓
Bagaimana UI mengetahui perubahan tersebut?

Inilah cara berpikir seorang programmer.

---

🔥 Kesalahan Saat Belajar Flutter yang Harus Dihindari

❌ Hanya Copy-Paste

Kode berjalan bukan berarti kita memahami kode.

❌ Takut Error

Error adalah bagian normal dari proses belajar programming.

Bahkan error adalah salah satu guru terbaik bagi programmer.

❌ Menghafal Semua Widget

Tidak perlu menghafal ratusan widget.

Pahami konsepnya.

❌ Langsung Membuat Aplikasi Besar

Mulailah dari:

Hello World
↓
Counter
↓
To-Do List
↓
CRUD
↓
Database
↓
API
↓
Aplikasi Kompleks

---

🎓 Kesimpulan

Membuat To-Do List mungkin terlihat sederhana.

Namun untuk siswa kelas 11 RPL yang baru belajar Flutter, proyek ini merupakan latihan yang sangat bagus karena mempertemukan Dart, Flutter, UI, data, event, state, dan logika program dalam satu aplikasi.

Hal terpenting yang perlu diingat adalah:

Jangan hanya belajar bagaimana membuat aplikasi. Belajarlah memahami bagaimana aplikasi bekerja.

Dari sebuah:

TextField

kita belajar input.

Dari:

Button

kita belajar event.

Dari:

List

kita belajar data.

Dari:

setState()

kita belajar perubahan state.

Dan dari:

Flutter

kita belajar bagaimana semuanya dirangkai menjadi sebuah aplikasi.

Hari ini mungkin hanya:

"Membuat To-Do List."

Tetapi dari proyek sederhana inilah perjalanan menjadi developer aplikasi mobile dimulai. 🚀

---

📚 Referensi Belajar

Untuk memperdalam pembelajaran, siswa dapat menggunakan dokumentasi resmi Flutter dan Dart. Dokumentasi Flutter juga menyediakan jalur untuk mencoba Flutter secara online melalui DartPad.

DartPad — mencoba Dart & Flutter langsung di browser

Flutter Documentation

Dart Documentation

---

📝 Refleksi Pembelajaran

Sebelum mengakhiri pembelajaran, coba jawab pertanyaan berikut:

1. Apa perbedaan StatelessWidget dan StatefulWidget?

2. Mengapa aplikasi To-Do List membutuhkan state?

3. Apa fungsi setState()?

4. Apa fungsi TextEditingController?

5. Mengapa kita menggunakan List?

6. Apa fungsi onPressed?

7. Apa fungsi onChanged pada Checkbox?

8. Bagaimana cara menghapus data dari List?

9. Apa yang terjadi ketika data berubah?

10. Fitur apa yang ingin kalian tambahkan ke aplikasi To-Do List?

Pertanyaan terakhir adalah yang paling penting.

Karena programmer yang baik bukan hanya mampu mengikuti tutorial.

Programmer yang baik mampu membayangkan fitur berikutnya. 🚀