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

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

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

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

Android

Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

Q&A

解決済

1回答

1624閲覧

RiverpodでMVVMを実装したがViewに表示する値が変更されない

massanmesu

総合スコア36

Flutter

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

Android

Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

0グッド

0クリップ

投稿2021/12/10 06:01

前提・実現したいこと

RiverpodでMVVMを実装した簡単なアプリを作っています。
初期画面は犬のアイコンと『I am a dog』というテキストがあるだけです。

ボタンを押すと犬→てんとう虫→蜂→犬のサイクルでアイコンとテキストが変わるような機能を実装したいです。

イメージ説明

が、今のコードだとボタンを押しても切り替わりません。

該当のソースコード

#####View

import 'package:flutter/material.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:very_simple_mvvm_riverpod/viewmodel.dart'; class View extends ConsumerWidget { const View({Key? key}) : super(key: key); @override Widget build(BuildContext context, WidgetRef ref) { final _animal = ref.watch(animalStateProvider); final _animalNotifier = ref.watch(animalStateProvider.notifier); return Scaffold( appBar: AppBar( title: Text('I am ...'), centerTitle: true, ), body: Padding( padding: EdgeInsets.all(20), child: Center( child: Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ Icon(_animal.icon, size: 200), SizedBox(height: 10), Text( 'I am a ${_animal.name.name}', style: Theme.of(context).textTheme.headline5, ), SizedBox(height: 10), ElevatedButton.icon( onPressed: () => _animalNotifier.swichAnimal(), // 切り替え処理の実行 icon: Icon(Icons.refresh), label: Text('refresh'), ) ], ), ), )); } }

######ViewModel

import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:riverpod/riverpod.dart'; import 'package:very_simple_mvvm_riverpod/model.dart'; final animalDataProvider = StateProvider<AnimalData>((ref) { return AnimalData(); }); // Viewに通知するプロバイダー final animalStateProvider = StateNotifierProvider<AnimalState, AnimalData>((ref) => AnimalState(ref)); class AnimalState extends StateNotifier<AnimalData> { AnimalState(this.ref) : super(AnimalData()); final StateNotifierProviderRef ref; get name => ref.watch(animalDataProvider).name; // Viewで取得したい値 get icon => ref.watch(animalDataProvider).icon;  // Viewで取得したい値 void swichAnimal() { ref.read(animalDataProvider).swichAnimal(); // 切り替え処理 } }

######Model

import 'package:flutter/material.dart'; enum Animal { dog, bug, bee, } const dogIcon = Icons.pets; const bugIcon = Icons.bug_report; const beeIcon = Icons.emoji_nature; class AnimalData { var name = Animal.dog; IconData icon = dogIcon; // 現在のアイコンから条件分岐で次のアイコンに更新 void swichAnimal() { if (name == Animal.dog) { name = Animal.bug; icon = bugIcon; } else if (name == Animal.bug) { name = Animal.bee; icon = beeIcon; } else { name = Animal.dog; icon = dogIcon; } } }

補足情報(FW/ツールのバージョンなど)

・ 使用しているパッケージ
flutter_riverpod: ^1.0.2
・その他
多くの記事ではFreezedのクラスを採用していますが、簡単な処理を書いて動作を確認したいだけなので普通のクラスで実装しております(これが原因でしょうか)。


以上、宜しくお願い申し上げます。

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

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

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

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

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

guest

回答1

0

ベストアンサー

おっしゃる通り、Freezedのクラスを採用していないからだと思います。
少しめんどくさいですが、Freezedのクラスを採用していないとriverpodがデータの変更に気づけなくて、画面の更新ができません。

投稿2021/12/16 12:19

children

総合スコア89

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

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

massanmesu

2021/12/16 12:31

ご回答ありがとうございます。本当に助かります。 明日確認してみます。
massanmesu

2021/12/17 02:53

AnimalDataをfreezedで作成し、切り替え処理をStateControllerとして実装したら上手く動きました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問