Lista zadań: Cofnij usunięcie

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

Przesunięcie jest szybkie, podobnie jak przypadkowe przesunięcie. Dobre aplikacje pozwalają cofnąć tę czynność: u dołu pojawia się komunikat o tym, co zostało usunięte, z przyciskiem Cofnij obok.

SnackBar przyjmuje action:, czyli SnackBarAction z elementami label i onPressed. Aby przywrócić zadanie na poprzednie miejsce, zapamiętaj jego pozycję, zanim je usuniesz:

final index = _tasks.indexOf(task);
// usuń go, a następnie pokaż SnackBar
SnackBarAction(
  label: 'Undo',
  onPressed: () {
    setState(() {
      _tasks.insert(index, task);
    });
  },
)

Jeśli szybko przesuniesz dwa zadania, drugi komunikat będzie czekać, aż pierwszy wygaśnie. Wywołaj ScaffoldMessenger.of(context).hideCurrentSnackBar(); przed showSnackBar, aby najnowszy komunikat pojawił się od razu.

insert(index, task) przywraca zadanie na tę pozycję i przesuwa te, które są za nim, niżej. add umieściłoby je na końcu.

Funkcja przekazana do onPressed zapamiętuje index i task z chwili jej utworzenia, mimo że zostanie uruchomiona później. To domknięcie, na którym cały czas polegają funkcje zwrotne.

Wyzwanie

Średni

Umożliw cofnięcie usunięcia. W _deleteTask:

przed usunięciem zadania zapamiętaj jego pozycję za pomocą indexOf
po jego usunięciu wyświetl SnackBar z tekstem Deleted i tytułem zadania, na przykład Deleted Walk the dog
dodaj akcję Undo, która przywróci zadanie na jego poprzednią pozycję
najpierw ukryj wyświetlaną wiadomość, aby nowe usunięcie ją zastąpiło

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();

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

  void _addTask() {
    final title = _controller.text.trim();
    if (title.isEmpty) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('Type a task first')),
      );
      return;
    }
    setState(() {
      _tasks.add(Task(title));
    });
    _controller.clear();
  }

  void _deleteTask(Task task) {
    setState(() {
      _tasks.remove(task);
    });
  }

  @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),
                ),
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            child: Row(
              children: [
                Text(
                  _left == 1 ? '1 task left' : '$_left tasks left',
                  style: Theme.of(context).textTheme.titleSmall,
                ),
              ],
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: _tasks.length,
              itemBuilder: (context, index) {
                final task = _tasks[index];
                return Dismissible(
                  key: ObjectKey(task),
                  direction: DismissDirection.endToStart,
                  background: Container(
                    color: Colors.red,
                    alignment: Alignment.centerRight,
                    padding: const EdgeInsets.symmetric(horizontal: 24),
                    child: const Icon(Icons.delete, color: Colors.white),
                  ),
                  onDismissed: (direction) => _deleteTask(task),
                  child: 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,
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}