To-do list sederhana
Berikut deskripsi dari gambar yang kamu kirim 👇
Deskripsi Gambar:
Gambar tersebut menampilkan tampilan aplikasi Todo List Cantik yang sedang dijalankan di DartPad, yaitu platform online untuk menulis dan menjalankan kode Flutter secara langsung di browser.
Pada tampilan aplikasi terlihat:
- Judul aplikasi di bagian atas bertuliskan "Todo List Cantik" dengan latar biru cerah, memberikan kesan modern dan bersih.
- Di bawahnya terdapat kolom input teks dengan placeholder "Tambahkan tugas baru...", yang berfungsi untuk menulis nama tugas yang ingin ditambahkan.
- Di sebelah kanan kolom input terdapat tombol bulat berwarna biru dengan ikon “+”, yang digunakan untuk menambahkan tugas baru ke dalam daftar.
- Bagian tengah layar masih kosong, dengan tulisan “Belum ada tugas 😄”, menandakan bahwa pengguna belum menambahkan tugas apa pun.
- Latar belakang aplikasi berwarna abu muda dengan nuansa lembut, menambah kesan minimalis dan elegan pada desain UI/UX.
Secara keseluruhan, tampilan tersebut menggambarkan aplikasi to-do list yang sederhana namun estetik, cocok untuk meningkatkan produktivitas dengan desain yang menarik dan mudah digunakan.
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: 'Todo List App',
theme: ThemeData(
useMaterial3: true,
colorSchemeSeed: Colors.blueAccent,
scaffoldBackgroundColor: const Color(0xFFF3F6FB),
textTheme: const TextTheme(
bodyMedium: TextStyle(fontSize: 16, color: Colors.black87),
),
),
home: const TodoHomePage(),
);
}
}
class TodoHomePage extends StatefulWidget {
const TodoHomePage({super.key});
@override
State<TodoHomePage> createState() => _TodoHomePageState();
}
class _TodoHomePageState extends State<TodoHomePage> {
final TextEditingController _controller = TextEditingController();
final List<Map<String, dynamic>> _todos = [];
void _addTodo() {
if (_controller.text.isEmpty) return;
setState(() {
_todos.add({'task': _controller.text, 'done': false});
});
_controller.clear();
}
void _toggleDone(int index) {
setState(() {
_todos[index]['done'] = !_todos[index]['done'];
});
}
void _deleteTask(int index) {
setState(() {
_todos.removeAt(index);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(
'Todo List Cantik',
style: TextStyle(fontWeight: FontWeight.bold),
),
centerTitle: true,
elevation: 2,
backgroundColor: Colors.blueAccent,
foregroundColor: Colors.white,
),
body: Padding(
padding: const EdgeInsets.all(16),
child: Column(
children: [
// Input field
Row(
children: [
Expanded(
child: TextField(
controller: _controller,
decoration: InputDecoration(
hintText: 'Tambahkan tugas baru...',
filled: true,
fillColor: Colors.white,
contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20),
borderSide: BorderSide.none,
),
),
),
),
const SizedBox(width: 10),
ElevatedButton(
onPressed: _addTodo,
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blueAccent,
shape: const CircleBorder(),
padding: const EdgeInsets.all(14),
),
child: const Icon(Icons.add, color: Colors.white),
),
],
),
const SizedBox(height: 20),
// Todo List
Expanded(
child: _todos.isEmpty
? const Center(
child: Text(
'Belum ada tugas 😄',
style: TextStyle(fontSize: 18, color: Colors.grey),
),
)
: ListView.builder(
itemCount: _todos.length,
itemBuilder: (context, index) {
final todo = _todos[index];
return AnimatedContainer(
duration: const Duration(milliseconds: 300),
margin: const EdgeInsets.only(bottom: 12),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: Colors.black12.withOpacity(0.05),
blurRadius: 5,
offset: const Offset(0, 3),
)
],
),
child: ListTile(
leading: Checkbox(
value: todo['done'],
activeColor: Colors.blueAccent,
onChanged: (_) => _toggleDone(index),
),
title: Text(
todo['task'],
style: TextStyle(
decoration: todo['done']
? TextDecoration.lineThrough
: TextDecoration.none,
color:
todo['done'] ? Colors.grey : Colors.black87,
),
),
trailing: IconButton(
icon: const Icon(Icons.delete_outline,
color: Colors.redAccent),
onPressed: () => _deleteTask(index),
),
),
);
},
),
),
],
),
),
);
}
}
Kesimpulan:
Tampilan pada gambar menunjukkan sebuah aplikasi Todo List sederhana namun elegan yang dibuat menggunakan Flutter. Aplikasi ini menonjolkan UI/UX yang bersih, intuitif, dan menarik, sehingga memudahkan pengguna dalam menambahkan dan mengelola tugas sehari-hari.
Dengan desain minimalis, warna lembut, serta navigasi yang jelas, aplikasi ini bukan hanya berfungsi sebagai alat produktivitas, tetapi juga memberikan pengalaman visual yang nyaman dan profesional bagi penggunanya.
Komentar
Posting Komentar