Nama: Dika Saputra Sunandar
Kelas: XI RPL 1
Tanggal: 17 Oktober 2025
Deskripsi Proyek
Proyek ini adalah pembuatan aplikasi To-Do List menggunakan framework Flutter. Aplikasi ini berfungsi untuk mencatat daftar kegiatan atau tugas yang dapat ditambah, dihapus, dan ditandai selesai. Tujuannya agar pengguna dapat mengelola aktivitas harian secara lebih teratur dengan tampilan yang modern dan sederhana.
Kode Program Flutter
import 'package:flutter/material.dart';
void main() {
runApp(const ModernTodoApp());
}
class ModernTodoApp extends StatelessWidget {
const ModernTodoApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Modern To-Do App',
debugShowCheckedModeBanner: false,
theme: ThemeData(
fontFamily: 'Poppins',
useMaterial3: true,
colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),
),
home: const ModernTodoHome(),
);
}
}
class ModernTodoHome extends StatefulWidget {
const ModernTodoHome({super.key});
@override
State<ModernTodoHome> createState() => _ModernTodoHomeState();
}
class _ModernTodoHomeState extends State<ModernTodoHome> {
final List<Map<String, dynamic>> _tasks = [];
final TextEditingController _controller = TextEditingController();
void _addTask() {
if (_controller.text.trim().isEmpty) return;
setState(() {
_tasks.add({'title': _controller.text.trim(), 'isDone': false});
_controller.clear();
});
}
void _toggleTask(int index) {
setState(() {
_tasks[index]['isDone'] = !_tasks[index]['isDone'];
});
}
void _deleteTask(int index) {
setState(() {
_tasks.removeAt(index);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color.fromARGB(255, 225, 233, 249),
appBar: AppBar(
elevation: 0,
backgroundColor: Colors.transparent,
title: const Text(
"To-Do List",
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 22,
color: Colors.black87,
),
),
centerTitle: true,
),
body: Column(
children: [
// Input
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
child: Container(
decoration: BoxDecoration(
gradient: const LinearGradient(
colors: [Color(0xFF667EEA), Color(0xFF764BA2)],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
blurRadius: 6,
offset: const Offset(0, 3),
),
],
),
padding: const EdgeInsets.all(10),
child: Row(
children: [
Expanded(
child: TextField(
controller: _controller,
style: const TextStyle(color: Colors.white),
decoration: const InputDecoration(
hintText: "Tambah tugas baru...",
hintStyle: TextStyle(color: Colors.white70),
border: InputBorder.none,
),
),
),
ElevatedButton(
onPressed: _addTask,
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
padding: const EdgeInsets.all(12),
),
child: const Icon(Icons.add, color: Colors.deepPurple),
),
],
),
),
),
// Daftar tugas
Expanded(
child: _tasks.isEmpty
? const Center(
child: Text(
"Belum ada tugas",
style: TextStyle(color: Colors.grey, fontSize: 16),
),
)
: ListView.builder(
padding: const EdgeInsets.symmetric(horizontal: 16),
itemCount: _tasks.length,
itemBuilder: (context, index) {
final task = _tasks[index];
return AnimatedContainer(
duration: const Duration(milliseconds: 300),
curve: Curves.easeInOut,
margin: const EdgeInsets.symmetric(vertical: 6),
decoration: BoxDecoration(
color: task['isDone']
? Colors.grey[200]
: Colors.white,
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.05),
blurRadius: 6,
offset: const Offset(0, 3),
),
],
),
child: ListTile(
leading: Checkbox(
value: task['isDone'],
onChanged: (_) => _toggleTask(index),
activeColor: Colors.deepPurpleAccent,
),
title: Text(
task['title'],
style: TextStyle(
fontSize: 16,
decoration: task['isDone']
? TextDecoration.lineThrough
: TextDecoration.none,
color: task['isDone']
? Colors.grey
: Colors.black87,
),
),
trailing: IconButton(
icon: const Icon(Icons.delete_rounded,
color: Colors.redAccent),
onPressed: () => _deleteTask(index),
),
),
);
},
),
),
],
),
);
}
}
hasilnya
.png)
Penjelasan Langkah Kegiatan
Proses pembuatan dimulai dari membaca panduan di blog pembelajaran untuk memahami struktur dasar Flutter. Setelah itu dibuat proyek baru bernama todo_app.
Langkah berikutnya adalah menyusun tampilan antarmuka (UI) menggunakan contoh dari blog sebagai acuan, lalu menambahkan fitur utama yaitu menambah, menghapus, dan mencentang tugas.
Aplikasi kemudian diuji di emulator dan perangkat nyata untuk memastikan semua fungsi berjalan dengan baik.
Hasilnya diperlihatkan kepada teman dari jurusan lain untuk mendapat masukan, lalu saya mencatat tanggapan dan membuat rencana perbaikan sesuai saran tersebut.
Umpan Balik dari Teman (NON-RPL)
HASNI (TBS):
Komentar yang saya terima adalah bahwa aplikasinya memiliki tampilan yang menarik, warna yang digunakan enak dilihat, serta desainnya rapi dan mudah digunakan.
Masukan ini menjadi dasar saya untuk memperbaiki tampilan agar terasa lebih interaktif.
Refleksi Diri
Bagian tersulit dalam pembuatan aplikasi ini adalah saat menata tampilan agar rapi dan bisa berfungsi dengan baik di semua perangkat.
Dari proyek ini, saya belajar menyusun struktur aplikasi dengan logika yang jelas serta memahami pentingnya tampilan yang menarik bagi pengguna.
Setelah menerima masukan dari teman, saya berencana menambahkan elemen interaktif supaya tampilannya lebih hidup dan nyaman dilihat.
Penilaian Diri
Saya menilai bahwa saya masih membutuhkan bimbingan dalam beberapa bagian tertentu, terutama dalam mengatur logika dan tampilan agar lebih efisien. Namun secara keseluruhan, saya mulai memahami cara membuat aplikasi Flutter sederhana yang berfungsi dengan baik.
Komentar
Posting Komentar