質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

Q&A

解決済

1回答

1356閲覧

Flutter: ChangeNotifierで拡張したクラスのメソッドを実行後、即座に反映されない

massanmesu

総合スコア36

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

0グッド

0クリップ

投稿2021/07/19 02:27

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()で変更内容を通知し、変更が反映されると言う認識です。
プロバイダーに関しては使っている教材で最低限の実装方法として紹介された程度なのでいまいち理解がつかめていません。

ご助力いただけると幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

TasksListクラスのTaskTileのコールバックで別インスタンスのメソッドを渡しているのが原因だと思います。(TaskDataインスタンスが2つ作られており、2つ目のTaskDataインスタンスに最初のTaskDataのtaskを渡しているので画面を更新しないと反映されない)

checkBoxCallBack: () => TaskData().taskUpdate(task),

checkBoxCallBack: () => taskData.taskUpdate(task),

上記のようにProviderから渡されたインスタンスを使えば解決すると思います。

投稿2021/07/21 06:05

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

massanmesu

2021/08/29 05:41

返信が遅れてしまいました。ごめんなさい。 シンプルなコードミスですね。ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問