Lista zadań: Pozostałe zadania

Część sekcji Projekty ścieżki Flutter w Coddy. Lekcja 4 z 36.

Jedno spojrzenie na ekran powinno wystarczyć, by dowiedzieć się, ile jeszcze zostało do zrobienia. Odpowiedzią jest liczba niewykonanych zadań. Możesz ją za każdym razem obliczyć na podstawie listy, gdy ekran jest budowany.

Getter jest do tego odpowiednim miejscem. Wygląda jak pole, ale za każdym razem, gdy go używasz, wykonuje swój kod, więc jego wartość jest zawsze aktualna:

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

Nie trzeba utrzymywać dodatkowej zmiennej ani wywoływać osobnego setState: zaznaczenie zadania już wywołuje setState, ekran jest budowany ponownie, a getter ponownie zlicza zadania.

Jeden szczegół sprawia, że tekst brzmi naturalnie: „1 zadanie do zrobienia”, a nie „1 zadań do zrobienia”. Odpowiednie słowa wybiera instrukcja warunkowa.

Wyzwanie

Średni

Pokaż, ile zadań pozostało:

dodaj getter _left, który zlicza niewykonane zadania
między polem a listą wyświetl tę wartość w widżecie Text, na przykład 3 tasks left, w widżecie Row z paddingiem po 16 pikseli po bokach oraz po 8 pikseli u góry i u dołu
jeśli pozostało dokładnie jedno zadanie, wyświetl 1 task left

Spróbuj swoich sił

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