Membuat Aplikasi To Do List Sederhana Menggunakan Flutter
Membuat Aplikasi To Do List Sederhana Menggunakan Flutter
Pendahuluan
Flutter adalah framework UI open-source dari Google yang memungkinkan pengembang membuat aplikasi Android dan iOS dari satu basis kode. Flutter menggunakan bahasa pemrograman Dart dan menyediakan banyak widget siap pakai untuk membangun antarmuka yang modern dan responsif.
Pada artikel ini, akan dibahas pembuatan aplikasi To Do List sederhana menggunakan Flutter. Aplikasi ini memungkinkan pengguna untuk:
Menambahkan task
Menandai task sebagai selesai
Menghapus task dengan swipe
Menampilkan tampilan UI yang menarik dengan Material 3 dan gradient
Tujuan Aplikasi
Tujuan dari pembuatan aplikasi ini adalah:
Memahami penggunaan StatefulWidget
Mengelola data menggunakan List dan Class Model
Menggunakan Checkbox, Dismissible, dan ListView
Menerapkan desain UI sederhana namun modern
Struktur dan Konsep Aplikasi
Aplikasi To Do List ini menggunakan beberapa konsep utama Flutter:
MaterialApp sebagai root aplikasi
State Management sederhana dengan setState
Class Model (Todo) untuk menyimpan data task
Widget interaktif seperti TextField, Checkbox, dan Dismissible
Gambar to do list:
Source Code Aplikasi:
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(
useMaterial3: true,
colorSchemeSeed: Colors.deepPurple,
),
home: const TodoPage(),
);
}
}
class Todo {
String title;
bool isDone;
Todo({required this.title, this.isDone = false});
}
class TodoPage extends StatefulWidget {
const TodoPage({super.key});
@override
State<TodoPage> createState() => _TodoPageState();
}
class _TodoPageState extends State<TodoPage> {
final List<Todo> todos = [];
final TextEditingController controller = TextEditingController();
void addTodo() {
if (controller.text.trim().isEmpty) return;
setState(() {
todos.add(Todo(title: controller.text));
controller.clear();
});
}
void toggleTodo(int index) {
setState(() {
todos[index].isDone = !todos[index].isDone;
});
}
void deleteTodo(int index) {
setState(() {
todos.removeAt(index);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('To Do List Desta'),
centerTitle: true,
backgroundColor: Colors.deepPurple,
foregroundColor: Colors.white,
),
body: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xFFB388FF),
Color(0xFFEDE7F6),
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(16),
child: Row(
children: [
Expanded(
child: TextField(
controller: controller,
decoration: InputDecoration(
hintText: 'Tambah task...',
filled: true,
fillColor: Colors.white,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
),
),
),
),
const SizedBox(width: 8),
FloatingActionButton(
onPressed: addTodo,
backgroundColor: Colors.deepPurple,
child: const Icon(Icons.add),
),
],
),
),
Expanded(
child: todos.isEmpty
? const Center(
child: Text(
'Belum ada task ✨',
style: TextStyle(fontSize: 16),
),
)
: ListView.builder(
itemCount: todos.length,
itemBuilder: (context, index) {
final todo = todos[index];
return Dismissible(
key: Key(todo.title + index.toString()),
direction: DismissDirection.endToStart,
onDismissed: (_) => deleteTodo(index),
background: Container(
margin: const EdgeInsets.symmetric(
horizontal: 16, vertical: 6),
decoration: BoxDecoration(
color: Colors.redAccent,
borderRadius: BorderRadius.circular(12),
),
alignment: Alignment.centerRight,
padding: const EdgeInsets.only(right: 20),
child: const Icon(
Icons.delete,
color: Colors.white,
),
),
child: Card(
color: todo.isDone
? Colors.green.shade100
: Colors.white,
margin: const EdgeInsets.symmetric(
horizontal: 16, vertical: 6),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
child: ListTile(
leading: Checkbox(
value: todo.isDone,
activeColor: Colors.green,
onChanged: (_) => toggleTodo(index),
),
title: Text(
todo.title,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
decoration: todo.isDone
? TextDecoration.lineThrough
: null,
color: todo.isDone
? Colors.green.shade800
: Colors.black87,
),
),
),
),
);
},
),
),
],
),
),
);
}
}
Kesimpulan:
Aplikasi To Do List sederhana ini menunjukkan bagaimana Flutter dapat digunakan untuk membangun aplikasi yang fungsional, interaktif, dan menarik secara visual. Dengan konsep dasar ini, aplikasi dapat dikembangkan lebih lanjut seperti:
Penyimpanan data lokal (SharedPreferences / SQLite)
Fitur edit task
Filter task (selesai & belum)
Integrasi state management seperti Provider atau Bloc
Komentar
Posting Komentar