Membuat Todo List Cantik dengan Flutter: UI/UX yang Memukau untuk Aplikasi Produktivitas
Membuat Todo List Cantik dengan Flutter: UI/UX yang Memukau untuk Aplikasi Produktivitas
Bayangkan memiliki asisten pribadi yang tidak hanya membantu mengatur tugas-tugas Anda, tetapi juga menyajikannya dengan tampilan yang elegan dan interaksi yang menyenangkan. Inilah yang akan kita wujudkan hari ini dengan Flutter!
Sebagai developer, kita tahu bahwa pengalaman pengguna (UX) dan antarmuka (UI) yang baik adalah kunci kesuksesan sebuah aplikasi. Mari kita jelajahi bagaimana membuat aplikasi Todo List yang tidak hanya fungsional tapi juga memukau secara visual.
✨ Kenapa Todo List Biasa Itu Membosankan?
Kebanyakan aplikasi todo list tradisional hanya menampilkan daftar tugas sederhana dengan checkbox. Tapi di era modern ini, pengguna mengharapkan lebih - mereka menginginkan pengalaman yang menyenangkan, animasi yang halus, dan desain yang menarik.
Dengan Flutter, kita bisa menciptakan aplikasi yang:
Memiliki animasi yang smooth
Tampilan visual yang konsisten
Interaksi yang intuitif
Pengalaman pengguna yang memorable
🎨 Magic di Balik Kode: UI/UX yang Menawan
Gradient Background yang Menenangkan
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 Cantik',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.deepPurple,
scaffoldBackgroundColor: const Color(0xFFF6F6F6),
fontFamily: 'Helvetica',
useMaterial3: true,
),
home: const TodoHomePage(),
);
}
}
class TodoItem {
String title;
bool isDone;
TodoItem({required this.title, this.isDone = false});
}
class TodoHomePage extends StatefulWidget {
const TodoHomePage({super.key});
@override
State<TodoHomePage> createState() => _TodoHomePageState();
}
class _TodoHomePageState extends State<TodoHomePage> {
final List<TodoItem> _todos = [];
final TextEditingController _controller = TextEditingController();
void _addTodo() {
final text = _controller.text.trim();
if (text.isNotEmpty) {
setState(() {
_todos.add(TodoItem(title: text));
_controller.clear();
});
}
}
void _toggleDone(int index) {
setState(() {
_todos[index].isDone = !_todos[index].isDone;
});
}
void _deleteTodo(int index) {
setState(() {
_todos.removeAt(index);
});
}
Widget _buildTodoCard(TodoItem todo, int index) {
return Card(
elevation: 3,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
margin: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
child: ListTile(
leading: IconButton(
icon: Icon(
todo.isDone ? Icons.check_circle : Icons.radio_button_unchecked,
color: todo.isDone ? Colors.green : Colors.grey,
),
onPressed: () => _toggleDone(index),
),
title: Text(
todo.title,
style: TextStyle(
decoration: todo.isDone ? TextDecoration.lineThrough : null,
fontSize: 18,
color: todo.isDone ? Colors.grey : Colors.black,
),
),
trailing: IconButton(
icon: const Icon(Icons.delete_outline, color: Colors.redAccent),
onPressed: () => _deleteTodo(index),
),
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('To-Do List 📝', style: TextStyle(fontWeight: FontWeight.bold)),
centerTitle: true,
),
body: Column(
children: [
Padding(
padding: const EdgeInsets.all(16),
child: TextField(
controller: _controller,
decoration: InputDecoration(
hintText: 'Tambah tugas baru...',
filled: true,
fillColor: Colors.white,
prefixIcon: const Icon(Icons.add_task),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide.none,
),
),
onSubmitted: (_) => _addTodo(),
),
),
Expanded(
child: _todos.isEmpty
? const Center(
child: Text('Belum ada tugas. Yuk tambah dulu! 😊'),
)
: ListView.builder(
itemCount: _todos.length,
itemBuilder: (context, index) =>
_buildTodoCard(_todos[index], index),
),
),
],
),
floatingActionButton: FloatingActionButton.extended(
onPressed: _addTodo,
label: const Text("Tambah"),
icon: const Icon(Icons.add),
),
);
}
}
Komentar
Posting Komentar