Daftar object dalam Model

Termasuk bagian Pengelolaan State dalam perjalanan Flutter di Coddy. Pelajaran 14 dari 27.

Sebuah model sering menyimpan list object, dan object itu sendiri berubah: sebuah tugas dicentang. Aturannya tetap sama: perubahan dilakukan melalui method model, dan method tersebut memanggil 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();
  }
}

Mengubah task.done dari widget juga akan mengubah object, tetapi tidak ada listener yang mengetahuinya, sehingga kotaknya tidak akan bergerak. Model adalah satu-satunya tempat yang mengubah datanya dan satu-satunya tempat yang memberi tahu.

Perhatikan with. extends menyatakan apa identitas sebuah class, dan sebuah class hanya dapat mewarisi satu class lain. with mencampurkan kemampuan tambahan ke dalam class, dan kamu dapat menambahkan beberapa kemampuan. ChangeNotifier dapat digunakan dengan kedua cara, jadi class TaskList with ChangeNotifier sama dengan extends ChangeNotifier, dan membiarkan extends tetap tersedia untuk hal lain.

Tantangan

Sedang

Mengetuk tugas mengubah task.done langsung di widget, jadi tidak ada yang bergerak di layar. Pindahkan perubahan itu ke model:

Tambahkan method toggle(Task task) ke TaskList untuk mengubah done milik tugas dan memberi tahu para listener.
Buat onChanged milik tile memanggilnya.

Coba sendiri

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

Uji dirimu

Pelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.

Semua pelajaran di Pengelolaan State

Latihan sendiri: Compiler Flutter online