Una lista di oggetti in un modello

Fa parte della sezione Gestione dello stato del percorso Flutter di Coddy. Lezione 14 di 27.

Un modello contiene spesso un elenco di oggetti, e gli oggetti stessi cambiano: una casella di un'attività viene spuntata. La regola resta la stessa: la modifica passa attraverso un metodo del modello, e il metodo chiama notifyListeners():

class TaskList with ChangeNotifier {
  final List<Task> _tasks = [Task('Buy milk'), Task('Call Sam')];

  List<Task> get tasks => _tasks;

  void toggle(Task task) {
    task.done = !task.done;
    notifyListeners();
  }
}

Modificare task.done dal widget cambierebbe anche l'oggetto, ma nessun ascoltatore ne verrebbe informato, quindi la casella non si sposterebbe. Il modello è l'unico posto in cui i dati vengono modificati ed è l'unico posto che lo comunica.

Nota with. extends indica cosa è una classe, e una classe può estendere una sola altra classe. with aggiunge capacità extra a una classe, e puoi aggiungerne diverse. ChangeNotifier funziona in entrambi i modi, quindi class TaskList with ChangeNotifier equivale a extends ChangeNotifier e lascia extends libero per qualcos'altro.

Sfida

Medio

Toccando un'attività, task.done cambia direttamente nel widget, quindi nulla sullo schermo si sposta. Sposta la modifica nel modello:

Aggiungi un metodo toggle(Task task) a TaskList che cambia il valore di done dell'attività e avvisa gli ascoltatori.
Fai in modo che onChanged del riquadro lo chiami.

Provalo tu

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class Task {
  Task(this.title);

  final String title;
  bool done = false;
}

class TaskList with ChangeNotifier {
  final List<Task> _tasks = [Task('Buy milk'), Task('Walk the dog'), Task('Call Sam')];

  List<Task> get tasks => _tasks;

  int get doneCount => _tasks.where((t) => t.done).length;
}

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => TaskList(),
      child: const MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    final list = context.watch<TaskList>();
    return Scaffold(
      appBar: AppBar(title: Text('${list.doneCount} of ${list.tasks.length} done')),
      body: ListView(
        children: [
          for (final task in list.tasks)
            CheckboxListTile(
              title: Text(task.title),
              value: task.done,
              onChanged: (value) {
                task.done = !task.done;
              },
            ),
        ],
      ),
    );
  }
}