riverpod（v2）でアプリを作る

ここではcreateコマンドを実行した、直後のプロジェクトに対しriverpodの導入を行います。ただしcreateによって生成されるカウンターアプリ自体には特に意味がないので、単純なtext表示を行うアプリをriverpod対応させたいと思います。

概要

• pub.dev flutter_riverpod

作業手順

手順１．riverpodパケージのインストール

• プロジェクトのルートディレクトリで以下のコマンドを実行します。

    flutter pub add flutter_riverpod
  

• 類似パッケージにriverpodやhooks_riverpodがあります。 ご自身の目的に合わせて選択してください。

コマンド実行結果

(省略)\training_app>flutter pub add flutter_riverpod
Resolving dependencies...
  flutter_lints 2.0.3 (3.0.1 available)
+ flutter_riverpod 2.4.9
  lints 2.1.1 (3.0.0 available)
  matcher 0.12.16 (0.12.16+1 available)
  material_color_utilities 0.5.0 (0.8.0 available)
  meta 1.10.0 (1.11.0 available)
  path 1.8.3 (1.9.0 available)
  test_api 0.6.1 (0.7.0 available)
  web 0.3.0 (0.4.0 available)
Changed 1 dependency!
8 packages have newer versions incompatible with dependency constraints.
Try `flutter pub outdated` for more information.

パケージが追加されていることを確認します。

• pubspec.yamlに以下の記述があることを確認します。

• 注意：上記はデフォルトのpubspec.yaml内に存在するコメントをすべて削除しております。

• これでriverpodを使用する準備が整いました。

手順２．プログラム

軽量のウィジェットを作っておきます。

// my_widget.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class MyWidget extends ConsumerWidget {
  const MyWidget({
    super.key,
  });

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // ここで ref.watch など
    return const Text('ここにデータが入ります');
  }
}

ウィジェットをコールするmain.dartを記載します。

// main.dart
import 'package:flutter/material.dart';
import 'package:training_app/my_widget.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

void main() {
  const app = MyApp();
  const scope = ProviderScope(child: app);
  runApp(scope);
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}