Closed github-actions[bot] closed 4 months ago
setState や InheritedWidget をそのまま用いる方法は、階層が深くなってしまったり、コード量が多くなってしまったりなどの課題があるため、Riverpod などの外部パッケージを利用する人が多いのではないでしょうか。
setState
InheritedWidget
Flutter での状態管理の方法について、公式からいくつか紹介されています。
その中で Provider が紹介されていますが、Provider にあったいくつかの課題を解決した改良版が Riverpod です。
Riverpod を導入して、状態管理やアーキテクチャを見直してみましょう。
Different Types of Providers に Provider の種類とそれぞれの違いがまとめられています。
Provider の依存関係図の例:
flowchart TB subgraph Arrows direction LR start1[ ] -..->|read| stop1[ ] style start1 height:0px; style stop1 height:0px; start2[ ] --->|listen| stop2[ ] style start2 height:0px; style stop2 height:0px; start3[ ] ===>|watch| stop3[ ] style start3 height:0px; style stop3 height:0px; end subgraph Type direction TB ConsumerWidget((widget)); Provider[[provider]]; end WeatherPage((WeatherPage)); weatherPageUiStateProvider --> WeatherPage; fetchWeatherUseCaseProvider -.-> WeatherPage; WeatherForecastPanel((WeatherForecastPanel)); weatherForecastPanelUiStateProvider ==> WeatherForecastPanel; weatherPageUiStateProvider[[weatherPageUiStateProvider]]; fetchWeatherUseCaseProvider[[fetchWeatherUseCaseProvider]]; weatherRepositoryProvider ==> fetchWeatherUseCaseProvider; weatherUiStateRepositoryProvider ==> fetchWeatherUseCaseProvider; weatherForecastPanelUiStateProvider[[weatherForecastPanelUiStateProvider]]; weatherRepositoryProvider[[weatherRepositoryProvider]]; weatherDataSourceProvider ==> weatherRepositoryProvider; weatherUiStateRepositoryProvider[[weatherUiStateRepositoryProvider]]; weatherDataSourceProvider[[weatherDataSourceProvider]];
※ この Provider の依存関係図は riverpod_graph を利用して自動生成しました。
状態管理を見直す
setState
やInheritedWidget
をそのまま用いる方法は、階層が深くなってしまったり、コード量が多くなってしまったりなどの課題があるため、Riverpod などの外部パッケージを利用する人が多いのではないでしょうか。Flutter での状態管理の方法について、公式からいくつか紹介されています。
その中で Provider が紹介されていますが、Provider にあったいくつかの課題を解決した改良版が Riverpod です。
Riverpod を導入して、状態管理やアーキテクチャを見直してみましょう。
課題
ヒント
Different Types of Providers に Provider の種類とそれぞれの違いがまとめられています。
Provider の依存関係図の例:
※ この Provider の依存関係図は riverpod_graph を利用して自動生成しました。
参考資料