Bir Modelde Nesne Listesi

Coddy'nin Flutter Journey'sinin Durum Yönetimi bölümünün bir parçası. Ders 14 / 27.

Bir model çoğu zaman bir nesne listesi tutar ve nesnelerin kendileri değişir: bir görev işaretlenir. Kural aynı kalır: değişiklik modelin bir metodundan geçer ve metot notifyListeners() çağrısını yapar:

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

task.done değerini bileşenden değiştirmek de nesneyi değiştirirdi, ancak hiçbir dinleyici bundan haberdar olmazdı; bu yüzden kutu hareket etmezdi. Verilerini değiştiren tek yer modeldir ve bunu bildiren de tek yer odur.

with kullanımına dikkat edin. extends, bir sınıfın ne olduğunu belirtir ve bir sınıf yalnızca başka bir sınıfı genişletebilir. with, bir sınıfa ek yetenekler katar ve bunlardan birkaçını ekleyebilirsiniz. ChangeNotifier her iki şekilde de çalışır; bu nedenle class TaskList with ChangeNotifier, extends ChangeNotifier ile aynıdır ve extends’i başka bir şey için kullanıma açık bırakır.

Görev

Orta

Bir göreve dokunmak, task.done değerini doğrudan widget içinde değiştirir; bu yüzden ekrandaki hiçbir şey hareket etmez. Değişikliği modele taşı:

TaskList içine görevin done değerini değiştiren ve dinleyicileri bilgilendiren bir toggle(Task task) yöntemi ekle.
Karodaki onChanged özelliğinin bu yöntemi çağırmasını sağla.

Kendin dene

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