Membuat to do list sederhana
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'To Do List',
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<String> _tasks = [];
void addTask() {
if (_controller.text.isNotEmpty) {
setState(() {
_tasks.add(_controller.text);
_controller.clear();
});
}
}
void removeTask(int index) {
setState(() {
_tasks.removeAt(index);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.orange,
centerTitle: true,
title: const Text('To Do List-Alfin'),
),
body: Padding(
padding: const EdgeInsets.all(16),
child: Column(
children: [
Row(
children: [
Expanded(
child: TextField(
controller: _controller,
decoration: const InputDecoration(
hintText: 'Masukkan tugas...',
border: OutlineInputBorder(),
),
),
),
const SizedBox(width: 8),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.orange,
),
onPressed: addTask,
child: const Text('Add'),
),
],
),
const SizedBox(height: 20),
Expanded(
child: _tasks.isEmpty
? const Center(
child: Text(
'Belum ada tugas',
style: TextStyle(color: Colors.grey),
),
)
: ListView.builder(
itemCount: _tasks.length,
itemBuilder: (context, index) {
return Card(
child: ListTile(
title: Text(_tasks[index]),
trailing: IconButton(
icon: const Icon(Icons.delete, color: Colors.red),
onPressed: () => removeTask(index),
),
),
);
},
),
),
],
),
),
);
}
}
Siap 👍
Ini laporan proyek To Do List Flutter yang rapi, formal, dan siap langsung kamu copy–paste ke Blogger. Cocok buat tugas RPL/PPLG juga.
---
Laporan Pembuatan Aplikasi To Do List Menggunakan Flutter
1. Pendahuluan
Perkembangan teknologi informasi saat ini sangat pesat, khususnya dalam bidang pengembangan aplikasi mobile dan web. Salah satu framework yang banyak digunakan adalah Flutter, karena mampu menghasilkan aplikasi yang cepat, modern, dan responsif.
Dalam kehidupan sehari-hari, manusia sering memiliki banyak aktivitas dan tugas. Oleh karena itu, diperlukan sebuah aplikasi yang dapat membantu mengatur dan mencatat tugas agar lebih terorganisir. Berdasarkan hal tersebut, penulis membuat sebuah aplikasi To Do List sederhana menggunakan Flutter.
---
2. Tujuan Pembuatan Aplikasi
Tujuan dari pembuatan aplikasi To Do List ini adalah:
1. Membantu pengguna mencatat dan mengelola daftar tugas.
2. Melatih kemampuan dasar pemrograman Flutter.
3. Menerapkan konsep Stateful Widget dalam Flutter.
4. Menjadi contoh proyek sederhana untuk pembelajaran RPL/PPLG.
---
3. Alat dan Bahan
Adapun alat dan bahan yang digunakan dalam pembuatan aplikasi ini adalah:
Laptop / Smartphone
Browser (Google Chrome)
Website zapp.run
Framework Flutter
Bahasa pemrograman Dart
---
4. Perancangan Aplikasi
Aplikasi To Do List ini memiliki tampilan yang sederhana dan mudah digunakan, dengan komponen sebagai berikut:
AppBar dengan judul “To Do List-Alfin”
TextField untuk memasukkan tugas
Tombol Add untuk menambahkan tugas
Daftar tugas yang ditampilkan dalam bentuk list
Pesan “Belum ada tugas” jika daftar masih kosong
Tombol hapus untuk menghapus tugas
---
5. Implementasi Aplikasi
Aplikasi dibuat menggunakan StatefulWidget agar data tugas dapat berubah secara dinamis. Data tugas disimpan dalam sebuah list dan akan ditampilkan menggunakan ListView.builder.
Setiap tugas dapat ditambahkan melalui TextField dan dihapus menggunakan tombol delete.
---
6. Cara Menjalankan Aplikasi
Langkah-langkah menjalankan aplikasi To Do List adalah sebagai berikut:
1. Buka website https://zapp.run
2. Pilih project Flutter
3. Masukkan kode program Flutter ke file main.dart
4. Klik tombol Run
5. Aplikasi To Do List akan tampil di layar
---
7. Hasil dan Pembahasan
Hasil dari pembuatan aplikasi ini adalah sebuah aplikasi To Do List sederhana yang dapat:
Menambahkan tugas
Menampilkan daftar tugas
Menghapus tugas
Menampilkan pesan jika belum ada tugas
Aplikasi berjalan dengan baik dan sesuai dengan perencanaan awal. Tampilan sederhana namun fungsional sehingga mudah digunakan oleh pengguna.
---
8. Kesimpulan
Berdasarkan pembuatan aplikasi To Do List menggunakan Flutter, dapat disimpulkan bahwa:
1. Flutter memudahkan pembuatan aplikasi dengan tampilan modern.
2. Aplikasi To Do List dapat membantu pengguna mengatur tugas sehari-hari.
3. Proyek ini cocok sebagai latihan dasar pemrograman Flutter untuk siswa RPL/PPLG.
Komentar
Posting Komentar