【Flutter】StatefullWidgetからRiverpodを使った実装への書き換え【Riverpod】

Flutter Programming

StatefullWidgetからRiverpodを使った実装へ変更する場合、実際どこを変更する必要があるのかについて書いていきます。

目次

インタラクティブに画面を変える必要がない場合

RiverpodのProviderをインスタンスの受け取りとして使用し、そのメソッドを使用したいだけの場合がこれに該当します。

もともとのStateの実装の中でsetState()を呼んでいても、それらに関して変更は不要です。 また、initState()についても変更不要です。

変更点

  1. StatefulWidget => ConsumerStatefulWidget
  2. State => ConsumerState
  3. widgetをProviderScopeでwrapする
    • runApp(MyApp()); => runApp(ProviderScope(child: MyApp()),);

変更例

  • StatefulWidgetのファイル
-class Settings extends StatefulWidget {
+class Settings extends ConsumerStatefulWidget {
   const Settings({Key? key}) : super(key: key);

   @override
   _SettingsState createState() => _SettingsState();
 }

-class _SettingsState extends State<Settings> {
+class _SettingsState extends ConsumerState<Settings> {
  • runAppを実行しているファイル
 void main() {
-  runApp(const MyApp());
-}
\ No newline at end of file
+  runApp(
+    const ProviderScope(child: MyApp()),
+  );
+}

インタラクティブに画面表示を変えたい場合

to be continued...

参考ページ