Membuat aplikasi to do list di dart pad

MEMBUAT APLIKASI TO DO LIST DI DART PAD:DARI CODING HINGGA SIAP DI KEMBANGKAN MENJADI APLIKASI

Membuat aplikasi mobile tidak selalu harus dimulai dengan proyek yang kompleks. Salah satu proyek sederhana yang cocok untuk belajar pemrograman aplikasi adalah To-Do List.

Aplikasi To-Do List memungkinkan pengguna mencatat berbagai aktivitas atau pekerjaan yang harus dilakukan, kemudian menandai tugas tersebut sebagai selesai.

Pada tutorial ini, kita akan belajar membuat konsep aplikasi To-Do List menggunakan DartPad. Setelah memahami struktur dan logikanya, project tersebut dapat dikembangkan lebih lanjut menggunakan Flutter hingga nantinya dapat di-build menjadi aplikasi Android atau APK.

1. Apa Itu DartPad?

DartPad adalah editor kode online yang disediakan untuk menjalankan bahasa pemrograman Dart langsung melalui browser.

DartPad cocok digunakan untuk belajar karena kita tidak perlu langsung menginstal berbagai software seperti Android Studio atau Visual Studio Code.

DartPad dapat digunakan untuk mempelajari:

- Dasar-dasar bahasa Dart

- Variabel dan tipe data

- Function

- Class dan object

- List

- Perulangan

- Percabangan

- Logika aplikasi

Namun, perlu diperhatikan bahwa DartPad bukan alat utama untuk menghasilkan file APK Android. DartPad lebih cocok digunakan untuk belajar dan membuat prototipe kode Dart.

Untuk menghasilkan APK, aplikasi nantinya perlu dikembangkan menggunakan Flutter SDK dalam project Flutter.

2. Konsep Aplikasi To-Do List

Sebelum menulis kode, kita perlu menentukan fitur yang akan dibuat.

Versi sederhana aplikasi To-Do List dapat memiliki beberapa fitur berikut:

- Menambahkan tugas

- Menampilkan daftar tugas

- Menandai tugas sebagai selesai

- Menghapus tugas

- Menampilkan status tugas

Contohnya, pengguna memiliki beberapa tugas:

[ ] Belajar Dart

[ ] Membuat aplikasi Flutter

[x] Membaca dokumentasi

Tanda "[x]" menunjukkan bahwa tugas sudah selesai.

3. Membuat Data To-Do

Dalam Dart, daftar tugas dapat disimpan menggunakan "List".

Contoh sederhana:

void main() {

  List<String> todos = [

    "Belajar Dart",

    "Membuat aplikasi Flutter",

    "Mempelajari widget"

  ];

  for (var todo in todos) {

    print(todo);

  }

}

Kode tersebut membuat sebuah list bernama "todos".

Kemudian, menggunakan perulangan "for", setiap tugas ditampilkan satu per satu.

4. Membuat Model To-Do

Agar aplikasi lebih mudah dikembangkan, kita dapat membuat sebuah class bernama "Todo".

class Todo {

  String title;

  bool isDone;

  Todo(this.title, {this.isDone = false});

}

Class tersebut memiliki dua informasi:

- "title" untuk menyimpan nama tugas

- "isDone" untuk mengetahui apakah tugas sudah selesai

Kemudian kita dapat membuat beberapa objek:

void main() {

  Todo todo1 = Todo("Belajar Dart");

  Todo todo2 = Todo("Membuat aplikasi Flutter");

  Todo todo3 = Todo(

    "Membaca dokumentasi",

    isDone: true,

  );

  print(todo1.title);

  print(todo2.title);

  print(todo3.title);

}

Dengan menggunakan class, struktur data aplikasi menjadi lebih rapi.

5. Membuat Daftar To-Do

Selanjutnya kita dapat menyimpan objek "Todo" ke dalam sebuah list.

void main() {

  List<Todo> todos = [

    Todo("Belajar Dart"),

    Todo("Membuat aplikasi Flutter"),

    Todo("Membaca dokumentasi", isDone: true),

  ];

  for (var todo in todos) {

    print(

      "${todo.isDone ? '[x]' : '[ ]'} ${todo.title}",

    );

  }

}

Hasilnya kira-kira:

[ ] Belajar Dart

[ ] Membuat aplikasi Flutter

[x] Membaca dokumentasi

Di sini kita sudah memiliki dasar logika To-Do List.

6. Menambahkan Fungsi untuk Membuat Tugas

