📝 Membuat To-Do List Sederhana di DartPad
Pernah merasa kewalahan dengan banyaknya tugas yang harus diselesaikan? Salah satu cara sederhana untuk mengatasinya adalah dengan membuat To-Do List.
To-Do List membantu kita mencatat, mengatur, dan menyelesaikan kegiatan secara lebih terencana.
🎯 Apa itu To-Do List?
To-Do List adalah daftar tugas atau kegiatan yang perlu dilakukan dalam jangka waktu tertentu.
Dengan To-Do List, kita bisa mengetahui apa saja yang harus dikerjakan hari ini, mana yang prioritas, dan mana yang bisa dilakukan nanti.
💡 Manfaat Membuat To-Do List
-
Membantu mengatur waktu dengan lebih baik.
-
Meningkatkan fokus dan produktivitas.
-
Menghindari lupa terhadap tugas penting.
-
Memberi rasa puas ketika berhasil mencentang tugas yang sudah selesai.
🧭 Langkah Membuat To-Do List Sederhana di DartPad
-
Buka situs DartPad Flutter di browser.
-
Siapkan tampilan sederhana yang berisi:
-
Kolom untuk menulis tugas.
-
Tombol untuk menambahkan tugas.
-
Daftar tugas yang bisa dicentang jika sudah selesai.
-
Tombol hapus untuk menghapus tugas yang tidak diperlukan.
-
Jalankan proyek, lalu lihat hasilnya langsung di browser.
📱 Hasil Akhir
Setelah dijalankan, aplikasi akan menampilkan daftar tugas sederhana.
Kamu bisa:
Semua dilakukan secara langsung di browser tanpa perlu instal aplikasi apa pun.
Ini untuk kodenya :
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(
title: 'To-Do List Sederhana',
debugShowCheckedModeBanner: false,
theme: ThemeData(
brightness: Brightness.light,
primarySwatch: Colors.teal,
),
home: const ToDoHomePage(),
);
}
}
class ToDoHomePage extends StatefulWidget {
const ToDoHomePage({super.key});
@override
State<ToDoHomePage> createState() => _ToDoHomePageState();
}
class _ToDoHomePageState extends State<ToDoHomePage> {
final List<Map<String, dynamic>> _tasks = [];
final TextEditingController _controller = TextEditingController();
void _addTask() {
if (_controller.text.trim().isEmpty) return;
setState(() {
_tasks.add({'title': _controller.text, 'done': false});
_controller.clear();
});
}
void _toggleTask(int index) {
setState(() {
_tasks[index]['done'] = !_tasks[index]['done'];
});
}
void _deleteTask(int index) {
setState(() {
_tasks.removeAt(index);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('To-Do List Sederhana 📝'),
centerTitle: true,
),
body: Column(
children: [
Padding(
padding: const EdgeInsets.all(12.0),
child: Row(
children: [
Expanded(
child: TextField(
controller: _controller,
decoration: InputDecoration(
hintText: 'Tambah tugas baru...',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
),
onSubmitted: (_) => _addTask(),
),
),
const SizedBox(width: 8),
ElevatedButton(
onPressed: _addTask,
style: ElevatedButton.styleFrom(
backgroundColor: Colors.teal,
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
),
child: const Icon(Icons.add),
),
],
),
),
Expanded(
child: _tasks.isEmpty
? const Center(
child: Text(
'Belum ada tugas. Tambahkan di atas!',
style: TextStyle(fontSize: 16, color: Colors.grey),
),
)
: ListView.builder(
itemCount: _tasks.length,
itemBuilder: (context, index) {
final task = _tasks[index];
return Card(
margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
child: ListTile(
leading: Checkbox(
value: task['done'],
onChanged: (_) => _toggleTask(index),
activeColor: Colors.teal,
),
title: Text(
task['title'],
style: TextStyle(
decoration: task['done']
? TextDecoration.lineThrough
: TextDecoration.none,
color: task['done'] ? Colors.grey : Colors.black,
),
),
trailing: IconButton(
icon: const Icon(Icons.delete_outline),
onPressed: () => _deleteTask(index),
color: Colors.redAccent,
),
),
);
},
),
),
],
),
);
}
}
✨ Kesimpulan
Membuat To-Do List sederhana di DartPad adalah latihan yang bagus untuk belajar Flutter dan logika pemrograman dasar.
Selain bermanfaat untuk belajar coding, kamu juga bisa menggunakannya untuk mengatur aktivitas sehari-hari agar lebih produktif dan teratur.
Komentar
Posting Komentar