Yapılacaklar Listesi: Kalan Görevler

Coddy'nin Flutter Journey'sinin Projeler bölümünün bir parçası. Ders 4 / 36.

Ekrana bir bakışta yapılacak ne kadar iş kaldığını anlamalısın. Yanıt, tamamlanmamış görevlerin sayısıdır ve ekran her oluşturulduğunda bunu listeden hesaplayabilirsin.

Bunun yeri bir getter’dır. Bir alan gibi okunur ama her kullanıldığında kodunu çalıştırır, böylece her zaman günceldir:

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

Senkronize tutman gereken fazladan bir değişken yoktur ve kendi başına bir setState de yoktur: bir görevi işaretlemek zaten setState çağırır, ekran yeniden oluşturulur ve getter sayımı tekrar yapar.

Bir ayrıntı, metni bir insan yazmış gibi gösterir: "1 görev kaldı", "1 görevler kaldı" değil. Koşullu bir seçim doğru sözcükleri belirler.

Görev

Orta

Kalanları göster:

tamamlanmamış görevleri sayan bir _left alıcısı ekle
alan ile liste arasına, yanlarda 16 piksel, üstte ve altta 8 piksel dolgu olan bir Row içinde, 3 tasks left gibi bir Text ekle
tam olarak bir görev kaldığında 1 task left yaz

Kendin dene

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,
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}