Riverpodが2.0で結構変わった

https://docs-v2.riverpod.dev/

@riverpodとか増えてる

まずは、Counterアプリを作ってみます。

横道にそれますが、dartにData Classってそろそろくるのか?

https://github.com/dart-lang/language/issues/1482

話を戻しますと、providerをgenerateしようとして、下記のコマンドを打ったところ下記のエラーが発生。

dart run build_runner watch                             
Could not find a file named "pubspec.yaml" in "/Users/t-watanabe/.pub-cache/hosted/pub.dartlang.org/_fe_analyzer_shared-50.0.0".
#0      new Pubspec.load (package:pub/src/pubspec.dart:306:7)
#1      new Package.load (package:pub/src/package.dart:128:29)
#2      SystemCache.load (package:pub/src/system_cache.dart:105:20)
#3      Entrypoint._createPackageGraph (package:pub/src/entrypoint.dart:121:63)
#4      Entrypoint.packageGraph (package:pub/src/entrypoint.dart:116:54)
#5      getExecutableForCommand (package:pub/src/executable.dart:339:19)
#6      RunCommand.run (package:dartdev/src/commands/run.dart:250:32)
#7      CommandRunner.runCommand (package:args/command_runner.dart:209:27)
#8      DartdevRunner.runCommand (package:dartdev/dartdev.dart:231:30)
#9      CommandRunner.run.<anonymous closure> (package:args/command_runner.dart:119:25)
#10     new Future.sync (dart:async/future.dart:302:31)
#11     CommandRunner.run (package:args/command_runner.dart:119:14)
#12     runDartdev (package:dartdev/dartdev.dart:66:29)
#13     main (file:///opt/s/w/ir/x/w/sdk/pkg/dartdev/bin/dartdev.dart:11:9)
#14     _delayEntrypointInvocation.<anonymous closure> (dart:isolate-patch/isolate_patch.dart:293:32)
#15     _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:192:12)

上はdart pub getで解決しました。masonあたりを試してた時になんかやっちゃったんだな。多分。

↓のエラーも出てるが、flutterのissueを見てもよくわからない。一旦放置。

Notifier

同じ会社の人に聞きましたが、StateNotifierはもうlegacyらしい。

https://pub.dev/documentation/riverpod/latest/riverpod/Notifier-class.html

https://github.com/bizz84/async_notifier_example_riverpod/blob/main/lib/notifiers/counter.dart

↑を参考にするとこんなんでいいらしい

/// Notifier example (with codegen)
import 'package:riverpod_annotation/riverpod_annotation.dart';

part 'counter.g.dart';

@riverpod
class Counter extends _$Counter {
  @override
  int build() {
    return 0;
  }

  void increment() {
    state++;
  }
}

これだけで、昔で言うところのStateNotifierProviderみたいなやつも生成される

↓のあたり。

https://github.com/bizz84/async_notifier_example_riverpod/blob/main/lib/notifiers/counter.g.dart#L35

呼び出すときはこんな感じですね

import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

import 'counter.dart';

class CounterView extends HookConsumerWidget {
  const CounterView({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counterProvider);
    final notifier = ref.read(counterProvider.notifier);
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: Center(
          child: Text('$count'),
        ),
        floatingActionButton: FloatingActionButton(
          // The read method is a utility to read a provider without listening to it
          onPressed: () => notifier.increment(),
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}