Lista delle cose da fare: annullare un’eliminazione

Fa parte della sezione Progetti del percorso Flutter di Coddy. Lezione 7 di 36.

Uno scorrimento è rapido, e altrettanto rapido è uno scorrimento accidentale. Le buone app ti permettono di annullarlo: un messaggio in basso indica cosa è stato eliminato, con un pulsante Annulla accanto.

Un SnackBar accetta un action:, un SnackBarAction con un label e un onPressed. Per rimettere l’attività al suo posto, ricordane la posizione prima di rimuoverla:

final index = _tasks.indexOf(task);
// rimuovilo, poi mostra la SnackBar
SnackBarAction(
  label: 'Undo',
  onPressed: () {
    setState(() {
      _tasks.insert(index, task);
    });
  },
)

Fai scorrere rapidamente due attività e il secondo messaggio attenderà che il primo scada. Chiama ScaffoldMessenger.of(context).hideCurrentSnackBar(); prima di showSnackBar, così il messaggio più recente viene mostrato subito.

insert(index, task) rimette l’attività in quella posizione e sposta in basso quelle successive. add la metterebbe in fondo.

La funzione che passi a onPressed ricorda index e task dal momento in cui l’hai creata, anche se viene eseguita più tardi. Questa è una closure, e le funzioni di callback si basano continuamente su di essa.

Sfida

Medio

Consenti di annullare un’eliminazione. In _deleteTask:

prima di rimuovere l’attività, memorizzane la posizione con indexOf
dopo averla rimossa, mostra una SnackBar con il testo Deleted e il titolo dell’attività, come Deleted Walk the dog
aggiungi un’azione Undo che ripristini l’attività nella posizione precedente
nascondi prima il messaggio visualizzato, così una nuova eliminazione lo sostituisce

Provalo tu

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