모델 안의 객체 목록

Coddy Flutter 여정의 상태 관리 섹션에 포함된 레슨. 27개 중 14번째.

모델에는 객체 목록이 있는 경우가 많고, 객체 자체도 변경됩니다. 작업에 체크 표시를 하는 것처럼 말이죠. 규칙은 같습니다. 변경은 모델의 메서드를 거치고, 메서드는 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();
  }
}

위젯에서 task.done을 변경해도 객체는 바뀌지만, 변경 사실을 알리는 리스너가 없으므로 상자는 움직이지 않습니다. 모델은 데이터를 변경하는 유일한 곳이자, 변경 사실을 알리는 유일한 곳입니다.

with에 주목하세요. extends는 클래스가 무엇인지를 나타내며, 클래스는 다른 클래스 하나만 상속할 수 있습니다. with는 클래스에 추가 기능을 혼합하며, 여러 개를 추가할 수 있습니다. ChangeNotifier는 두 방식 모두 가능하므로 class TaskList with ChangeNotifier는 extends ChangeNotifier와 같고, 다른 용도로 extends를 사용할 수 있게 해 줍니다.

챌린지

중급

작업을 누르면 위젯에서 바로 task.done이 바뀌므로 화면의 어떤 요소도 움직이지 않습니다. 변경을 모델로 옮기세요:

TaskList에 작업의 done을 바꾸고 리스너들에게 알리는 toggle(Task task) 메서드를 추가하세요.
타일의 onChanged가 이 메서드를 호출하도록 하세요.

직접 해보기

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