Daftar Tugas: Tugas Tersisa

Termasuk bagian Proyek dalam perjalanan Flutter di Coddy. Pelajaran 4 dari 36.

Sekilas melihat layar seharusnya memberi tahu kamu berapa banyak tugas yang masih harus dikerjakan. Jawabannya adalah jumlah tugas yang belum selesai, dan kamu bisa menghitungnya dari daftar setiap kali layar dibuat.

Getter adalah tempat yang tepat untuk itu. Getter terbaca seperti field, tetapi menjalankan kodenya setiap kali kamu menggunakannya, jadi nilainya selalu terbaru:

int get _left => _tasks.where((task) => !task.done).length;

Tidak ada variabel tambahan yang harus tetap selaras dan tidak ada setState tersendiri: menandai tugas sudah memanggil setState, layar dibangun ulang, lalu getter menghitung kembali.

Satu detail membuatnya terdengar seperti ditulis oleh manusia: "1 task left", bukan "1 tasks left". Percabangan memilih kata yang tepat.

Tantangan

Sedang

Tampilkan jumlah yang tersisa:

tambahkan getter _left yang menghitung tugas yang belum selesai
di antara field dan daftar, tampilkan dalam Text seperti 3 tasks left, dalam Row dengan padding 16 piksel di sisi kiri dan kanan serta 8 piksel di atas dan bawah
untuk tepat satu tugas, tulis 1 task left

Coba sendiri

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,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.teal),
      ),
      home: const TodoScreen(),
    );
  }
}

class Task {
  Task(this.title);

  final String title;
  bool done = false;
}

class TodoScreen extends StatefulWidget {
  const TodoScreen({super.key});

  @override
  State<TodoScreen> createState() => _TodoScreenState();
}

class _TodoScreenState extends State<TodoScreen> {
  final List<Task> _tasks = [Task('Buy milk'), Task('Walk the dog'), Task('Read a book')];
  final _controller = TextEditingController();

  void _addTask() {
    setState(() {
      _tasks.add(Task(_controller.text));
    });
    _controller.clear();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('My Tasks')),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.fromLTRB(16, 16, 16, 8),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: const InputDecoration(
                      labelText: 'New task',
                      border: OutlineInputBorder(),
                    ),
                  ),
                ),
                const SizedBox(width: 8),
                IconButton.filled(
                  onPressed: _addTask,
                  icon: const Icon(Icons.add),
                ),
              ],
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: _tasks.length,
              itemBuilder: (context, index) {
                final task = _tasks[index];
                return ListTile(
                  leading: Checkbox(
                    value: task.done,
                    onChanged: (value) {
                      setState(() {
                        task.done = value!;
                      });
                    },
                  ),
                  title: Text(
                    task.title,
                    style: task.done
                        ? const TextStyle(
                            decoration: TextDecoration.lineThrough,
                            color: Colors.grey,
                          )
                        : null,
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}