Agar kode lebih terstruktur, kita dapat membuat function untuk menambahkan tugas.

List<Todo> todos = [];

void addTodo(String title) {

  todos.add(Todo(title));

}

Kemudian function tersebut dapat digunakan:

void main() {

  addTodo("Belajar Dart");

  addTodo("Membuat aplikasi Flutter");

  addTodo("Mempelajari Flutter");

  for (var todo in todos) {

    print(todo.title);

  }

}

Dengan pendekatan ini, penambahan tugas dapat dilakukan melalui function "addTodo()".

7. Menandai Tugas sebagai Selesai

Kita juga membutuhkan function untuk mengubah status tugas.

Contohnya:

void completeTodo(int index) {

  todos[index].isDone = true;

}

Pengguna dapat menyelesaikan tugas berdasarkan posisi data di dalam list.

Contoh:

void main() {

  addTodo("Belajar Dart");

  addTodo("Membuat aplikasi Flutter");

  completeTodo(0);

  for (var todo in todos) {

    print(

      "${todo.isDone ? '[x]' : '[ ]'} ${todo.title}",

    );

  }

}

Hasilnya:

[x] Belajar Dart

[ ] Membuat aplikasi Flutter

8. Menambahkan Fungsi Menghapus Tugas

Fitur berikutnya adalah menghapus tugas.

Kita dapat menggunakan method "removeAt()":

void deleteTodo(int index) {

  todos.removeAt(index);

}

Contoh:

void main() {

  addTodo("Belajar Dart");

  addTodo("Membuat aplikasi Flutter");

  addTodo("Mempelajari widget");

  deleteTodo(1);

  for (var todo in todos) {

    print(todo.title);

  }

}

Tugas pada index "1" akan dihapus dari list.

9. Contoh Program Lengkap di DartPad

Setelah menggabungkan konsep sebelumnya, kita dapat membuat program sederhana seperti berikut:

class Todo {

  String title;

  bool isDone;

  Todo(this.title, {this.isDone = false});

}

List<Todo> todos = [];

void addTodo(String title) {

  todos.add(Todo(title));

}

void completeTodo(int index) {

  if (index >= 0 && index < todos.length) {

    todos[index].isDone = true;

  }

}

void deleteTodo(int index) {

  if (index >= 0 && index < todos.length) {

    todos.removeAt(index);

  }

}

void showTodos() {

  print("\n=== DAFTAR TUGAS ===");

  if (todos.isEmpty) {

    print("Belum ada tugas.");

    return;

  }

  for (int i = 0; i < todos.length; i++) {

    final todo = todos[i];

    print(

      "$i. ${todo.isDone ? '[x]' : '[ ]'} ${todo.title}",

    );

  }

}

void main() {

  addTodo("Belajar Dart");

  addTodo("Membuat aplikasi Flutter");

  addTodo("Mempelajari widget Flutter");

  showTodos();

  completeTodo(0);

  print("\nSetelah tugas pertama selesai:");

  showTodos();

  deleteTodo(1);

  print("\nSetelah tugas kedua dihapus:");

  showTodos();

}

Kode tersebut dapat digunakan untuk memahami logika dasar aplikasi To-Do List sebelum dibuat menjadi aplikasi dengan tampilan grafis.

10. Dari DartPad ke Aplikasi Flutter

Setelah logika aplikasi berhasil dibuat, langkah berikutnya adalah membuat tampilan menggunakan Flutter.

Perlu dipahami bahwa Dart dan Flutter memiliki fungsi yang berbeda:

Dart adalah bahasa pemrogramannya.

Flutter adalah framework yang digunakan untuk membuat aplikasi dengan menggunakan Dart.

Jadi, alurnya dapat digambarkan seperti berikut:

Dart

  ↓

Memahami logika aplikasi

  ↓

DartPad

  ↓

Membuat dan menguji kode Dart

  ↓

Flutter

  ↓

Membuat UI aplikasi

  ↓

Android Project

  ↓

Build

  ↓

APK

11. Membuat Tampilan To-Do List dengan Flutter

Pada tahap Flutter, data yang sebelumnya hanya ditampilkan melalui "print()" dapat ditampilkan menggunakan widget.

Contohnya, setiap tugas nantinya dapat ditampilkan menggunakan "ListTile".

Konsep tampilannya kira-kira:

+-----------------------------+

| MY TO-DO LIST |

+-----------------------------+

| [ ] Belajar Dart 🗑 |

| [ ] Belajar Flutter 🗑 |

