前提・実現したいこと
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のクラスを採用していますが、簡単な処理を書いて動作を確認したいだけなので普通のクラスで実装しております(これが原因でしょうか)。
以上、宜しくお願い申し上げます。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/12/16 12:31
2021/12/17 02:53