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

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

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

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

Dart

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

Q&A

0回答

500閲覧

ListTileのontapイベントでproviderを使用してviewmodelのメソッドを呼び出し、UI変更までを行いたい

nagasumi

総合スコア0

Flutter

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

Dart

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

0グッド

0クリップ

投稿2020/12/05 15:50

前提・実現したいこと

Flutter初心者です。
providerを使用し、ListTileのontapイベントでviewModelのメソッドを呼び出し、値を変更し、UIに反映させたいです。

発生している問題・エラーメッセージ

onTap: () { Provider.of<TestViewModel>(context, listen: flase).incrementCounter(); }, ```上記のようにlisten: flaseとしていたため、viewModel側でのnotifyListeners();によってUIが更新されないかと思い、listen: trueとした場合、下記のようなエラーが発生しました。

════════ Exception caught by gesture ═══════════════════════════════════════════════════════════════
The following assertion was thrown while handling a gesture:
Tried to listen to a value exposed with provider, from outside of the widget tree.

This is likely caused by an event handler (like a button's onPressed) that called
Provider.of without passing listen: false.

To fix, write:
Provider.of<TestViewModel>(context, listen: false);

It is unsupported because may pointlessly rebuild the widget associated to the
event handler, when the widget tree doesn't care about the value.

listen:

1 2### 該当のソースコード 3

import 'package:flutter/material.dart';
import 'TestWidget.dart';

void main() => runApp(App());

class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'provider sample',
home: TestWidget(),
);
}
}

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:provider/provider.dart';

import 'TestViewModel.dart';

class TestWidget extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ChangeNotifierProvider(create: (_) => TestViewModel()),
],
child: Scaffold(
appBar: AppBar(
title: Text('テスト')
),
body: SafeArea(
child: TestList(),
),
)
);
}
}

class TestList extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: 10,
itemBuilder: (BuildContext context, int index) {
return _messageItem(
context,
);
},
);
}

Widget _messageItem(BuildContext context) {
return Container(
child: ListTile(
title: Text(
//ここに表示する数値が変更されることが期待する動作
Provider.of<TestViewModel>(context, listen: false).counter.toString(),
style: TextStyle(color: Colors.black, fontSize: 18.0),
),
onTap: () {
//listen: trueにするとエラー、falseにすると実行されるがUI更新がされない
Provider.of<TestViewModel>(context, listen: true).incrementCounter();
},
),
);
}
}

import 'package:flutter/material.dart';

class TestViewModel extends ChangeNotifier {

int _counter = 0;
int get counter => _counter;

void incrementCounter() {
this._counter++;
notifyListeners();
}
}

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問