【Flutter入門講座 第4回】状態管理の第一歩。setStateとChangeNotifier・ListenableBuilderでメモアプリを動かす

class CounterMemoPage extends StatefulWidget {
  const CounterMemoPage({super.key});

  @override
  State<CounterMemoPage> createState() => _CounterMemoPageState();
}

class _CounterMemoPageState extends State<CounterMemoPage> {
  final _memos = <String>[];

  void _add() {
    setState(() {
      _memos.add('メモ ${_memos.length + 1}');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('メモ（${_memos.length} 件）')),
      body: ListView(
        children: [for (final m in _memos) ListTile(title: Text(m))],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _add,
        child: const Icon(Icons.add),
      ),
    );
  }
}

class MemoStore extends ChangeNotifier {
  MemoStore(this._repository);

  final MemoRepository _repository;
  List<Memo> _memos = [];
  int _nextId = 1;

  List<Memo> get memos => List.unmodifiable(_memos);
  int get remaining => _memos.where((m) => !m.done).length;

  void add(String text) {
    if (text.trim().isEmpty) return;
    _memos = [..._memos, Memo(id: _nextId++, text: text.trim())];
    _changed();
  }

  void toggle(int id) {
    _memos = [
      for (final m in _memos) m.id == id ? m.copyWith(done: !m.done) : m,
    ];
    _changed();
  }

  void remove(int id) {
    _memos = _memos.where((m) => m.id != id).toList();
    _changed();
  }

  void _changed() {
    notifyListeners(); // 画面を描き直す
    _repository.save(_memos); // 保存は裏で
  }
}

return ListenableBuilder(
  listenable: store,
  builder: (context, _) {
    final memos = store.memos;
    return Scaffold(
      appBar: AppBar(title: Text('メモ（残り ${store.remaining} 件）')),
      body: ListView.separated(
        itemCount: memos.length,
        separatorBuilder: (_, _) => const Divider(height: 1),
        itemBuilder: (context, index) {
          final memo = memos[index];
          return Dismissible(
            key: ValueKey(memo.id),
            onDismissed: (_) => store.remove(memo.id),  // 横にスワイプで削除
            background: Container(color: Colors.red.shade100),
            child: CheckboxListTile(
              value: memo.done,
              onChanged: (_) => store.toggle(memo.id),  // チェックの ON/OFF
              title: Text(memo.text),
            ),
          );
        },
      ),
    );
  },
);