MEMBUAT APLIKASI TO-DO LIST FLUTTER
✨ Pendahuluan
Halo sobat developer! 👋
Kali ini kita akan belajar cara membuat aplikasi To-Do List dengan Flutter yang tampilannya aesthetic, minimalis, dan elegan, tanpa perlu menginstal apa pun di komputer kamu.
Cukup buka DartPad.dev, tempelkan kode-nya, dan aplikasi siap dijalankan! 🚀
HASIL:
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: 'Aesthetic To-Do List',
debugShowCheckedModeBanner: false,
theme: ThemeData(
useMaterial3: true,
colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xFF9C8CFC)),
fontFamily: 'Poppins',
),
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>> _tasks = [];
void _addTask() {
if (_controller.text.trim().isEmpty) return;
setState(() {
_tasks.add({'text': _controller.text.trim(), '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(
backgroundColor: const Color(0xFFF7F6FB),
appBar: AppBar(
title: const Text(
'✨ To-Do List',
style: TextStyle(fontWeight: FontWeight.bold, color: Color(0xFF5A4FCF)),
),
centerTitle: true,
elevation: 0,
backgroundColor: Colors.transparent,
),
body: Padding(
padding: const EdgeInsets.all(16),
child: Column(
children: [
// Input field
Row(
children: [
Expanded(
child: TextField(
controller: _controller,
decoration: InputDecoration(
hintText: 'Tambahkan tugas...',
filled: true,
fillColor: Colors.white,
contentPadding: const EdgeInsets.symmetric(horizontal: 16),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide.none,
),
),
onSubmitted: (_) => _addTask(),
),
),
const SizedBox(width: 10),
FloatingActionButton.small(
onPressed: _addTask,
backgroundColor: const Color(0xFF7C73E6),
child: const Icon(Icons.add, color: Colors.white),
),
],
),
const SizedBox(height: 20),
Expanded(
child: _tasks.isEmpty
? const Center(
child: Text(
'Belum ada tugas 🌸',
style: TextStyle(color: Colors.black54, fontStyle: FontStyle.italic),
),
)
: ListView.builder(
itemCount: _tasks.length,
itemBuilder: (context, index) {
final task = _tasks[index];
return Dismissible(
key: ValueKey(task),
direction: DismissDirection.startToEnd,
onDismissed: (_) => _deleteTask(index),
background: Container(
alignment: Alignment.centerLeft,
padding: const EdgeInsets.only(left: 20),
decoration: BoxDecoration(
color: Colors.redAccent.shade100,
borderRadius: BorderRadius.circular(12),
),
child: const Icon(Icons.delete, color: Colors.white),
),
child: Container(
margin: const EdgeInsets.symmetric(vertical: 6),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
color: Colors.black12,
blurRadius: 5,
offset: const Offset(0, 3),
),
],
),
child: ListTile(
leading: Checkbox(
activeColor: const Color(0xFF9C8CFC),
value: task['done'],
onChanged: (_) => _toggleTask(index),
),
title: Text(
task['text'],
style: TextStyle(
fontSize: 16,
decoration: task['done']
? TextDecoration.lineThrough
: TextDecoration.none,
color: task['done']
? Colors.grey
: const Color(0xFF4B4A6A),
),
),
trailing: IconButton(
icon: const Icon(Icons.delete_outline,
color: Color(0xFFEB6F92)),
onPressed: () => _deleteTask(index),
),
),
),
);
},
),
),
],
),
),
);
}
}
💡 Apa itu Flutter?
Flutter adalah framework buatan Google yang digunakan untuk membuat aplikasi mobile, web, dan desktop dari satu basis kode.
Kelebihannya adalah UI cantik, performa cepat, dan mudah dipelajari — cocok banget buat kamu yang suka desain clean dan modern.
🧠 Tentang Proyek Ini
Dalam proyek kecil ini, kita akan membuat aplikasi To-Do List sederhana dengan fitur:
-
Tambah tugas 📝
-
Centang tugas yang sudah selesai ✅
-
Hapus tugas ❌
-
Desain lembut dan elegan 🌸
Aplikasi ini cocok untuk pemula yang ingin belajar dasar StatefulWidget, ListView, dan State Management sederhana di Flutter.
💻 Kode Lengkap
Kamu bisa menyalin dan menjalankan kode ini langsung di dartpad.dev:
🌈 Hasil Akhir
Setelah dijalankan, kamu akan mendapatkan aplikasi To-Do List yang clean dan cantik.
Kamu bisa menambahkan tugas baru, menandai tugas yang selesai, dan menghapusnya dengan mudah.
📚 Kesimpulan
Dengan Flutter, kamu bisa membuat aplikasi yang menarik hanya dengan beberapa baris kode.
Proyek To-Do List ini adalah langkah awal yang bagus untuk memahami dasar pengembangan aplikasi dengan Flutter.
Jangan lupa kembangkan lagi dengan fitur seperti penyimpanan lokal atau tema gelap ya! 🌙
💬 Penutup
Semoga tutorial ini bermanfaat buat kamu yang ingin belajar Flutter dengan cara yang menyenangkan.
Kalau kamu suka artikel ini, jangan lupa bagikan ke teman-temanmu dan tulis komentar di bawah 💜
Selamat ngoding & tetap semangat belajar! 🚀
Komentar
Posting Komentar