ConsumerWidgetを使ってプロバイダーで管理しているメソッドを実行しているのですが、即座に反映されずに困っております。
#実現したいこと
簡易タスク管理アプリを作成しており、チェックボックスをタップしたらタスクのタイトルに線が引かれる、と言う処理をしたいです。
#起きている問題
処理自体はできたのですが、毎回ホットリロードしないと反映されません。
// メモの項目をListViewで表現しているクラス import 'package:flutter/material.dart'; import 'package:today_flutter/widgets/task_tile.dart'; import 'package:today_flutter/models/task_data.dart'; import 'package:provider/provider.dart'; class TasksList extends StatelessWidget { @override Widget build(BuildContext context) { return Consumer<TaskData>( builder: (_, taskData, child) { return ListView.builder( itemBuilder: (BuildContext context, int index) { final task = taskData.tasks[index]; return TaskTile( taskText: task.taskText, isChecked: task.isDone, // チェックボックスが押された時の処理をコールバック関数で渡す checkBoxCallBack: () => TaskData().taskUpdate(task), index: index); }, itemCount: taskData.tasks.length, ); }, ); } }
/// ListTile import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'package:today_flutter/models/task_data.dart'; class TaskTile extends StatelessWidget { TaskTile( {required this.taskText, required this.isChecked, required this.checkBoxCallBack, required this.index}); final String taskText; final bool isChecked; final VoidCallback checkBoxCallBack; final int index; @override Widget build(BuildContext context) { return ListTile( title: Text( taskText, style: TextStyle( ///isCheckedの値によって文字に線が付く decoration: isChecked ? TextDecoration.lineThrough : null), ), trailing: Checkbox( activeColor: Colors.pink.shade100, value: isChecked, onChanged: (_) => checkBoxCallBack(), ), onLongPress: () { Provider.of<TaskData>(context, listen: false).taskDelete(index); }, ); } }
///プロバいダーで管理しているタスクデータ import 'package:flutter/foundation.dart'; import 'package:today_flutter/models/task.dart'; import 'dart:collection'; class TaskData extends ChangeNotifier { List<Task> _tasks = [ Task(taskText: 'Buy milk'), Task(taskText: 'Buy bread'), Task(taskText: 'play game'), ]; UnmodifiableListView<Task> get tasks { return UnmodifiableListView(_tasks); } void addTask(String newTaskName) { _tasks.add(Task(taskText: newTaskName)); notifyListeners(); } // チェックボックスがタップされるたびに実行。 void taskUpdate(Task task) { task.toggleDone(); notifyListeners(); // 変更されたことを通知する、と言う認識 } void taskDelete(int index) { _tasks.removeAt(index); notifyListeners(); } }
/// モデル class Task { Task({required this.taskText, this.isDone = false}); final String taskText; bool isDone; void toggleDone() { isDone = !isDone; } }
notifyListeners()
で変更内容を通知し、変更が反映されると言う認識です。
プロバイダーに関しては使っている教材で最低限の実装方法として紹介された程度なのでいまいち理解がつかめていません。
ご助力いただけると幸いです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/08/29 05:41