Membuat Aplikasi To-Do List di DartPad yang Nantinya Bisa Di Generate ke APK
Di era digital seperti sekarang, aplikasi sederhana seperti To-Do List bisa menjadi salah satu proyek yang bagus untuk belajar pemrograman mobile. Selain melatih logika pemrograman, proyek ini juga mengenalkan kita pada konsep UI, state, input data, dan pengelolaan daftar tugas.
Pada tutorial kali ini, kita akan membahas bagaimana membuat aplikasi To-Do List menggunakan Dart dan Flutter, menjalankannya terlebih dahulu melalui DartPad, kemudian mempersiapkannya agar nantinya dapat dikembangkan dan di-generate menjadi aplikasi APK Android.
Catatan penting: DartPad cocok untuk belajar dan menguji kode Flutter secara cepat. Untuk menghasilkan APK Android, proyek nantinya perlu dipindahkan ke project Flutter lokal menggunakan Flutter SDK/Android Studio atau VS Code.
🚀 Apa Itu To-Do List?
To-Do List adalah aplikasi yang digunakan untuk mencatat berbagai tugas atau kegiatan yang harus dilakukan.
Contohnya:
- 📚 Mengerjakan tugas sekolah
- 💻 Belajar coding
- 📝 Membuat laporan
- 🎨 Mengerjakan desain
- 📖 Belajar untuk ujian
Dengan aplikasi ini, pengguna dapat menambahkan tugas, menandai tugas yang sudah selesai, dan menghapus tugas yang tidak diperlukan.
🛠️ Teknologi yang Digunakan
Pada proyek ini kita menggunakan beberapa teknologi:
Dart
Bahasa pemrograman yang digunakan oleh Flutter.
Flutter
Framework dari Google untuk membuat aplikasi dengan satu basis kode yang dapat dikembangkan ke berbagai platform.
DartPad
Editor online yang dapat digunakan untuk mencoba kode Dart dan Flutter tanpa harus langsung membuat project Flutter di komputer.
Android / APK
Hasil akhir yang nantinya dapat digunakan sebagai aplikasi Android setelah project Flutter dipindahkan ke lingkungan pengembangan lokal.
📱 Fitur Aplikasi
Aplikasi To-Do List sederhana yang kita buat akan mempunyai beberapa fitur utama:
- Menampilkan daftar tugas
- Menambahkan tugas baru
- Menandai tugas sebagai selesai
- Menghapus tugas
- Menampilkan tampilan aplikasi yang sederhana dan responsif
Walaupun sederhana, fitur tersebut sudah cukup untuk memahami konsep dasar aplikasi Flutter.
🧠 Konsep Dasar Program
Sebelum masuk ke kode, kita perlu memahami bagaimana aplikasi bekerja.
Alurnya kurang lebih seperti ini:
User membuka aplikasi
⬇️
User mengetik tugas
⬇️
User menekan tombol tambah
⬇️
Tugas masuk ke daftar
⬇️
User dapat mencentang tugas
⬇️
Tugas berubah menjadi selesai
⬇️
User dapat menghapus tugas
Konsep sederhana ini sebenarnya sudah memperkenalkan kita pada proses pengolahan data dalam aplikasi.
💻 Membuat To-Do List dengan Flutter
Berikut contoh kode sederhana yang dapat digunakan untuk mempelajari struktur aplikasi To-Do List Flutter:
import 'package:flutter/material.dart';
void main() {
runApp(const TodoApp());
}
class TodoApp extends StatelessWidget {
const TodoApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'To-Do List',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const TodoPage(),
);
}
}
class TodoPage extends StatefulWidget {
const TodoPage({super.key});
@override
State<TodoPage> createState() => _TodoPageState();
}
class _TodoPageState extends State<TodoPage> {
final TextEditingController controller = TextEditingController();
final List<Map<String, dynamic>> todos = [];
void addTodo() {
if (controller.text.trim().isEmpty) return;
setState(() {
todos.add({
'title': controller.text.trim(),
'completed': false,
});
});
controller.clear();
}
void deleteTodo(int index) {
setState(() {
todos.removeAt(index);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('My To-Do List'),
centerTitle: true,
),
body: Padding(
padding: const EdgeInsets.all(16),
child: Column(
children: [
Row(
children: [
Expanded(
child: TextField(
controller: controller,
decoration: const InputDecoration(
hintText: 'Masukkan tugas...',
border: OutlineInputBorder(),
),
onSubmitted: (_) => addTodo(),
),
),
const SizedBox(width: 10),
ElevatedButton(
onPressed: addTodo,
child: const Icon(Icons.add),
),
],
),
const SizedBox(height: 20),
Expanded(
child: todos.isEmpty
? const Center(
child: Text(
'Belum ada tugas 😊',
style: TextStyle(fontSize: 18),
),
)
: ListView.builder(
itemCount: todos.length,
itemBuilder: (context, index) {
return Card(
child: ListTile(
leading: Checkbox(
value: todos[index]['completed'],
onChanged: (value) {
setState(() {
todos[index]['completed'] = value;
});
},
),
title: Text(
todos[index]['title'],
style: TextStyle(
decoration:
todos[index]['completed']
? TextDecoration.lineThrough
: TextDecoration.none,
),
),
trailing: IconButton(
icon: const Icon(Icons.delete),
onPressed: () {
deleteTodo(index);
},
),
),
);
},
),
),
],
),
),
);
}
}
🔍 Penjelasan Kode
1. main()
Bagian ini merupakan titik awal aplikasi Flutter.
void main() {
runApp(const TodoApp());
}
runApp() digunakan untuk menjalankan widget utama aplikasi.
2. MaterialApp
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'To-Do List',
home: const TodoPage(),
);
MaterialApp digunakan sebagai struktur dasar aplikasi Flutter.
Di dalamnya kita dapat menentukan judul, tema, halaman awal, dan konfigurasi lainnya.
3. StatefulWidget
Pada aplikasi To-Do List, data dapat berubah ketika pengguna menambahkan atau menghapus tugas.
Karena itu kita menggunakan:
class TodoPage extends StatefulWidget
StatefulWidget memungkinkan tampilan aplikasi diperbarui ketika data berubah.
4. Menyimpan Data Tugas
Data tugas disimpan dalam sebuah List:
final List<Map<String, dynamic>> todos = [];
Setiap tugas mempunyai dua informasi:
title
completed
Contohnya:
{
'title': 'Belajar Flutter',
'completed': false,
}
Artinya tugas bernama Belajar Flutter dan belum selesai.
➕ Menambahkan Tugas
Fungsi berikut digunakan untuk menambahkan tugas:
void addTodo() {
if (controller.text.trim().isEmpty) return;
setState(() {
todos.add({
'title': controller.text.trim(),
'completed': false,
});
});
controller.clear();
}
Program mengambil teks dari TextField, kemudian memasukkannya ke dalam list.
setState() sangat penting karena memberitahu Flutter bahwa data telah berubah sehingga tampilan perlu diperbarui.
✅ Menandai Tugas Selesai
Untuk menandai tugas sebagai selesai digunakan widget:
Checkbox(
value: todos[index]['completed'],
)
Ketika checkbox ditekan:
setState(() {
todos[index]['completed'] = value;
});
Status tugas kemudian berubah dari false menjadi true.
Teks tugas juga diberi efek coret menggunakan:
TextDecoration.lineThrough
Dengan begitu pengguna dapat mengetahui tugas mana yang sudah selesai.
🗑️ Menghapus Tugas
Untuk menghapus tugas kita menggunakan:
todos.removeAt(index);
Kemudian setState() digunakan agar perubahan langsung terlihat pada layar.
void deleteTodo(int index) {
setState(() {
todos.removeAt(index);
});
}
🌐 Mengapa Menggunakan DartPad?
DartPad sangat berguna ketika kita sedang belajar karena kita dapat mencoba kode secara cepat tanpa harus langsung melakukan instalasi Flutter secara lengkap.
Kita bisa bereksperimen dengan:
- Widget Flutter
- Layout
- Button
- TextField
- ListView
- StatefulWidget
- State management sederhana
Namun perlu diingat, DartPad bukan tempat utama untuk membuat APK Android.
DartPad lebih cocok digunakan sebagai media belajar dan pengujian kode.
📦 Dari DartPad Menuju APK
Setelah aplikasi berhasil dibuat dan diuji di DartPad, tahap berikutnya adalah memindahkannya menjadi project Flutter.
Secara umum alurnya:
DartPad
↓
Kode Flutter
↓
Flutter Project
↓
Testing di Android
↓
Build APK
↓
Aplikasi Android
Untuk membuat APK, kita membutuhkan lingkungan Flutter yang mendukung proses build Android.
Setelah project Flutter tersedia secara lokal, proses build APK dapat dilakukan menggunakan perintah Flutter:
flutter build apk
Jika proses build berhasil, Flutter akan menghasilkan file APK pada folder output project.
💡 Pengembangan Selanjutnya
Versi yang kita buat masih merupakan versi dasar. Agar terlihat seperti aplikasi sungguhan, kita dapat menambahkan banyak fitur.
Contohnya:
🔐 Login
Pengguna dapat mempunyai akun sendiri.
💾 Penyimpanan Data
Data tugas dapat disimpan sehingga tidak hilang ketika aplikasi ditutup.
🌙 Dark Mode
Pengguna dapat memilih tampilan terang atau gelap.
📅 Deadline
Setiap tugas dapat mempunyai tanggal dan waktu.
🔎 Search
Pengguna dapat mencari tugas tertentu.
🏷️ Kategori
Tugas dapat dikelompokkan menjadi:
- Sekolah
- Pribadi
- Coding
- Project
🔔 Reminder
Aplikasi dapat memberikan pengingat ketika tugas sudah mendekati deadline.
🎯 Kesimpulan
Membuat aplikasi To-Do List merupakan salah satu proyek yang sangat cocok untuk pemula yang sedang belajar Flutter dan Dart.
Dari satu aplikasi sederhana, kita sudah belajar banyak konsep penting seperti:
StatefulWidgetsetState()TextFieldListViewCheckboxButton- List dan Map
- Input pengguna
- Menambah data
- Menghapus data
- Mengubah status data
DartPad dapat digunakan sebagai tempat untuk belajar dan menguji kode Flutter. Setelah aplikasi sudah berjalan dengan baik, project dapat dikembangkan menjadi project Flutter lokal dan selanjutnya di-build menjadi APK Android.
Jadi, jangan menganggap To-Do List hanya sebagai aplikasi sederhana. Di balik tampilannya yang sederhana terdapat banyak konsep pemrograman yang menjadi dasar untuk membuat aplikasi yang lebih kompleks.
Mulai dari aplikasi sederhana, pahami logikanya, lalu kembangkan menjadi aplikasi yang lebih besar. 🚀
👨💻 Penutup
Jika kamu sedang belajar Flutter, jangan hanya membaca kode. Coba ubah kodenya, tambahkan fitur, cari error, dan perbaiki sendiri.
Karena seorang programmer tidak menjadi hebat hanya karena hafal syntax, tetapi karena terbiasa memecahkan masalah melalui kode.
Happy Coding! 💻🚀
Komentar
Posting Komentar