Membuat Aplikasi Flutter Pertama
Panduan Belajar Flutter: Membuat Aplikasi Daftar Tugas Harian (To-Do List App)
1. Persiapan Proyek
Buka terminal/command prompt Anda, lalu jalankan perintah berikut untuk membuat proyek Flutter baru:
(flutter create aplikasi_todo_harian
cd aplikasi_todo_harian)
Buka proyek tersebut di kode editor favorit Anda (seperti VS Code atau Android Studio).
2. Pemahaman Konsep Widget yang Digunakan
Dalam aplikasi ini, kita akan menggunakan beberapa widget dasar Flutter:
- StatefulWidget: Widget yang tampilan atau datanya dapat berubah secara dinamis ketika pengguna melakukan aksi (seperti menambah atau mengklik centang tugas).
- Scaffold: Struktur dasar halaman Flutter yang menyediakan AppBar, body, dan FloatingActionButton.
- ListView.builder: Widget untuk menampilkan daftar data bertipe scrollable secara efisien.
- CheckboxListTile: Widget baris daftar yang sudah dilengkapi dengan kotak centang (checkbox).
- AlertDialog & TextField: Pop-up dialog dan kolom input untuk menambah tugas baru.
3. Kode Lengkap (lib/main.dart)
Buka berkas lib/main.dart, hapus seluruh kode bawaan, lalu ganti dengan kode berikut:
import 'package:flutter/material.dart';
void main() {
runApp(const TodoApp());
}
// 1. Root Aplikasi
class TodoApp extends StatelessWidget {
const TodoApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Daftar Tugas Harian',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.teal),
useMaterial3: true,
),
home: const TodoHomePage(),
);
}
}
// Model sederhana untuk objek Tugas
class Task {
String title;
bool isCompleted;
Task({required this.title, this.isCompleted = false});
}
// 2. Halaman Utama (Stateful karena datanya dinamis)
class TodoHomePage extends StatefulWidget {
const TodoHomePage({super.key});
@override
State<TodoHomePage> createState() => _TodoHomePageState();
}
class _TodoHomePageState extends State<TodoHomePage> {
// List penampung daftar tugas
final List<Task> _tasks = [
Task(title: 'Belajar Dasar Flutter', isCompleted: true),
Task(title: 'Membuat Aplikasi Pertama'),
Task(title: 'Membaca Dokumentasi Dart'),
];
final TextEditingController _taskController = TextEditingController();
// Fungsi untuk menambah tugas baru
void _addTask() {
if (_taskController.text.trim().isNotEmpty) {
setState(() {
_tasks.add(Task(title: _taskController.text.trim()));
});
_taskController.clear();
Navigator.pop(context); // Menutup dialog setelah menambah
}
}
// Fungsi untuk menghapus tugas
void _deleteTask(int index) {
setState(() {
_tasks.removeAt(index);
});
}
// Menampilkan Pop-up input tugas
void _showAddTaskDialog() {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: const Text('Tambah Tugas Baru'),
content: TextField(
controller: _taskController,
autofocus: true,
decoration: const InputDecoration(
hintText: 'Contoh: Belajar Widget Scaffold',
border: OutlineInputBorder(),
),
),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: const Text('Batal'),
),
ElevatedButton(
onPressed: _addTask,
child: const Text('Simpan'),
),
],
);
},
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Daftar Tugas Harian'),
centerTitle: true,
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
),
body: _tasks.isEmpty
? const Center(
child: Text(
'Belum ada tugas hari ini 🎉\nKlik tombol + untuk menambah.',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 16, color: Colors.grey),
),
)
: ListView.builder(
itemCount: _tasks.length,
padding: const EdgeInsets.all(12.0),
itemBuilder: (context, index) {
final task = _tasks[index];
return Card(
elevation: 2,
margin: const EdgeInsets.symmetric(vertical: 6.0),
child: CheckboxListTile(
title: Text(
task.title,
style: TextStyle(
decoration: task.isCompleted
? TextDecoration.lineThrough
: TextDecoration.none,
color: task.isCompleted ? Colors.grey : Colors.black,
),
),
value: task.isCompleted,
onChanged: (bool? value) {
setState(() {
task.isCompleted = value ?? false;
});
},
secondary: IconButton(
icon: const Icon(Icons.delete_outline, color: Colors.red),
onPressed: () => _deleteTask(index),
),
),
);
},
),
floatingActionButton: FloatingActionButton.extended(
onPressed: _showAddTaskDialog,
icon: const Icon(Icons.add),
label: const Text('Tambah Tugas'),
),
);
}
}
4. Penjelasan Cara Kerja Kode
- Model Data (Task): Kelas sederhana yang menampung judul tugas (title) dan status selesai (isCompleted).
- Manajemen State (setState):
- Setiap kali pengguna menambah tugas, menghapus tugas, atau mencentang tugas, metode setState() dipanggil.
- setState() memberi tahu Flutter untuk menggambar ulang tampilan (UI) dengan data terbaru.
- ListView.builder: Menampilkan daftar tugas secara efisien. Jika list kosong, aplikasi akan menampilkan pesan empty state.
- Interactive UI:
- Mengetuk kotak centang (checkbox) akan memberikan efek coret (strikethrough) pada teks tugas.
- Tombol tempat sampah di sebelah kanan digunakan untuk menghapus item tugas dari daftar.
5. Cara Menjalankan Aplikasi
- Pastikan emulator (Android/iOS) atau browser web Anda sudah aktif.
- Jalankan perintah berikut di terminal: (flutter run)
Alternatif Tema Lain yang Bisa Dicoba Berikutnya:
Jika Anda ingin mencoba tema lain setelah ini, berikut beberapa ide aplikasi pertama yang bagus untuk latihan dasar Flutter:
- Kartu Profil Digital (Digital Business Card): Menggunakan widget CircleAvatar, Card, Icon, dan Text untuk membuat halaman portofolio ringkas.
- Aplikasi Quotes Motivasi: Menggunakan FutureBuilder atau array lokal untuk menampilkan kutipan acak setiap kali tombol ditekan.
- Kalkulator Sederhana: Belajar mengolah input angka, tombol grid (GridView), dan operasi aritmatika dasar.
Komentar
Posting Komentar