Repository navigation
Session8 #9
Description
状態管理を見直す
setState や InheritedWidget をそのまま用いる方法は、階層が深くなってしまったり、コード量が多くなってしまったりなどの課題があるため、Riverpod
などの外部パッケージを利用する人が多いのではないでしょうか。
Flutter での状態管理の方法について、公式からいくつか紹介されています。
その中で Provider が紹介されていますが、Provider にあったいくつかの課題を解決した改良版が Riverpod です。
Riverpod を導入して、状態管理やアーキテクチャを見直してみましょう。
課題
- Riverpod を導入して、天気予報画面の状態管理を見直す
- アーキテクチャを見直し、ARCHITECTURE.md に記載する
ヒント
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 を利用して自動生成しました。
Activity