| [x] Membuat project 🗑 |

+-----------------------------+

| + Tambahkan tugas |

+-----------------------------+

Flutter memungkinkan kita membuat tombol, input teks, checkbox, daftar tugas, dan komponen UI lainnya.

12. Widget yang Dapat Digunakan

Beberapa widget Flutter yang cocok untuk aplikasi To-Do List antara lain:

Scaffold

Digunakan sebagai struktur dasar halaman aplikasi.

AppBar

Digunakan untuk membuat bagian header atau judul aplikasi.

TextField

Digunakan agar pengguna dapat memasukkan tugas baru.

ListView

Digunakan untuk menampilkan daftar tugas.

ListTile

Cocok digunakan sebagai item dalam daftar.

Checkbox

Digunakan untuk menandai tugas sebagai selesai.

FloatingActionButton

Dapat digunakan sebagai tombol untuk menambahkan tugas baru.

13. Contoh Struktur UI Flutter

Contoh sederhana struktur halaman dapat dibuat seperti:

Scaffold(

  appBar: AppBar(

    title: Text("My To-Do List"),

  ),

  body: ListView(

    children: [

      ListTile(

        leading: Checkbox(

          value: false,

          onChanged: (value) {},

        ),

        title: Text("Belajar Dart"),

      ),

    ],

  ),

);

Kode tersebut belum menjadi aplikasi To-Do List lengkap, tetapi menunjukkan bagaimana data yang sebelumnya berada di console dapat mulai diubah menjadi tampilan aplikasi.

14. Penyimpanan Data

Pada contoh DartPad, data hanya berada di dalam memori program.

Artinya, ketika aplikasi dihentikan, data tersebut dapat hilang.

Untuk aplikasi sebenarnya, kita membutuhkan penyimpanan data.

Beberapa pilihan yang dapat dipelajari antara lain:

- SharedPreferences

- SQLite

- Hive

- Isar

- Database berbasis cloud

Untuk aplikasi To-Do List sederhana, penyimpanan lokal biasanya sudah cukup.

15. Mengembangkan Menjadi APK

Setelah aplikasi selesai dibuat menggunakan Flutter, project dapat dijalankan pada Android.

Dalam lingkungan Flutter, proses pembuatan APK dapat dilakukan menggunakan perintah:

flutter build apk

Flutter kemudian akan melakukan proses build aplikasi Android.

Untuk kebutuhan distribusi, kita juga dapat mempelajari format Android App Bundle:

flutter build appbundle

Jadi, DartPad digunakan sebagai tempat belajar dan menguji logika Dart, sedangkan proses menghasilkan APK dilakukan pada project Flutter yang memiliki konfigurasi Android.

16. Pengembangan Fitur Berikutnya

Setelah versi dasar selesai, aplikasi To-Do List dapat dikembangkan menjadi lebih menarik.

Beberapa fitur yang dapat ditambahkan:

1. Edit tugas

2. Hapus tugas

3. Filter tugas berdasarkan status

4. Pencarian tugas

5. Kategori tugas

6. Prioritas tugas

7. Deadline

8. Notifikasi pengingat

9. Penyimpanan permanen

10. Dark mode

11. Animasi

12. Sinkronisasi dengan database online

Dengan menambahkan fitur secara bertahap, project sederhana ini dapat menjadi latihan yang cukup lengkap untuk mempelajari Flutter.

17. Kesimpulan

Membuat aplikasi To-Do List merupakan salah satu project yang bagus untuk belajar Dart dan Flutter.

DartPad dapat digunakan sebagai langkah awal untuk memahami logika program seperti:

- Membuat data

- Menggunakan class

- Menggunakan list

- Menambahkan data

- Mengubah status data

- Menghapus data

Setelah konsep tersebut dipahami, kita dapat melanjutkan ke Flutter untuk membuat antarmuka aplikasi yang sebenarnya.

Hal penting yang perlu diingat adalah DartPad sendiri bukan tool untuk mengubah kode menjadi APK. DartPad digunakan untuk belajar dan menguji Dart, sedangkan proses pembuatan APK dilakukan melalui project Flutter dan Android build tools.

Dengan alur tersebut, proses belajar menjadi lebih mudah:

Belajar Dart → Membuat logika To-Do List → Membuat UI Flutter → Menghubungkan data → Menambahkan penyimpanan → Build APK.

Project sederhana seperti To-Do List juga dapat menjadi dasar untuk membuat aplikasi yang lebih kompleks di kemudian hari.